使用Webpack + Gulp便捷开发运行于Dcloud平台HTML5 Plus Runtime引擎的HybridAPP项目的一些经验分享

什么是5+Runtime?
首先简单介绍一下5+Runtime:

HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与之配套的IDE时Hbuilder,使用Dcloud提供的这一套方案可以方便快捷的开发和打包出具有原生能力的混合APP(Hybrid APP).

什么是HTML5 Plus?
HTML5+ 是由"中国HTML5产业联盟(Dcloud公司,中国信通院等是成员)"提出的一套HTML5的增强版规范,此规范让HTML5使用js即可具备原生调用能力,包括但不限于摄像头调用,第三方支付,第三方分享,窗口管理(多Webview管理),原生组件等.

5+Runtime与HTML5 Plus的关系:
5+Runtime引擎是对HTML5 Plus规范的一种实现.

HTML5 Plus规范与MUI的关系:
MUI是一套UI框架,是对HTML5 Plus规范中的js的再一次封装.

HTML5 Plus & HBuilder & MUI:
HBuilder具备APP打包能力,其打包出的APP的浏览器引擎为5+Runtime,能运行HTML5 Plus规范语法,简言之其可以打包出具有原生能力的混合APP. 您可直接编写HTML5 Plus的js语法实现原生扩展能力的使用,或者使用MUI更加便捷的使用其封装好的方法.

HTML5 Plus规范的其他实现与例子:
具我所知的不确定消息,360应用市场轻应用应该是使用了5+Runtime引擎实现了对HTML5+规范的支持,HBuilder也推出了"流应用"市场.

与以上一套"使用HTML5"开发APP的解决方案相似的其他方案:
APICloud , 就是前段时间因为抄袭Dcloud,被Dcloud告并且官司失败那个.

其他相似技术的一些简单说明:
Native APP. 使用前端技术开发原生APP(Native APP)的方案:React Native 和 Weex.这种方案可以开发出原生APP,APP运行时最终渲染的UI为原生组件,APP运行性能比Hybrid APP高.但是开发成本相对来说较低,学习难度也较大.

Hybrid APP. 使用前端技术开发混合APP(Hybrid APP)的方案:Dcloud(上文所述), APICloud 以及其他. 使用这种方案开发出的APP,实质上是一个或多个Webview窗口,此类方案具备一些原生调用能力,以及一些简单的原生组件的创建.开发效率较低,运行效率中等,优化好的话可以开发出用户体验好的产品.

Web APP 使用前端技术开发的H5APP,只是为其加了一层外壳,打包成了一个APP.其始终运行在一个Webview中.这种APP如果业务逻辑复杂,则运行效率低,用户体验差.开发效率较Hybrid APP快.

好了,以上简单介绍了Dcloud方案的一套东西和原生app,混合app,Web APP之间的关系和差别.

那么,本文要讨论什么问题?
本文要讨论 : 如何使用Webpack + Gulp便捷开发运行于Dcloud平台HTML5 Plus Runtime引擎的HybridAPP项目.

传统HBuilder项目开发模式痛点:
很难使用ES6语法以及新特性,包特性,Promise,对象,数组新特性等.
繁琐的重复任务,开发进度无法加快,几乎没有自动化.
无类似于Vue和React的路由概念,传统路由跳转繁琐
为什么不使用Vue和React开发运行于5+Runtime的单页应用?
因为之前有过实践,这种架构做出来就和Web APP差不多,几乎很难使用到多窗口(Webview)调用能力,整个项目运行于一个Webview中,开发效率提升了但是其运行效率低和用户体验却低. 这种架构基于Vue-cli,可以使用到前端新特性,但是综合考虑还是很难做出运行效率告,用户体验好的产品.

为什么不直接使用Weex或RN开发原生应用?
这种技术坑多,开发难度大,开发效率慢,虽然能使用到新特性开发出原生应用,但是这种方案对于一些中小公司,是无法承受和负担的.

所以我们到底要做什么?
方便快捷愉快的编码,最终开发出一个多页Hybrid APP.

0.使用Node.js和npm/yarn
本项目基于Node.js和npm/yarn , 请确保您的主机安装了这个环境.

1.使用Webpack进行项目架构
项目使用Webpack,配置sass对css的扩展,配置bable实现es6=>es5的编译.还可配置一些图片处理.
使用Webpack的多页配置,每要新写一个页面,就得增加一条配置.同时一般需要手动新建3个文件 html & js & scss.
2.Webpack的入口数组
Webpack的入口数组配置抽离到了./src/js/config/config.js
每次新增一个js应该在此文件中添加路径.
3.使用Gulp实现上条所述的新建页面的自动化任务
编写了Gulp自动化任务,简单的实现了通过命令行新增和移除页面.

创建页面 : gulp newPage --name testName

删除页面 : gulp delPage --name testName

执行上两条命令,会自动创建和移除html & js & scss文件.以及自动往webpack.config.js配置文件添加配置信息.同时还会自动往上一条所述的配置文件添加配置信息.

执行新增命令时,会自动拷贝test.html/scss/js模板,所以你可以手动更改该模板.

需要注意的是,每次执行完移除命令,需要手动删除webpack.config.js中的配置信息.因为展示没有实现自动删除.

4.自动化任务编写了git自动提交
每次执行新增和删除命令后,会自动提交git变更前的版本和变更后的版本.通过一个仅能运行于Windows的包实现命令行执行.如果不需要git提交,可在gulpfile.js中注释相关代码.

5.公共JS方法类
公共JS方法类在./src/js/class/Tools.js , Webpack配置中已经配置好每个页面公共加载该文件.里面有简单的公共方法.后期会新增窗口创建/显示/隐藏/关闭等方法,以及实现HTML5和5+Runtime不同端的不同操作.

6.Jquery的引用
因为在Webpack中导入全局Jquery太麻烦,项目又赶进度,暂时使用的cdn引入Jquery.
后期会实现导入本地Jquery.
7.关于SASS
*后期会使用less,因为在Windows下装node-sass包太难了.

8.路由跳转
不使用a标签跳转,而是在每个需要跳转事件的节点上 加入css类"Jump" 和data-uri参数,Tool方法初始化后会自动绑定跳转事件.具体可查阅代码.

9.分享出这简单的建构配置的开源地址
这套方案是我对我之前一个方案的升级版,还不完整与严谨,在此简单分享出我的想法,有兴趣的朋友可以与我一起探讨.之前那个版本的架构方案我在本文就不介绍了.写出本文是因为之前零零散散的有在一些群里和大家讨论过Dcloud下的开发分享,现在抽空简单叙述一下.

码云地址:https://gitee.com/izcy/WebpackGulpForHTML5PlusRuntimeDemo

9.后记
因为使用此方案的项目前期刚做完静态页面就中途暂停了,所以很多方法还没写(像窗口管理和跳转也不完善),整套方案不完整,我将持续的更新本文,以分享更多东西.也欢迎广大Dcloud开发者参与进来.

10.联系我
http://www.zhangchaoyue.com

Zcy 于 2018年2月2日 11:51:51