崔红保:HTML5开发中多端发布的最佳实践

7月19日,由HTML5梦工场主办的第四届HTML5峰会暨攻城师嘉年华(iWeb峰会)首站在上海开幕,会上DCloud 前端工程师的崔红保发表了《HTML5开发中多端发布的最佳实践》主题演讲。

随着H5的日益成熟,特别是在使用5+ runtime的强化方案后,H5应用在功能、性能上都不再逊色于原生应用;而H5应用天然的跨平台优势,更是原生应用所不具备的;利用H5开发完一套代码后,可发布成原生的ipa、apk安装包,可生成微信项目,还可以同时在手机原生浏览器下运行,这样的开发/发布方式,才是老板喜欢、工程师轻松的最佳方式。

以下是演讲实录:

HTML5开发中多端发布的最佳实践.001

我今天给大家分享的是多端发布的最佳实践。我先调查一下,我们这里做过H5网站的同学请举一下手,做过微信APP或者微信项目的同学举一下手,不管用什么技术在苹果或Android应用市场上发布过原生应用的举一下手。有没有可能,我们做一套代码,然后同时发布成H5网站、微信App、iOS的ipa包、Android的apk包,这就是多端发布;有些同学可能会认为,你不会是做一个wap站点,然后使用浏览器套壳发布成一个App的吧?不是这样的,WAP网站必然存在切页白屏,既然要发布成原生APP,一定要有原生APP的体验,手机切页专场动画、侧滑菜单、滚动效果也要和原生APP一样。

HTML5开发中多端发布的最佳实践.002

多端发布和响应式布局也是有差别的,我们的多端发布,肯定要兼容不同大小手机屏幕,因此多端发布包含了响应式布局,但又需要兼顾平台特色,他还能调到原生APP、微信APP特有平台能力,我们称作响应式应用。

HTML5开发中多端发布的最佳实践.003

刚才提了这么多,有些人认为我们是在讲概念,有没有做出案例,这个挑食火锅应用是一个前端工程师一个月时间做出来的,这个在ios、安卓、浏览器、微信都有发布,当时这个挑食的老板是原生和H5同时在做,按照我们的方案重新开发H5版本后,他发现和原生差别不大,所以他现在逐步停掉原生。想体验挑食火锅的话,大家可以扫二维码。

HTML5开发中多端发布的最佳实践.004

既然这个路是通的,技术可行性没问题,那我们整理一下需要解决的关键问题,第一个是原生体验,兼容微信APP比较容易,做一下UA判断,这个实现很简单,但是难点在于原生APP的体验。体验分为三个层面:能力、性能、UI;先说原生能力,比如需要调用二维码扫描、语音输入;再说性能,大家使用惯了手机应用,手机应用的切页方式,他切屏方式和浏览器不太一样。再说UI,目前虽然有很多前端开源框架,要么太重,要么就是从PC端转过来的响应式布局的UI,这些UI框架做出来的页面一看还是网站,不像手机APP,手机APP和这些UI并不一样。

HTML5开发中多端发布的最佳实践.005

接着,这是一个人做的,时间很有效,如果你去分平台把所有代码写出来,时间来不及,所以我们需要有一套机制保证我们是高效开发的。

讲完关键问题,接下来具体讲我们是怎么逐个解决这些问题的;第一个是原生能力层面,我们用的是H5+规范,H5+中国产业联盟是W3C指导成立的一个组织,现在大概有十几家会员在里面,包含了外包、培训、工具引擎、传媒、投资等。大家看有加速器、二位码、下载等功能,这些API包含了常见APP所需要的一般功能,剩下没包含的,可使用DCloud独创的native.js技术,解决极少数必须使用原生API才能完成的功能。

HTML5开发中多端发布的最佳实践.006

这里是基于H5+规范做的一些示例,比如说二维码扫描、语音输入、摇一摇、推送、分享等,这些能力都是通过JS代码直接调用的。

接下来可能有些同学会说,你到底有没有实际应用,你不会在忽悠我们当小白鼠吧?放心,现在通过5+ runtime发布的App已经有十几万个。

HTML5开发中多端发布的最佳实践.007

这个是明道OA,他们的OA已经被3000多家企业客户所使用,这个期待乐是大学生购物分期平台;这个是瞭望智库,新华社下属的一家智库机构,也是今年初习大大指示要重点发展的智库机构;这个是游戏咨询的APP,是台湾同胞使用5+ runtime开发的;艺人捧场,通过手机约艺人现场表演,公司年会可以直接找艺人去调节气氛。

HTML5开发中多端发布的最佳实践.008

接下来说性能,性能体验在IOS上面还好,比较明显的是安卓的机器,不一定称他是低端机,很多手机被国内ROM厂商改得乱七八糟,配置挺高,运行起来就是不怎么样。总结这些问题分成几个层面,比如说切页白屏,下一个页面没有加载完的时候去跳转,就会显示一个空白的页面,然后看到空白页面慢慢绘制过程,纯WEB解决方案也有,比如SPA,但是SPA也有一些问题。还有其它的性能问题,比如安卓窗体切换动画卡,安卓区域滚动卡,下拉刷新不流畅。

