使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享

什么是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/Webpac...

9.后记

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

10.联系我

http://www.zhangchaoyue.com

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