使用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.联系我
Zcy 于 2018年2月2日 11:51:51
本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=h1abcbhk1cb
使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享的更多相关文章
- react-router+webpack+gulp路由实例
背景:新项目要开始了,有一种想要在新项目中使用react的冲动,应该也是一个单页面的应用,单页应用就涉及到一个路由的问题.于是最近在网上找了蛮多关于react-router的文章,也遇到了许多的坑,经 ...
- 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
如何优雅的使用vue+Dcloud(Hbuild)开发混合app 最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的 ...
- 2.4 webpack + gulp 构建完整前端工作流
在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容,本小节中将会结合二者构建一个完整的前端工作流,内容目录为: 前端工程结构和目标 前端工程目录结构 gulp clean gu ...
- Vue ES6 Jade Scss Webpack Gulp
一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...
- 【Hybrid App】Hybrid App开发 四大主流移平台分析
转自http://dev.yesky.com/238/34657738.shtml Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之 ...
- [转发]Gulp开发教程(翻译)
Building With Gulp =================== 转载出处 原文地址 翻译出处 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的 ...
- Gulp开发教程(翻译)
Building With Gulp =================== 原文地址 翻译出处 原创翻译,有不当的地方欢迎指出.转载请指明出处.谢谢! 对网站资源进行优化,并使用不同浏览器测试并不是 ...
- 用vs2013+velt-0.1.4进行嵌入式开发 进行海思平台 UBOOT 开发
1.1 什么是VELT VELT的全称是Visual EmbedLinuxTools,它是一个与visual gdb类似的visual studio插件,用以辅助完成Linux开发.利用这个插件 ...
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...
随机推荐
- 文件上传漏洞靶机upload-labs(1到10)
前言 项目地址:https://github.com/c0ny1/upload-labs pass-01(前端验证) 绕过方法:https://www.cnblogs.com/bk76120/p/12 ...
- DateTime TryParse方法,介绍
1.与Date.Parse()方法的区别:Date.Parse(object o)方法接受一个object类型的参数,当参数为空或转换失败时会抛出异常DateTime.TryParse方法不会抛出异常 ...
- 一、MarkDown学习笔记
MakrDown学习 MarkDown是什么? 是一种纯文件格式的标记语言,跟我们写txt和word是一样的,不过它有一些简单的标记,可以使普通文本具有一定的格式. MarkDown有什么样式? 样式 ...
- go泛型教程
泛型 原文 在线阅读 导读: 约束 使用方法 实现原理 跟其它语言的泛型进行对比 用例子学泛型 issues 泛型需满足 go1.18+ 约束 go使用interface作为约束,约束的意思是约束了这 ...
- VS Code调试C代码
1.前言 首先说明的是vscode是代码编辑器,并不是编译器,它本身并不能编译C语言. 在这里我们使用的是MinGW-w64作为C语言的编译器.MinGW-w64的前身是MinGW的全称是:Minim ...
- 安全学习笔记-web安全之XSS攻击
web安全之XSS攻击 XSS 即跨站脚本攻击,是 OWASP TOP10 之一.它的全称为 Cross-site scripting,因为 CSS 这个简称已经被占用表示为前端三剑客之一的CSS,所 ...
- 2022年官网下安装DBever最全版与官网查阅方法
目录 安装部署DBeaver 一.官网下载安装 1.百度搜索DBeaver. 2.进入主页,点击DownLoad下载. 3.查看列表,选择windows的exe版本下载. 4.找到位置,双击打开,弹出 ...
- Java &、&&、|、||、^、<<、>>、~、>>>等运算符
&(按位与) 运算规则:两个为真才为真 (1&1=1 , 1&0=0 , 0&1=0 , 0&0=0) 例:3&5=1 3的二进制位是0000 0011 ...
- Redis(一):基本数据类型与底层存储结构
最近在整理有关redis的相关知识,对于redis的基本数据类型以及其底层的存储结构简要的进行汇总和备注(主要为面试用) Redis对外提供的基本数据类型主要为五类,分别是 STRING:可以存储字符 ...
- 如何使用Google Analytics Universal Analytics增强型电子商务
Google Analytics: Universal Analytics增强型电子商务,可以让运营人员轻松地跟踪用户在其购物历程中与产品的互动,包括产品展示.产品点击.查看产品详情.将产品添加到购物 ...