快速打造一个套壳APP

丸丸丸丸丸丸

作为一个前端coder，很少会涉及到需要自己动手打包一个APP的情况，更多的时候，我们都是在现有APP的基础上，以混合开发的模式，将H5页面内嵌到原生APP的webview中。不过，笔者所在的业务线，恰恰接到了一个需要打包一个套壳APP的需求。需求背景我司门店的大屏内置Android系统，希望在大屏上可以安装一个应用程序，将已有的业务功能页面内嵌进去。技术选型基于以上需求，技术方案选择采用APP套壳+内嵌H5页面的模式，这样，只需要开发个适用于大屏的APP安装包即可。方案确定以后，接下来要做的就是寻找适合的框架来开发App安装包了。在对比了业界主流的跨端框架后，对其特点和差异性，简单做了对比和分析：框架Android客户端打包方式系统级APIElectron不支持本地具备Cordova支持本地打包具备Ionic支持本地打包具备Weex支持本地打包具备Hippy支持本地打包具备Flutter支持本地打包具备RN支持本地打包具备uniapp支持本地打包、云打包具备PWA类原生不需要打包不具备从上述调研可以看出，大多数的跨端框架都只支持本地打包。本地打包有以下几个弊端：本地环境搭建麻烦，一般步骤如下：安装AndroidStudio安装AndroidSDK并配置环境变量设置Android模拟器调试Android设备多人维护时，每人都需要搭建本地环境，成本较高在尝试搭建本地环境时，耗时一天，期间遇到了各种各样的环境问题，苦不堪言，最终只得放弃。而云打包就省去了本地打包的诸多麻烦，简单来说，云打包就是开发者不需要在本地搭建环境，通过共用云端搭建的环境来打包构建安装包。如此一来，开发者只负责写好代码即可，打包的事交给云服务，岂不完美？综上，框架自然选择了拥有云打包能力的uniapp。它可以让我们以很小的代价完成App打包的工作，达到快速开发的目的。至于PWA，由于它缺少系统级API能力，也自然不能入选了。项目实践安装HBuilderX编辑器uniapp的云打包功能，是集成在HBuilderX编辑器中的，因此我们需要先安装HBuilderX编辑器。App项目搭建新建APP项目首先，我们先通过HBuilderX新建个项目。由于我们只需要一个APP的壳，所以选择默认模板即可。使用Vue脚手架创建的项目也可以，但是需要手动创建manifest.json和pages.json文件，HBuilderX新建项目时，会自动创建所需的配置文件。因此，建议直接在HBuilderX上创建项目。新建的项目目录结构如下：项目搭建好后，开始改造工作。原生页面改造就需求而言，一共需要两个原生页面：首页和webview。首页只承担开屏海报页功能。webview用来承载H5页面。首页：index.vue因此，我们一共需要创建两个页面。首先，我们来改造首页index.vue：首页只有一个交互，就是跳转到webview页。webview页面：webview.vue下面我们来新建个webview页面webview.vue：将H5页面链接配置到webview组件的src属性上即可。原生页面路由配置页面的改造已经完成，接下来我们改造路由配置pages.json：这里需要说明下：起初，webview页使用的不是custom模式，而选择使用默认导航栏。但是默认导航栏有个问题，它的高度是固定的44px，无法实现响应式，大屏设备的尺寸很大，导致在大屏上导航栏特别小，尤其返回按钮，点击时很难命中。期间，有尝试使用uniapp提供的自定义导航栏，奈何它在webview页面不会生效。最终，我们选择了custom模式，在H5页面上实现导航栏效果。另外，除了原生导航栏问题，对于客户端APP来说，还有个很重要的体验问题，就是界面顶部的状态栏。如何隐藏系统的状态栏呢？uniapp官方也给出了方案。由于我们是要全局隐藏，所以在App.vue的onLaunch钩子函数中，添加plus.navigator.setFullscreen(true)即可，如下：路由配置完成后，接下来需要进行应用的相关配置manifest.json：应用配置基础配置首先来看基础配置：这里的AppID是在uniapp的开发者中心创建应用时DCloud云端分配的，如果是多人合作的项目，记得进入应用，添加项目成员。App图标配置接下来进入到App图标配置：项目的图标都存放在static目录下，否则会找不到文件。以上，我们的项目改造和配置工作就完成了，接下来开始我们的打包之旅。云打包在HBuilderX编辑器中，点击工具栏-发行-原生App-云打包：弹出如下窗口，选择Android(apk包)，定义自己的Android包名，选择使用公共测试证书，接着选择打正式包，最后点击安心打包即可，如下图：打包之后，会看到控制台的输出如下：如果打包完成，会在本地项目的/unpackage/release/apk/文件夹下，生成本地的安装包。老版的HBuilderX会将安装包放到云上，打包完成后给出下载地址，而且这个下载地址是有下载次数限制的。v3版本更新后，直接打包在本地，免去了下载次数限制的烦恼。这里需要注意下，uniapp的云打包虽然极大方便了我们生成安装包，但是因为是公用资源，每个账号每天的打包次数是有上限的，uniapp官方并不建议频繁打包调试，建议大家在使用时，本地充分测试后，再进行打包。若同一时段内，使用云打包的人较多，控制台会显示队列中，耐心等待即可。原有H5项目改造内嵌在webview中的H5页面，少不了要和首页交互，比如返回首页功能，因此还需要对H5页面进行改造。由于H5页面是多端复用，需要对大屏进行单独处理，所以先要根据userAgent判断终端。uniapp官方是支持自定义userAgent内容并可选择追加模式，不过实践得知，并不生效。配置路径在manifest.json的源码视图中配置。既然不能实现自定义，那就只能获取默认的userAgent来作为判断终端的依据了。好在目前只有这一个APP，倒也可用。判断终端的方法如下：window.navigator.userAgent.indexOf('uni-app Html5Plus') > -1若要与原生页面交互，还需引入uniapp的SDKuni.webview.1.5.2.js：如此，便可调用uniapp的方法了。比如：点击返回首页按钮，回到index海报页，可使用：uni.redirectTo({  url: '/pages/index/index'})如此，项目打造的详细步骤已经全部完成，赶紧找个安卓手机，安装试试吧~遇到的问题整个项目打造的过程中，坑点不多，导航栏、状态栏和userAgent的问题，前面已经介绍过，这里不再赘述。接下来主要说下打包遇到的问题：运行环境版本和编译器版本不一致这个问题是由于uni-app添加了运行环境版本和编译环境版本的校验机制导致的，官方文档：uni-app运行环境版本和编译器版本不一致的问题有很详细的说明，具体请参照文档。若代码中使用了scss/sass语言，而HBuilderX没有安装相应插件，预编译阶段会提示：点击控制台提示链接，跳转到指定页面，按提示安装插件后，再重新编译打包即可。权限拦截打包过程中，如果遇到上述提示，请检查manifest.json中App权限配置中是否勾选了某权限，但是系统又不允许，若是且此权限不是必须，可取消勾选，再重新打包。总结有同学可能会问，本着专业的人做专业的事的原则，原生App的工作不是应该交给客户端同学来做吗？在这里说明下，之所以这个工作前端同学来做，原因有三：当时这个安装包要的很急，门店开业在即，客户端同学资源有限，排期比较靠后我司的客户端同学，属于业务支撑性质的部门，几乎所有的业务线需求都是H5实现的，所以注定了客户端同学不可能持续跟踪迭代版本更新，所以这个安装包如果能由前端同学来负责开发是最好的。有最合适的框架做技术支撑，可能让我们很轻松地完成，理所当然承担起了这个工作。基于以上原因，并不是笔者心血来潮盲目就要做客户端，是做了充分考虑的，希望大家在对待需要开拓的领域或新的框架时，可以保持冷静，仔细端详。最后目前，该APP已经在我司直营门店的大屏上投入使用了将近一年的时间，体验良好，欢迎大家到门店参观体验。截止发稿，北京、青岛、郑州的小伙伴，可以去到当地的商场参考，今年会陆续在多个城市开设门店，期待大家的关注。具体地址可通过百度或者大众点评搜索关键字【转转Up|手机回收】，上面有具体地址。附录效果视频已关注关注重播分享赞关闭观看更多更多大转转FE已关注分享点赞在看已同步到看一看写下你的评论分享视频，时长00:250/000:00/00:25切换到横屏模式继续播放进度条，百分之0播放00:00/00:2500:25倍速播放中0.5倍0.75倍1.0倍1.5倍2.0倍超清流畅您的浏览器不支持video标签继续观看快速打造一个套壳APP观看更多原创,快速打造一个套壳APP大转转FE已关注分享点赞在看已同步到看一看写下你的评论视频感谢你的阅读，有任何问题，欢迎评论区留言讨论，互相学习。