HTML5开发中多端发布的最佳实践.009

我举两个示例,解释我们是怎么解决这些问题的?我们讲窗体切换,传统web的页面跳转大多在当前页面通过href跳转到目标页面,目标页面渲染之前就直接显示,因此会有白屏现象;我们的方案是,提前创建一个新的webview(预加载),通过该webview加载目标页面,点击跳转时,直接显示之前创建好的webview,显示动画使用原生动画;如果还觉得不够好,甚至可以提前对预加载的webview进行截图(预截图),转场动画直接使用图片显示,毕竟图片移动动画的资源消耗要远低于webview的移动动画资源消耗。

HTML5开发中多端发布的最佳实践.010

下一个演示下拉刷新,下拉刷新之所以卡,是DIV在拖动过程中位置变了,造成不停重绘,从而感觉很卡;我们解决方案是把一个页面拆分成两个webview,拖动的时候只拖动下面的webview,拖动过程中不会出现页面的渲染。拖动及回弹效果均采用原生实现,这就保证了原生的流畅体验。

HTML5开发中多端发布的最佳实践.011

接着讲原生ui,我想问一下,咱们这里边用过mui的同学吗?还是有一些的,那我就简单讲一讲。mui是前端框架,大概去年iWeb峰会发布的。他的特点一个是小巧,他就是纯粹的手机UI框架,他没有进行过多的DOM选择器封装及事件绑定管理,他的核心JS只有几十K。第二个,他的mui完全是原生的mui,比如说列表、开关这些组件。第三个,他封装了webview的常用操作,从而解决页面切换卡顿的问题,这个是他的三个特点。 。

HTML5开发中多端发布的最佳实践.012

在mui基础上我们封装了一些UI扩展模版,如下是一些示例:任何一个APP发布的时候都有首次启动欢迎页面,这个东西通过mui做的话可能几行代码就出来了。然后一个聊天模板,聊天模板并不是简单提供一个UI模板,它解决了一系列键盘弹出关闭的问题,这个是手机通讯录模板,常用于是通讯录、城市选择等场景。还有设置模版,比如说应用评分,问题反馈,头像设置,头像预览,常用APP设置项他都包含了。这个是登录模板,比如说微博、微信、QQ等社交账号登陆,还有一些问题是首次登录以后下次就不要登录,记住账号密码自动登录。最后一个很明白,手势密码,很多地方也会碰到。

HTML5开发中多端发布的最佳实践.013

我们同时提供了一些业务扩展插件,最常用的是支付、分享、登录,我们以支付为例,不管是支付宝支付还是微信支付,他的流程大体都相同。第一步就是获取一个支付通道,然后需要服务器配合生成一个支付订单,然后手机端APP发起支付操作,这么一个流程如果说通过原生SDK开发的话,那个代码太多了,5+ 规范封装了这些代码。这个是不包含业务的纯流程的代码,大概需要几十行。然后再做微信支付,也有不少代码量,现在我们mui把这些东西做了一些封装,你只有调一个简单的函数就可以了,这里type参数表示的是微信支付还是支付宝支付。

HBuilder的特点是可以提高很多mui开发效率,HBuilder内置了很多mui代码块,比如通过mTab就可以生成一个选项卡的HTML代码,类似的还有列表、9宫格、图片轮播等。。

HTML5开发中多端发布的最佳实践.014

我们刚才提到分平台发布,首先是框架层面上,我们封装的业务插件代码是基于JS继承来实现的,比如说支付这块,支付我们有分平台实现:APP子类和微信子类,我们通过前端构建工具(如:Gulp、Grunt等),比如我要发布一个微信版本,我只需要通过配置,将微信平台相关的JS文件拷贝过去、合并、压缩即可。

HTML5开发中多端发布的最佳实践.015

分平台自动构建,保证每个平台包体积最小,但是大家在开发过程中有业务代码,业务代码怎么最小?以挑食首页,用过我们mui的同事知道,这里有下拉刷新需求,在H5版本和微信版本中只有一个页面,但App版本是双webview实现的(index.html+list.html),这个代码怎么写才能分平台发布?我们的方案是,拆分业务逻辑,首页分成3个js文件,分别是:index.js:处理通用业务逻辑;index.5+.js:处理App特殊逻辑,比如创建子webview;supplier.js:处理获取餐厅列表逻辑;分平台构建后的结果是这样的:H5平台发布后,仅包含index.html,其中引用的js文件包括:index.js+supplier.js;而App平台构建发布后,则同时包含index.html和list.html,其中index.html引用的js文件为:index.js+index.5+.js,list.html引用的js文件为:supplier.js,这样也实现了业务的分平台发布。

HTML5开发中多端发布的最佳实践.016

最后我总结一下,我们开头提到多端发布的关键问题:原生能力,我们通过5+runtime来完成,原生性能用多webview+预加载+预截图等,原生UI通过MUI开源框架解决,高效开发通过MUI模版+业务插件+HBuider代码块解决,分平台发布通过前端构建实现,到此,所有关键问题全部解决。

HTML5开发中多端发布的最佳实践.017

HTML5开发中多端发布的最佳实践.018

我的分享到此结束,大家可以关注我们的二维码。