如何实现HTML5plus移动应用的开发

发布时间:2020-07-10 15:17:24 作者:Leah
来源:亿速云 阅读:448

这篇文章运用简单易懂的例子给大家介绍如何实现HTML5plus移动应用的开发,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

增强版的手机浏览器引擎,让HTML5达到原生水平!

产品口号,总会有些夸张的成分,不要在意这些细节。

Tips

使用方式

Runtime

即使用 DCloud 公司的另一款产品 HBuilder,直接进行开发调试。

SDK

将 5+SDK 集成到自己的原生应用中,就可以在应用中使用其扩展的 JS API。

区别

简单地理解下
Runtime 方式,不需要开发者自己开发原生应用的基座部分,5+ 这边帮开发者做好了,只需要提交应用资源云端打包就行了。  
SDK 方式则不同,这种情况是在原有的原生应用基座基础上,扩展 5+SDK。因而,需要开发者自己搭建原生开发的环境,进行部分原生开发的工作。

基本架构

按照官方的文档说明 Android平台第三方插件开发指导,大体分为三层结构。这里为了更方便理解,扩展成四部分进行说明。

Webview

可以理解为简单的浏览器,HTML、CSS、JavaScript 都在这里。

plus

这部分在 Webview 中,在原有的浏览器环境基础上,扩展可以调用原生功能的 API,这些 API 都在 window.plus 这个对象里面。

JS Bridge

负责连接 JavaScript 层与 Native 层。

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 开发比较适合以下情况或产品:

不推荐情况

有些情况没办法一概而论,因而按照具体情形说明。

上面许多情况都需要通过原生层的开发来解决,当然同时可以集成 5+SDK,相关的扩展 API 照用不误。

同类产品

目前在下了解到的就这些,有些产品浅尝辄止,有些产品压根就没体验过,因此这里不做对比以及过多的评述。

补充:

相关推荐:

如何使用微信开发者移动应用创建获取APP ID的详细介绍(图)

关于如何实现HTML5plus移动应用的开发就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. 移动应用中的流设计
  2. 利用HTML5开发移动应用的优点有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5plus 开发实例 h5

上一篇:如何在html5实现图片转圈的动画效果

下一篇:怎么实现HTML5眼睛移动效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》