快速打造一个套壳APP

大前端 @ 转转

作为一个前端coder,很少会涉及到需要自己动手打包一个APP的情况,更多的时候,我们都是在现有APP的基础上,以混合开发的模式,将H5页面内嵌到原生APP的webview中。不过,笔者所在的业务线,恰恰接到了一个需要打包一个套壳APP的需求。

需求背景

我司门店的大屏内置Android系统,希望在大屏上可以安装一个应用程序,将已有的业务功能页面内嵌进去。

技术选型

基于以上需求,技术方案选择采用 APP套壳+内嵌H5页面 的模式,这样,只需要开发个适用于大屏的APP安装包即可。方案确定以后,接下来要做的就是寻找适合的框架来开发App安装包了。

在对比了业界主流的跨端框架后,对其特点和差异性,简单做了对比和分析:

框架Android客户端打包方式系统级API
Electron不支持本地具备
Cordova支持本地打包具备
Ionic支持本地打包具备
Weex支持本地打包具备
Hippy支持本地打包具备
Flutter支持本地打包具备
RN支持本地打包具备
uniapp支持本地打包、云打包具备
PWA类原生不需要打包不具备

从上述调研可以看出,大多数的跨端框架都只支持本地打包。本地打包有以下几个弊端:

  • 本地环境搭建麻烦,一般步骤如下:

    • 安装Android Studio
    • 安装Android SDK并配置环境变量
    • 设置Android模拟器
    • 调试Android设备
  • 多人维护时,每人都需要搭建本地环境,成本较高

在尝试搭建本地环境时,耗时一天,期间遇到了各种各样的环境问题,苦不堪言,最终只得放弃。而云打包就省去了本地打包的诸多麻烦,简单来说,云打包就是开发者不需要在本地搭建环境,通过共用云端搭建的环境来打包构建安装包。如此一来,开发者只负责写好代码即可,打包的事交给云服务,岂不完美?

综上,框架自然选择了拥有云打包能力的 uniapp。它可以让我们以很小的代价完成App打包的工作,达到快速开发的目的。至于 PWA ,由于它缺少系统级API能力,也自然不能入选了。

项目实践

安装HBuilderX编辑器

uniapp 的云打包功能,是集成在HBuilderX编辑器中的,因此我们需要先安装HBuilderX编辑器。

App项目搭建

新建APP项目

首先,我们先通过HBuilderX新建个项目。由于我们只需要一个APP的壳,所以选择默认模板即可。

使用Vue脚手架创建的项目也可以,但是需要手动创建 manifest.jsonpages.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.vueonLaunch 钩子函数中,添加 plus.navigator.setFullscreen(true) 即可,如下:

<script>
	export default {
		onLaunch: function() {
			plus.navigator.setFullscreen(true)
		}
	}
</script>
复制代码

路由配置完成后,接下来需要进行应用的相关配置 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 的SDK uni.webview.1.5.2.js

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
复制代码

如此,便可调用 uniapp 的方法了。比如:点击返回首页按钮,回到 index 海报页,可使用:

uni.redirectTo({
  url: '/pages/index/index'
})
复制代码

如此,项目打造的详细步骤已经全部完成,赶紧找个安卓手机,安装试试吧~

遇到的问题

整个项目打造的过程中,坑点不多,导航栏状态栏userAgent 的问题,前面已经介绍过,这里不再赘述。接下来主要说下打包遇到的问题:

  1. 运行环境版本和编译器版本不一致

这个问题是由于uni-app添加了运行环境版本和编译环境版本的校验机制导致的,官方文档:uni-app运行环境版本和编译器版本不一致的问题有很详细的说明,具体请参照文档。

  1. 若代码中使用了scss/sass语言,而HBuilderX没有安装相应插件,预编译阶段会提示:

点击控制台提示链接,跳转到指定页面,按提示安装插件后,再重新编译打包即可。

  1. 权限拦截

打包过程中,如果遇到上述提示,请检查 manifest.jsonApp权限配置 中是否勾选了某权限,但是系统又不允许,若是且此权限不是必须,可取消勾选,再重新打包。

总结

有同学可能会问,本着专业的人做专业的事的原则,原生App的工作不是应该交给客户端同学来做吗?在这里说明下,之所以这个工作前端同学来做,原因有三:

  1. 当时这个安装包要的很急,门店开业在即,客户端同学资源有限,排期比较靠后
  2. 我司的客户端同学,属于业务支撑性质的部门,几乎所有的业务线需求都是H5实现的,所以注定了客户端同学不可能持续跟踪迭代版本更新,所以这个安装包如果能由前端同学来负责开发是最好的。
  3. 有最合适的框架做技术支撑,可能让我们很轻松地完成,理所当然承担起了这个工作。

基于以上原因,并不是笔者心血来潮盲目就要做客户端,是做了充分考虑的,希望大家在对待需要开拓的领域或新的框架时,可以保持冷静,仔细端详。

最后

目前,该APP已经在我司直营门店的大屏上投入使用了将近一年的时间,体验良好,欢迎大家到门店参观体验。截止发稿,北京、青岛、郑州的小伙伴,可以去到当地的商场参考,今年会陆续在多个城市开设门店,期待大家的关注。具体地址可通过百度或者大众点评搜索关键字【转转Up | 手机回收】,上面有具体地址。

感谢你的阅读,有任何问题,欢迎评论区留言讨论,互相学习。

文章分类
前端
文章标签