HTML5技术

浅谈Hybrid技术的设计与实现第三弹——落地篇 - 叶小钗(3)

字号+ 作者:H5之家 来源:H5之家 2016-10-27 10:00 我要评论( )

而APP的话,会存在最新发布的APP希望读到离线包,而老APP不希望读到增量包的情况(老的APP下载下来增量包压根不支持),更加复杂的情况是想对某个版本做定向修复,那么就需要定向发增量包了,这让情况变得复杂,而

而APP的话,会存在最新发布的APP希望读到离线包,而老APP不希望读到增量包的情况(老的APP下载下来增量包压根不支持),更加复杂的情况是想对某个版本做定向修复,那么就需要定向发增量包了,这让情况变得复杂,而复杂即错误,我们往往可以以简单的约定,解决复杂的场景。

思考以下场景:

我们的APP要发一个新的版本了,我们把最初一版的静态资源给打了进去,完了审核中的时候,我们老版本APP突然有一个临时需求要上线,我知道这听起来很有一些扯淡,但这种扯淡的事情却真实的发生了,这个时候我们如果打了增量包的话,那么最新的APP在审核期间也会拉到这次代码,但也许这不是我们所期望的,于是有了以下与native的约定:

Native请求增量更新的时候带上版本号,并且强迫约定iOS与Android的大版本号一致,比如iOS为2.1.0Android这个版本修复BUG可以是2.1.1但不能是2.2.0

然后在服务器端配置一个较为复杂的版本映射表:

## 附录一 // 每个app所需的项目配置 const APP_CONFIG = [ 'surgery' => [ // 包名 'channel' => 'd2d', // 主项目频道名 'dependencies' => ['blade', 'static', 'user'], // 依赖的频道 'version' => [ // 各个版本对应的增量包范围,取范围内版本号最大的增量包 '2.0.x' => ['gte' => '1.0.0', 'lt' => '1.1.0'], '2.2.x' => ['gte' => '1.1.0', 'lt' => '1.2.0'] ], 'version_i' => [ // ios需特殊配置的某版本 ], 'version_a' => [ // Android需特殊配置的某版本 ] ] ];

这里解决了APP版本的读取限制,完了我们便需要关心增量的到达率与更新率,我们也会担心我们的APP读到错误的文件。

更新率

我们有时候想要的是一旦增量包发布,用户拿着手机就马上能看到最新的内容了,而这样需要app调用增量包的频率增高,所以我们是设置每30分钟检查一次更新。

正确读取

这里可能有点杞人忧天,因为Native程序不是自己手把手开发的,总是担心APP在正在拉取增量包时,或者正在解压时,读取了静态文件,这样会不会读取错误呢,后面想了想,便继续采用了之前的md5打包的方式,将落地的html中需要的文件打包为md5引用,如果落地页下载下来后,读不到本地文件就自己会去拉取线上资源咯。 

调试

一个Hybrid项目,要最大限度的符合前端的开发习惯,并且要提供可调试方案

我们之前说过直接将所有请求用native发出有一个最大的问题就是调试不方便,而正确的hybrid的开发应该是有70%以上的时间,纯业务开发者不需要关心native联调,当所有业务开发结束后再内嵌简单调一下即可。

因为调试时候需要读取测试环境资源,需要server端qa接口有个全局开关,关闭所有的增量读取

关于代理调试的方法已经很多人介绍过了,我这里不再多说,说一些native中的调试方案吧,其实很多人都知道。

iOS

首先,你需要拥有一台Mac机,然后打开safari;在偏好设置中将开发模式打开:

然后打开模拟器,即可开始调试咯:

Android

Android需要能FQ的chrome,然后输入chrome://inspect/#devices即可,前提是native同事为你打开调试模式,当然Android也可以使用模拟器啦,但是Android的真机表现过于不一样,还是建议使用真机测试。

一些坑点 不要命就用swift

苹果官方出了swift,于是我们iOS团队好事者尝试了感觉不错,便迅速在团队内部推广了起来,而我们OC本身的体量本来就有10多万行代码量,我们都知道一个道理:

重构一时爽,项目火葬场

而重构过程中肯定又会遇到一些历史问题,或者一些第三方库,代码总会有一点尿不尽一点冗余,而不知道swift是官方有问题还是怎么回事,每次稍微多一些改动就需要编译一个多小时!!!!你没看错,是要编译一个多小时。

一次,我的小伙伴在打游戏,被我揪着说了两句,他说他在编译,我尼玛很不屑的骂了他,后面开始调iOS时,编译了2小时!!!从那以后看见他打游戏我一点脾气都没有了!!!

这种编译的感觉,就像吃坏了肚子,在厕所蹲了半天却什么也没拉出来一样!!!所以,不要命就全部换成swift吧。

如果有一定历史包袱的业务,或者新业务,最好不要全面使用新技术,不成熟的技术,如果有什么不可逆的坑,那么会连一点退路都没有了。

iOS静态资源缓存

Android有一个全局开关,控制静态资源部读取缓存,但是iOS中研究了好久,都没有找到这个开关,而他读取缓存又特别厉害,所以所有的请求资源在有增量包的情况下,最好加上时间戳或者md5

Android webview兼容

Android webview的表现不佳,闪屏等问题比较多,遇到的几个问题有:

① 使用hybrid命令(比如跳转),如果点击快了的话,Android因为响应慢要开两个新页面,需要对连续点击做冻结

② 4.4以下低版本不能捕获js回调,意思是Android拿不到js的返回值,一些特殊的功能就做不了,比如back容错

③ ......

一些小特性

为了让H5的表现更加像native我们会约定一些小的特性,这种特性不适合通用架构,但是有了会更有亮点。

回退更新

我们在hybrid中的跳转,事实上每次都是新开一个webview,当A->B的时候,事实上A只是被隐藏了,当B点击返回的时候,便直接将A展示了出来,而A不会做任何更新,对前端来说是无感知的。

事实上,这个是一种优化,为了解决这种问题我们做了一个下拉刷新的特性:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Atitit WebDriver技术规范原理与概念 - attilaxAti

    Atitit WebDriver技术规范原理与概念 - attilaxAti

    2016-10-03 13:00

  • 程序员、技术主管和架构师 - mindwind

    程序员、技术主管和架构师 - mindwind

    2016-09-28 13:00

  • 总结一下公司项目使用各种较新的前端技术和 Api 的一些经验。 - B1ncer

    总结一下公司项目使用各种较新的前端技术和 Api 的一些经验。 - B1nc

    2016-09-02 17:00

  • webkit webApp 开发技术要点总结 - -小克

    webkit webApp 开发技术要点总结 - -小克

    2016-07-29 17:00

网友点评
d