首页 > H5教程 > 正文

HTML5plus移动应用的开发实例分享

原创 2018-02-08 0 312
什么是 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;
  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移动应用的开发实例分享的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:HTML5plus 开发实例 h5
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    • 小云云

      学生

    • 想不好签名了...
    • 5865篇
      文章总数
    • 312
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新