一、背景

• 背景：页面局部信息过于密集，客户想要更清楚地看到细节，需要开发全屏功能，但 AppCube 暂未有相关的实现。
• 技术定位：初级
• 目标群体：前端开发
• 技术应用场景：为代码开发中的标准页面、高级页面提供全屏功能
• 整体思路：通过自定义库上传 screenfull 库，页面引入 screenfull 库就能拓展全屏显示的功能

二、操作步骤

2.1 开发前的准备工作

• 熟悉自定义库
• 熟悉标准页面及高级页面
• 参考文档： 如何引入第三方库

2.2 进入开发阶段

① 自定义库

我们知道凡是能够通过 CDN 引入的第三方库都能够集成到 AppCube 中，因此本次要实现的全屏功能也是基于能够通过 CDN 引入的 screenfull ,

当前最新版本是 5.2.0，鉴于 screenfull 这个库比较简单就一个文件，因此直接通过链接下载 min.js 作为自定义库的主要文件，再加上自定义库必备的包说明j json 文件，最后打包成 zip 就能上传到平台了。

如下图中， index.js 就是 screenfull 核心代码，命名与 packageinfo.json 中保持一致就行，最终在当前目录将文件打包成 zip。

接着，我们将自定义库上传到 AppCube 的库中，提交完毕会生成一个自定义库，后续我们通过库ID(如t00000_screenfull)进行引入。

② 在标准页面中使用

首先，我们创建标准页面之后要先引入自定义库，接着，为了演示，我们在页面中定义了一个按钮，我们只需要给按钮添加事件，写入代码：

screenfull.toggle()

事件定义及代码如下图：

预览的效果如下图：

③ 在高级页面中使用

同样的，我们新建一个高级页面并引入自定义库，为了方便演示，我们在页面上添加了一个图片组件来充当我们的按钮，

给图片添加点击事件，依旧写入：

screenfull.toggle()

保存发布高级页面看看效果，如下图：

三、总结

• 要实现的功能先看 AppCube 本身支不支持，再看社区有没有相关的实现；
• 对于成熟的解决方案，优先集成第三方库来实现