hybrid混合编译开发 升级

移动开发的跨平台与快速发布一直是开发者的追求，也是技术的一个发展趋势，现在各大厂开始有了自己的大前台团队，所以我们也开始了自己的探究，目前来说主要有两种思路：

• Hybrid App 代表:Cordova 通过Webview加载Web页面，在Native和Web页面之间建立双向通信
• H5代码Native化 代表:ReactNative,Weex等 使用各平台Api，把H5代码编译成二进制代码直接运行

其实关于这两种思路比照，网上有很多大牛分析的很全面了，总结来说各有利弊很难完美，本篇文章我们主要讲一下Hybrid App实践，采用前后台分离以及单页应用技术开发Web页面，使用WebView加载Web页面，并通过JS通信提供少量Native层的支持，通过接口获取升级后的差异化页面资源文件，在本地覆盖，即可以达到热升级的需求。在我看来此方案更适用于需要快速发布、多端兼容、对性能要求稍低的业务，正好符合我们的需求。

方案详解

既然确定了方向，那么就应该确定具体的方案了，通过自己的经验和网上资料整理，画了时序图： [图片上传失败…(image-1a9bc6-1546848457294)]

按照图上的时序，接下来说一下每一步中的实践，以及碰到的坑。下面讲解

首次安装

• 打包 在打包程序时这一步主要是把Html相关资源文件压缩后放在assets文件夹下就可
• 安装 客户安装完应用程序打开后，检测能否为首次使用，假如是则通过程序直接解压包内资源到手机存储上就可，不局限于SD卡。

展现页面

• 闪屏页展现 因为上面的解压资源，还有Webview初始化、JS的加载执行、html的渲染都是耗时操作，并且都是发生在Html展现之前，所以我们选择把闪屏页用Android原生代码来编写，采用覆盖WebView所在Activity的方案，这样在闪屏页隐藏的时候，客户即可以看到业务界面，可以提升客户体验。 注：另外提供两种闪屏优化的小技巧，使用透明主题或者者设置主题背景图片

• 加载本地Html页面 直接使用WebView#loadUrl()加载本地资源文件就可。因为WebView加载不同页面会出现闪屏的问题，所以我们采用Vue + Vue Router构建单页应用就可。 这里Vue Router会有一个小坑，提示大家注意一下：Vue Router默认采用hash模式，会有一个丑陋的#符号，作为一个有追求的程序员怎样能允许这种很丑的hash，一种更优雅的方式使用HTML5 History模式，但是不幸的是，加载本地资源文件的方式并不能正常解析HTML5 History模式的url，所以只能采用hash模式。

• 数据请求 为了节省客户的流量和时间，需要把Html资源文件存储在本地，这样数据的请求必需在用户端完成。有两种方案供选择： 一是Native层阻拦并请求数据再返回给Html层去展现，有我们采用前后台分离直接通过JS请求接口获取数据就可，这样会添加工作量，也不利于职责的分离，所以放弃。 二是直接使用JS请求数据，这样会出现跨域访问的问题，相比较来说还是这个比较容易处理的，采用CORS就可

• Native调用JS Native层调用JS比较简单，执行一段JS代码就可，如：javascript:callJS()

• JS调用Native JS层调用Native主要分为三种： 一：通过WebView#addJavascriptInterface()进行映射，使用起来简单，但是有安全风险，弃用 二：自己设置协议而后由Native层阻拦并解析请求，使用起来复杂，容易和业务耦合，也不是最优选，弃用 三：阻拦JS#prompt()方法并解析，使用起来复杂，但是比第一种更安全，比第二种灵活少量，所以使用此方案

资源文件获取

资源文件采取差异化升级方案，本地存储一个标识，可以为版本号或者者升级时间，这个可以和后台同学一起商量确定，资源文件下载还有推送之类的因为Html的局限性，所以还是直接由Native层做比较合适，下面简单讲解下应用中的两种升级方式：

• 服务端推送下发 可以通过集成第三方的推送服务，在用户端收到升级推送后主动去请求下载差异化文件
• 主动请求 可以在选择合适的时机，如在应用启动时去请求差异化文件

资源文件升级

根据差异化清单对资源文件进行整合，存放在临时目录中，而后在第二次打开应用时更换，并展现升级后的界面，达到热升级的效果。