hybrid混合编译开发 更新

作者: 蔡振辉 | 来源:发表于2019-01-07 16:08 被阅读11次

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

    • Hybrid App 代表:Cordova 通过Webview加载Web页面,在NativeWeb页面之间建立双向通信
    • 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层做比较合适,下面简单讲解下应用中的两种更新方式:

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

    资源文件更新

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

    相关文章

      网友评论

        本文标题:hybrid混合编译开发 更新

        本文链接:https://www.haomeiwen.com/subject/udwurqtx.html