这篇文章运用简单易懂的例子给大家介绍如何实现HTML5plus移动应用的开发,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
增强版的手机浏览器引擎,让HTML5达到原生水平!
产品口号,总会有些夸张的成分,不要在意这些细节。
Tips
HTML5plus 名字太长,因而又称 HTML5+,或简称 5+。
使用该引擎开发的移动应用,又称 5+App。
相关的 SDK,称为 5+SDK。
即使用 DCloud 公司的另一款产品 HBuilder,直接进行开发调试。
将 5+SDK 集成到自己的原生应用中,就可以在应用中使用其扩展的 JS API。
Runtime 方式可以直接使用 DCloud 提供的云端打包,不需要本地搭建打包环境。
Runtime 方式无需掌握原生开发的能力,合理使用扩展的 API 即可。
SDK 方式可以满足更多的需求,但是需要掌握原生开发的能力。
简单地理解下
Runtime 方式,不需要开发者自己开发原生应用的基座部分,5+ 这边帮开发者做好了,只需要提交应用资源云端打包就行了。
SDK 方式则不同,这种情况是在原有的原生应用基座基础上,扩展 5+SDK。因而,需要开发者自己搭建原生开发的环境,进行部分原生开发的工作。
按照官方的文档说明 Android平台第三方插件开发指导,大体分为三层结构。这里为了更方便理解,扩展成四部分进行说明。
可以理解为简单的浏览器,HTML、CSS、JavaScript 都在这里。
这部分在 Webview 中,在原有的浏览器环境基础上,扩展可以调用原生功能的 API,这些 API 都在 window.plus
这个对象里面。
负责连接 JavaScript 层与 Native 层。
接收 JavaScript 层传发过来的请求,通知 Native 层做出相应的响应。
接收 Native 层响应的结果,通知 JavaScript 层接收结果。
即 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移动应用的开发就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。