HTML5plus移动应用的开发实例分享
什么是 HTML5plusDCloud 公司提供的，使用传统 web 技术开发移动应用的解决方案。本文主要和大家分享HTML5plus移动应用的开发实例分享，希望能帮助到大家。
增强版的手机浏览器引擎，让HTML5达到原生水平！
产品口号，总会有些夸张的成分，不要在意这些细节。
Tips
-
HTML5plus 名字太长，因而又称 HTML5+，或简称 5+。
-
使用该引擎开发的移动应用，又称 5+App。
-
相关的 SDK，称为 5+SDK。
使用方式
Runtime
即使用 DCloud 公司的另一款产品 HBuilder，直接进行开发调试。
SDK
将 5+SDK 集成到自己的原生应用中，就可以在应用中使用其扩展的 JS API。
区别
-
Runtime 方式可以直接使用 DCloud 提供的云端打包，不需要本地搭建打包环境。
-
Runtime 方式无需掌握原生开发的能力，合理使用扩展的 API 即可。
-
SDK 方式可以满足更多的需求，但是需要掌握原生开发的能力。
简单地理解下
Runtime 方式，不需要开发者自己开发原生应用的基座部分，5+ 这边帮开发者做好了，只需要提交应用资源云端打包就行了。
SDK 方式则不同，这种情况是在原有的原生应用基座基础上，扩展 5+SDK。因而，需要开发者自己搭建原生开发的环境，进行部分原生开发的工作。
基本架构
按照官方的文档说明 Android平台第三方插件开发指导，大体分为三层结构。这里为了更方便理解，扩展成四部分进行说明。
Webview
可以理解为简单的浏览器，HTML、CSS、JavaScript 都在这里。
plus
这部分在 Webview 中，在原有的浏览器环境基础上，扩展可以调用原生功能的 API，这些 API 都在 window.plus 这个对象里面。
JS Bridge
负责连接 JavaScript 层与 Native 层。
-
接收 JavaScript 层传发过来的请求，通知 Native 层做出相应的响应。
-
接收 Native 层响应的结果，通知 JavaScript 层接收结果。
Native
即 Android 和 iOS，也是 HTML5plus 的核心关键部分。
一次调用执行的过程
以获取应用版本号为例
plus.runtime.version;
-
JS 层调用
plus.runtime.version，Webview 向 JS Bridge 发起请求。 -
JS Bridge 接收请求，通知 Native 层读取应用版本号信息。
-
Native 层执行拿到结果，通知 JS Bridge 层相应结果。
-
JS Bridge 拿到 Native 层相应的结果，通知相应的 Webview 结果信息。
-
JS 层获取到应用的版本信息。
吐槽一下
个人认为，每个产品每家公司，都有其自身的设计理念以及经营策略。不同的用户，总会有不同的需求和看法。
因此，做技术选型时一定要搞清楚自己的需求和被调研的产品信息。DCloud 的社区中，经常出现“怎么没有XXX API”，“为什么不集成XXX SDK”，“不会原生开发，希望官方能够扩展XXX API”等等类似的帖子。至于出现此类问题的具体原因，大家都有自己的理解，这里不做讨论。
做技术选型时，最好亲自动手做下尝试。不要期望产品供应方给你最佳答复，因为人家不会傻傻地把用户往外推。
——华丽丽分割线——
下面，分享一下个人使用的经验和心得，希望可以帮助其他开发者在技术选型时做个参考。
优点
-
学习成本低，只要掌握了基本的 web 开发能力，即可上手。
-
云端打包，不必本地搭建 Android 与 iOS 开发环境，进行打包处理。
-
一套代码，只要做少许的兼容处理，即可编译成 Android 和 iOS 两个包。
-
没有想到，待讨论补充吧。
不足
-
plus.ModuleName.* 提供的 API 有限，虽然有 Native.js 这一产品，但是需要掌握一定的原生开发能力。
-
依赖手机自身的 Webview，因此在部分手机上性能并不理想。这一点，对于某些业务产品有一定的影响。
-
接第1点，某些功能的实现，需要开发者自行集成 SDK 进行扩展。例如蓝牙、应用后台常驻等。这一点，同样需要开发者具有原生开发的能力。
-
部分功能，由于兼容性问题实现的并不完善。例如桌面图标的角标等。当然，Android 的碎片化严重，有些不足可以理解。
-
文档内容，有些地方解释地不够清楚。另外，文档的排版有点奇怪。
-
目前没遇到其它坑了，也可能在下还不够熟悉。
较合适范围
综合官方的案例展示，以及个人开发的经历。总结下来，5+App 开发比较适合以下情况或产品：
-
初创公司，需要快速上线应用。
-
新闻资讯（36Kr）、电商（HiMall）、内容分享（枫桥居花卉）、外卖等大部分的 O2O 业务产品等等。
-
核心业务功能不依赖某些原生功能
-
一部分企业应用，也可以根据具体需求情况而定。
不推荐情况
有些情况没办法一概而论，因而按照具体情形说明。
-
重度依赖某些原生功能，比如应用中需要实现地图自定义的绘线、需要蓝牙模块进行数据的通信等等。
-
核心业务涉及到即时通信（IM），并且不希望使用第三方的 JS 版 SDK 的。
-
需要读写文件，比如录制短视频、编辑图片、编辑视频等。
-
某些较为“流氓”的功能，比如应用后台常驻、推送服务常驻等等。
-
控制应用的权限，比如禁止截屏之类的。这个只能在原生层处理，而且 Android 的兼容你懂的。
上面许多情况都需要通过原生层的开发来解决，当然同时可以集成 5+SDK，相关的扩展 API 照用不误。
同类产品
-
cordova
-
apicloud
-
appcan
-
ionic
-
weex
-
react native
目前在下了解到的就这些，有些产品浅尝辄止，有些产品压根就没体验过，因此这里不做对比以及过多的评述。
补充：
-
HBuilder 是一款 IDE，也是真机调试时基座的名字。这两个加起来，就是开发 5+App 的环境及工具。
-
HTML5plus 的名字很多，DCloud 官网上写的是 5+Runtime。负责扩展 JS API，实现 JS 调用原生功能。
-
MUI 移动开发的 UI 框架，为了方便开发封装了几个涉及到 HTML5plus 的方法，经常被人误解。但它真的只是个 UI 框架，原生能力的调用和它没关系。
相关推荐：
如何使用微信开发者移动应用创建获取APP ID的详细介绍（图）
以上就是HTML5plus移动应用的开发实例分享的详细内容，更多请关注其它相关文章！
- JS代码实现瀑布流插件
- H5同层Video播放器接入实例分享
