什么是5+Runtime？首先简单介绍一下5+Runtime：HTML5PlusRuntime（5+Rumtime）是Dcloud开发的一套“增强型手机浏览器引擎”。配套的IDE是Hbuilder，由Dcloud提供的这套方案可以方便快捷的开发和封装一个具有原生能力的混合APP（HybridAPP）。什么是HTML5Plus？HTML5+是由“中国HTML5产业联盟（Dcloud、中国信息通信研究院等为成员）”提出的一套增强型HTML5规范，该规范允许HTML5使用js具备原生调用能力，包括但不包括限于摄像头调用、第三方支付、第三方分享、窗口管理（多Webview管理）、原生组件等。5+Runtime与HTML5Plus的关系：5+Runtime引擎是HTML5Plus规范的一个实现.HTML5Plus规范与MUI的关系：MUI是一套UI框架，是HTML5Plus规范中对js的另一种封装。HTML5Plus&HBuilder&MUI：HBuilder具有APP打包能力。其封装的APP浏览器引擎为5+Runtime，可运行HTML5Plus规范语法。简而言之，它可以封装一个具有原生能力的混合APP。你可以直接写HTML5Plus的js语法来实现原生扩展能力的使用，也可以使用MUI更方便的使用其封装的方法。HTML5Plus规范的其他实现和例子：我知道的不确定消息，360应用市场轻应用应该使用5+Runtime引擎来支持HTML5+规范，HBuilder也推出了“流式应用”市场。其他类似上述一套“使用HTML5”开发APP方案的解决方案：APICloud，也就是上段时间因为抄袭Dcloud，被Dcloud告上法庭，官司败诉。其他同类技术的一些简单描述：NativeAPP。使用前端技术开发原生APP（NativeAPP）的解决方案：ReactNative和Weex。该方案可以开发原生APP，APP运行时最终呈现的UI为原生组件，APP运行性能高于HybridAPP。但是开发成本比较低，学习难度比较高。混合应用程序。使用前端技术开发混合APP（HybridAPP）解决方案：Dcloud（上文提到）、APICloud等。使用该方案开发的APP，本质上就是一个或多个Webview窗口。这种方案具有一定的原生调用能力和一些简单的原生组件的创建。开发效率低，运行效率中等。如果优化得好，可以开发出用户体验好的产品。WebAPP使用前端技术开发H5APP，只是在上面加了一层壳，封装成一个APP。它始终在WebviewMedium中运行。这类APP如果业务逻辑复杂，运行效率低，用户体验差。开发效率比HybridAPP更快。好了，以上简单介绍了Dcloud解决方案和nativeapp、hybridapp、WebAPP的一套东西。那么，这篇文章要讨论什么呢？本文将讨论：如何使用Webpack+Gulp方便的开发一个运行在Dcloud平台的HTML5PlusRuntime引擎上的HybridAPP项目。传统HBuilder项目开发模式痛点：难以使用ES6语法和新特性、封装特性、Promise、对象、数组新特性等繁琐的重复性工作，开发进度无法加快，几乎没有自动化。没有类似于Vue和React的路由概念，传统的路由跳转比较麻烦。为什么不使用Vue和React开发运行在5+Runtime上的单页应用？由于之前的实践，这种架构类似于WebAPP，几乎难以使用多窗口（Webview）调用能力。整个项目运行在一个Webview中，开发效率有所提升，但运行效率低，用户体验差。这个架构是基于Vue-cli的，可以使用前端的新特性，但是综合考虑还是很难做出运行效率报告和用户体验好的产品。为什么不直接使用Weex或者RN开发原生应用呢？该技术陷阱多，开发难度大，开发效率慢。虽然可以利用新特性开发原生应用，但这种解决方案对于一些中小型公司来说是难以承受和负担得起的。那我们怎么办？方便快捷愉快的coding，终于开发出一个多页面的HybridAPP.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自动化任务被编写为通过命令行简单地添加和删除页面。创建一个页面：gulpnewPage--nametestName删除一个页面：gulpdelPage--nametestName执行以上两条命令会自动创建和删除html&js&scss文件，并自动在webpack.config.js配置中添加配置信息文件。同时，它会自动将配置信息添加到上一项描述的配置文件中。执行添加新命令时，会自动复制test.html/scss/js模板，所以可以手动更改模板。需要注意的是，每次执行remove命令时，都需要手动删除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*，后面会少用到，因为windows下node-sass包下载太难了。8、路由跳转不使用a标签跳转，而是在每个需要跳转事件的节点上添加css类“Jump”和data-uri参数。工具方法初始化后，会自动绑定跳转事件。详情请参考代码。9.分享这个简单搭建配置的开源地址。这个方案是我之前方案的升级版。它不完整和严格。我在这里简单分享一下我的想法。有兴趣的朋友可以和我分享一下，一起探讨。在那之前本文不介绍该版本的架构方案。写这篇文章是因为之前在一些群里和大家讨论过Dcloud下的开发和分享，现在抽空简单描述一下。码云地址：https://gitee.com/izcy/Webpac...9.后记因为使用该方案的项目前期做完静态页面就中途挂了，所以很多方法都没有写（比如窗口管理，跳转不完善），整套方案不完整，我继续更新本文以分享更多内容。也欢迎Dcloud开发者参与。10、联系我http://www.zhangchaoyue.comZcy2018-02-0211:51:51
