如何实现HTML5plus移动应用的开发-创新互联

这篇文章运用简单易懂的例子给大家介绍如何实现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;

1. JS 层调用 plus.runtime.version，Webview 向 JS Bridge 发起请求。

2. JS Bridge 接收请求，通知 Native 层读取应用版本号信息。

3. Native 层执行拿到结果，通知 JS Bridge 层相应结果。

4. JS Bridge 拿到 Native 层相应的结果，通知相应的 Webview 结果信息。

5. JS 层获取到应用的版本信息。

吐槽一下

个人认为，每个产品每家公司，都有其自身的设计理念以及经营策略。不同的用户，总会有不同的需求和看法。  
因此，做技术选型时一定要搞清楚自己的需求和被调研的产品信息。DCloud 的社区中，经常出现“怎么没有XXX API”，“为什么不集成XXX SDK”，“不会原生开发，希望官方能够扩展XXX API”等等类似的帖子。至于出现此类问题的具体原因，大家都有自己的理解，这里不做讨论。
做技术选型时，最好亲自动手做下尝试。不要期望产品供应方给你最佳答复，因为人家不会傻傻地把用户往外推。  
------华丽丽分割线------  
下面，分享一下个人使用的经验和心得，希望可以帮助其他开发者在技术选型时做个参考。

优点

1. 学习成本低，只要掌握了基本的 web 开发能力，即可上手。

2. 云端打包，不必本地搭建 Android 与 iOS 开发环境，进行打包处理。

3. 一套代码，只要做少许的兼容处理，即可编译成 Android 和 iOS 两个包。

4. 没有想到，待讨论补充吧。

不足

1. plus.ModuleName.* 提供的 API 有限，虽然有 Native.js 这一产品，但是需要掌握一定的原生开发能力。

2. 依赖手机自身的 Webview，因此在部分手机上性能并不理想。这一点，对于某些业务产品有一定的影响。

3. 接第1点，某些功能的实现，需要开发者自行集成 SDK 进行扩展。例如蓝牙、应用后台常驻等。这一点，同样需要开发者具有原生开发的能力。

4. 部分功能，由于兼容性问题实现的并不完善。例如桌面图标的角标等。当然，Android 的碎片化严重，有些不足可以理解。

5. 文档内容，有些地方解释地不够清楚。另外，文档的排版有点奇怪。

6. 目前没遇到其它坑了，也可能在下还不够熟悉。

较合适范围

综合官方的案例展示，以及个人开发的经历。总结下来，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移动应用的开发就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。