H5+app开发概述

旧城等待， 2022-04-23 00:44 142阅读 0赞

## HTML5 Plus应用概述 ##

HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。

### HTML5 Plus规范 ###

通过HTML5开发移动App时，会发现HTML5很多能力不具备。为弥补HTML5能力的不足，在W3C中国的指导下成立了[www.html5plus.org][]组织，推出HTML5+规范。

HTML5+规范是一个开放规范，允许三方浏览器厂商或其他手机runtime制造商实现。

HTML5+扩展了JavaScript对象plus，使得js可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

HBuilder的手机原生能力调用分2个层面：

\- 跨手机平台的能力调用都在HTML5+规范里，比如二维码、语音输入，使用plus.barcode和plus.speech。编写一次，可跨平台运行。  
\- Native.js是另一项创新技术。手机OS的原生API有四十多万，大量的API无法被HTML5使用。Native.js把几十万原生API封装成了js对象，通过js可以直接调ios和android的原生API。这部分就不再跨平台，写法分别是plus.ios和plus.android，比如调ios game center，或在android手机桌面创建快捷方式。

Native.js的用法示例，var obj= plus.android.import("android.content.Intent");，将一个原生对象android.content.Intent映射为js对象obj，然后在js里操作obj对象的方法属性就可以了。

### HTML5+ App ###

使用HTML5+开发的移动App并非mobile web页面。这是新手最容易混淆的地方。mobile web的文件存放在web服务器上，而移动App的文件存放在手机本地，编写移动App的html、js、css文件被打包到ipa或apk等原生安装包，在手机客户端运行。

用个更形象的列子，web app仍然是b/s结构，而移动App是c/s结构甚至是完全脱线的单机应用。  
这或许有点超过一些人的想象，他们认为HTML就是web、就是b/s，事实上javascript早已可通过nodejs等技术运行在服务器侧，而在HBuilder的移动App里，HTML、JS等文件也可以被打包成原生安装包。

当然这些移动App里某些页面也可以继续从服务器端以网页方式下行，就像任何原生应用（如微信）都可以内嵌网页一样。

所以mobile web，在HBuilder里新建项目时，属于web项目。不要放置到移动App项目下。mobile web项目也不能真机联调和打包。

举几个例子说明mobile web和移动App的区别。  
**例1：把一个mobile web项目，打包成移动App。**

1. 在HBuilder里新建一个web项目，把mobile web代码放进去。  
2. 在HBuilder里新建移动App  
3. 在新建的移动App下找到manifest.json，将其中的入口页面配置为mobile web的网络地址。  
4. 然后点发行打包，就得到一个移动App的安装包。除了有个安装包和桌面有个快捷方式外，与浏览器的体验不会有其他区别。  
5. 不过注意，这样的移动App体验很差，它在页面跳转时会像浏览器那样切换并且白屏，它完全无法脱线使用，没有网络时点开这个app只能看到一片白板。这样的app在Apple的Appstore审核时是无法通过的，其他大的安卓市场也不会允许发行。

**例子2：正规的移动App**

1. 在HBuilder里新建移动App项目  
2. 在移动App里编写html、Js、css文件，本地js通过ajax方式请求服务器数据，通过plus.net对象避开跨域限制  
3. 移动App里的js可以通过plus对象调用手机原生能力  
4. 编写好的移动App点打包变成安装包，这才是一个体验良好的、可上线的移动App。

**例子3：混合型移动App**

这里的混合型移动App，所指并非是原生和HTML5的hybrid App，而是指一部分页面是本地的HTML，通过ajax与服务器交互，另一部分页面是从服务器下行的mobile web页面。  
1. 分别新建一个web项目和一个移动App项目  
2. 在移动App里的某个html里通过<a href= 或者location.href=或者webview对象的loadURL方法指定mobile web的页面地址。  
3. 在服务器下行的mobile web页面中，一样可以通过js调用本地HTML5Plus api对硬件层进行访问。类似微信JS SDK。

### HTML5+ 应用架构 ###

![HTML5+ 应用架构图][HTML5_]

### HTML5+ 规范 API 及demo示例 ###

最新规范请参考[http://www.html5plus.org/\#specification][http_www.html5plus.org_specification]  
手机端体验各个API的实现效果，ios手机在Appstore搜索Hello H5+，Android手机[下载地址][Link 1]。  
在HBuilder中新建移动App，选Hello H5+，即可看到这个demo的源代码。

**建议：在进行开发之前先把DCloud公司提供的实例都运行一遍，这样能够利用许多现有的功能模块，省去很多开发时间和成本。**

### 开发环境HBuilder ###

HBuilder内置HTML5+ APP开发环境，提供一套完整的移动应用开发解决方案。内置HTML5+ API语法提示，提高开发效率；集成真机运行环境，方便开发后即时在真机上查看运行效果；集成应用云端打包系统，不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。  
下载地址：[http://www.dcloud.io/][http_www.dcloud.io]

### 平台支持 ###

*  iOS 5.0及以上
 *  Android 2.3及以上

[www.html5plus.org]: http://www.html5plus.org/
[HTML5_]: /images/20220323/c8a6c1a74d0a45e8888577c09f4eb8ab.png
[http_www.html5plus.org_specification]: http://www.html5plus.org/#specification
[Link 1]: http://dcloud.io/helloh5/HelloH5.apk
[http_www.dcloud.io]: http://www.dcloud.io/