首先简单介绍一下5+Runtime:
HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与之配套的IDE时Hbuilder,使用Dcloud提供的这一套方案可以方便快捷的开发和打包出具有原生能力的混合APP(Hybrid APP).
HTML5+ 是由"中国HTML5产业联盟(Dcloud公司,中国信通院等是成员)"提出的一套HTML5的增强版规范,此规范让HTML5使用js即可具备原生调用能力,包括但不限于摄像头调用,第三方支付,第三方分享,窗口管理(多Webview管理),原生组件等.
5+Runtime引擎是对HTML5 Plus规范的一种实现.
MUI是一套UI框架,是对HTML5 Plus规范中的js的再一次封装.
HBuilder具备APP打包能力,其打包出的APP的浏览器引擎为5+Runtime,能运行HTML5 Plus规范语法,简言之其可以打包出具有原生能力的混合APP.
您可直接编写HTML5 Plus的js语法实现原生扩展能力的使用,或者使用MUI更加便捷的使用其封装好的方法.
具我所知的不确定消息,360应用市场轻应用应该是使用了5+Runtime引擎实现了对HTML5+规范的支持,HBuilder也推出了"流应用"市场.
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项目.
因为之前有过实践,这种架构做出来就和Web APP差不多,几乎很难使用到多窗口(Webview)调用能力,整个项目运行于一个Webview中,开发效率提升了但是其运行效率低和用户体验却低.
这种架构基于Vue-cli,可以使用到前端新特性,但是综合考虑还是很难做出运行效率告,用户体验好的产品.
这种技术坑多,开发难度大,开发效率慢,虽然能使用到新特性开发出原生应用,但是这种方案对于一些中小公司,是无法承受和负担的.
方便快捷愉快的编码,最终开发出一个多页Hybrid APP.
本项目基于Node.js和npm/yarn , 请确保您的主机安装了这个环境.
每次执行新增和删除命令后,会自动提交git变更前的版本和变更后的版本.通过一个仅能运行于Windows的包实现命令行执行.如果不需要git提交,可在gulpfile.js中注释相关代码.
公共JS方法类在./src/js/class/Tools.js , Webpack配置中已经配置好每个页面公共加载该文件.里面有简单的公共方法.后期会新增窗口创建/显示/隐藏/关闭等方法,以及实现HTML5和5+Runtime不同端的不同操作.
*后期会使用less,因为在Windows下装node-sass包太难了.
不使用a标签跳转,而是在每个需要跳转事件的节点上 加入css类"Jump" 和data-uri参数,Tool方法初始化后会自动绑定跳转事件.具体可查阅代码.
这套方案是我对我之前一个方案的升级版,还不完整与严谨,在此简单分享出我的想法,有兴趣的朋友可以与我一起探讨.之前那个版本的架构方案我在本文就不介绍了.写出本文是因为之前零零散散的有在一些群里和大家讨论过Dcloud下的开发分享,现在抽空简单叙述一下.
码云地址:https://gitee.com/izcy/Webpac…
因为使用此方案的项目前期刚做完静态页面就中途暂停了,所以很多方法还没写(像窗口管理和跳转也不完善),整套方案不完整,我将持续的更新本文,以分享更多东西.也欢迎广大Dcloud开发者参与进来.
Zcy 于 2018年2月2日 11:51:51
本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=h1abcbhk1cb
手机扫一扫
移动阅读更方便
你可能感兴趣的文章