HTML5plus 移动 App开发入门

咳咳，图片复制不到文章里面来，大家去我的资源里下载吧，PDF版的。

HTML5plus 移动 App开发入门

更新时间：2014年 4月 17日

HTML5 Plus 应用概述

HTML5 Plus 规范

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

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

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

a) 跨手机平台的能力调用都在 HTML5+ 规范里，比如二维码、语音输入，使用

plus.barcode 和 plus.speech。编写一次，可跨平台运行。

b) JS Bridge是另一项创新技术，通过 js 可以直接调 ios 和 android 的原生 API，这部分就不再跨平台，比如调 ios game center，或在 android 手机桌面创建快捷方式。 JSB 的用法是，var obj= plus.android.import("android.content.Intent");，将一个原生对象 android.content.Intent 映射为 js 对象 obj，然后在 js 里操作 obj对象的方法属性就可以了。

HTML5+ App

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

当然这些移动 App 里某些页面也可以继续从服务器端以网页方式下行。

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

举几个例子。

例 1：一个 mobile web 项目，想打包成移动 App。

a) 在 HBuilder 里新建一个 web 项目，把 mobile web 代码放进去。

b) 在 HBuilder 里新建移动 App

c) 在新建的移动 App 下找到 manifest.json，将其中的入口页面配置为 mobileweb 的网络地址。

d) 然后点发行打包，就得到一个移动 App 的安装包。除了可发行到 Appstore 和桌面有个快捷方式外，与浏览器的体验不会有其他区别。

e) 另外其实 mobile web 的代码，也可以判断自己运行的环境，如果 UA 里包含 “Html5Plus”，也可以写 plus 对象来调用原生能力。

例子 2：正规的移动 App（没有网页进度条）

a) 在 HBuilder 里新建移动 App 项目

b) 在移动 App 里编写 html、Js、css 文件，本地 js通过 ajax 方式请求服务器数据，通过 plus.net 对象避开跨域限制。

c) 移动 App 里的 js 可以通过 plus 对象调用手机原生能力

d) 编写好的移动 App 点打包变成安装包。例子 3：混合型移动 App

这里的混合型移动 App，所指并非是原生和 HTML5 的 hybridApp，而是指一部分页面是本地的 HTML，通过 ajax 与服务器交互，另一部分页面是从服务器下行的 mobileweb页面。

a) 分别新建一个 web 项目和一个移动 App 项目

b) 在移动 App 里的某个 html 里通过<a href= 或者 location.href=指定 mobile web的页面地址。

HTML5+ 应用架构

HTML5+ 规范 API

最新规范请参考 http://www.html5plus.org/#specification

以下提供摘要表格信息。

手机端体验各个 API 的实现效果，ios 手机在 Appstore 搜索 Hello H5+，Android 手机下载

http://d.m3w.cn/helloh5p/HelloH5.apk。

设备和业务能力

特性	API	功能
Accelerometer	plus.accelerometer. *	提供设备加速度传感器管理能力，用于获取设备加速度信息。
Audio	plus.audio.*	提供音频的录制和播放能力。
Cache	plus.cache.*	提供应用缓存管理能力。
Camera	plus.camera.*	提供设备的摄像头管理能力，用于拍照、摄像操作。
Console	plus.console.*	提供应用的日志输出，用于调试跟踪。
Contacts	plus.cotacts.*	提供系统联系人操作能力。
Device	plus.device.* plus.screen.* plus.display.* plus.networkinfo.*	提供手机设备的信息。
Downloader	plus.downloader.*	提供应用文件下载任务管理能力，支持跨域网络访问。
Events	-	提供应用的事件管理能力，如应用前后台切换，网络变化等。
File	plus.io.*	提供文件系统访问能力。
Gallery	plus.gallery.*	提供访问系统相册能力。
Geolocation	plus.geolocation.*	提供系统的 GPS 信息管理能力。
Invocation	plus.ios.* plus.android.*	提供直接调用系统 Native API 能力。
Messaging	plus.messagin.*	提供设备的通讯能力。
Orientation	plus.orientation.*	提供设备方向感应器管理能力。
Proximity	plus.proximity.*	提供设备距离感应器管理能力。
Storage	plus.storage.*	提供应用本地数据存储能力。
UI	plus.ui.*	提供多窗口管理能力。
Uploader	plus.uploader.*	提供应用文件上传任务管理能力，支持跨域网络访问。
Runtime	plus.runtime.*	提供应用运行环境管理能力。
XMLHttpRequest	plus.net.*	提供网络请求能力，支持跨域网络访问。
Zip	plus.zip.*	提供文件的压缩和解压能力。

第三方插件能力

特性	API	功能
Barcode	plus.barcode.*	提供二维码扫描能力。
Maps	plus.maps.*	提供原生地图展现能力（百度地图）。
Payment	plus.payment.*	提供第三方支付能力（支付宝）。
Push	plus.push.*	提供消息推送能力（MKey 企业内网专用 push、个推）。

Share	plus.share.*	提供第三方分享能力（新浪微博、腾讯微博、微信）。
Speech	plus.speech.*	提供第三语音识别能力（讯飞语音云）。
Statistic	plus.statistic.*	提供第三方统计能力（友盟统计）。

开发环境 HBuilder

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

下载地址：http://www.dcloud.net.cn/

平台支持

l iOS 5.0 及以上

l Android 2.3 及以上

l WP 8.0 及以上（开发中）

手把手教你开发 HelloWord

创建 HelloWord 应用

l 启动 HBuilder

l 在菜单栏中选择“文件”-> “新建”->“移动 App”，打开“创建移动 App”对话框，在应用名称中输入“HelloWorld”

注意新建移动 App 需要联网分配一个 appid，在真机联调、打包发行时都需要这个 ID，所以不联网无法创建移动 App。

l 创建完成后，会在项目管理器中显示新建的“HelloWorld”项目

manifest.json

在项目管理器中双击“manifest.json”文件，打开程序信息配置页面：

应用基础信息

l 应用名称：应用安装到手机上显示的名称；

l appid：应用标识，用于云平台打包，不可修改；

l 版本号：应用发布的版本号；

l 入口页面：应用启动后默认显示的页面，可以是网络地址；

l 重力感应：应用在手机上开启重力感应时可切换的方向；

平台选择

平台选择后则可设置对应云平台的应用图标和启动界面，点击图标则可弹出文件选择对话框，按照提示尺寸选择对应分辨率启动图标和启动界面图片：

编辑完成后，按 Ctrl+S 键保存。

调用 HTML5+ API

在项目管理器中双击“index.html”文件，对于 HTML5+应用的页面有一个很重要的 “plusready”事件，此事件会在页面加载后自动触发，表示所有 HTML5+ API 可以使用，在此事件触发之前不能调用 HTML5+ API，所以应该在此事件回调函数中调用页面初始化需要调用的 HTML5+ API，而不应该在 onload 事件中调用：

<!DOCTYPE html>

<html>

<head>

<title>hello world</title>

// 扩展 API 加载完毕后触发“plusready"事件

document.addEventListener( "plusready", function() {

var self = plus.ui.getSelfWindow();

// ... code

}, false );

</script>

</head>

<body>

......

</body>

</html>

编辑程序启动后默认显示的页面 index.html，在页面中添加一个按钮，点击后将打开新

页面加载“http://www.baidu.com/”，为了实现此功能，我们需要用到 HTML5+扩展 API 中

plus.ui.createWindow()方法创建窗口：

编辑完成后，按 Ctrl+S 键保存。

真机运行

添加调用 HTML5+API 代码后，我们可以通过真机运行来查看效果，在本地编辑的页面保存后可同步在真机上看到保存后的显示效果。

注意只有移动 App 项目才可以真机联调。

iOS 真机运行

在 HBuilder 的“项目管理器”中选择创建的“HelloWorld”应用。

启动真机运行

将 iOS 设备连接到电脑，这时 HBuilder 会自动检测连接到电脑上的设备，通过菜单栏中的“运行”菜单启动：

也可通过工具栏启动：

注：如果没有发现设备，则确认设备是否安装 iTunes 程序，是否升级到最新版本？或者尝试重新连接数据线！

安装真机运行环境

启动真机运行后，HBuilder 会自动在设备上安装真机运行环境，并在控制台中显示以下信息：

注：如果提示错误信息，请尝试点击“终止”按钮后重新启动真机运行！

真机运行应用

在 iOS 设备上可看到新安装的 HBuilder 应用图标，手动点击运行

注意：真机联调 App 时，提供的是一个测试环境，并不真实发生打包，手机端 App 界面还有 develop 的水印，其手机桌面显示名字为 HBuilder，图标也是 HBuilder 的图标，此时并不是开发者真实 App 的名字图标。正式的 App 需要通过发行-打包来制作，打包后的 App 名字图标都是开发者定义的，里面也没有 develop 的水印。

启动后会弹出提示框，选择“确定”，显示以下页面：

Android 真机运行

将 Android 设备连接到电脑，这时 HBuilder 会自动检测连接到电脑上的设备，通过菜单栏中的“运行”菜单启动：

也可通过工具栏启动：

注：如果没有发现设备，请安装 360 手机助手等手机驱动，保证手机和 PC 可以连接。尝试重新连接数据线。另外有些数据线质量不好，会无法稳定连接。

运行一次后，关闭时务必点停止运行的红色方块按钮，否则下次连接很可能阻塞。

安装真机运行环境

启动真机运行后，HBuilder 会自动在设备上安装真机运行环境，并在控制台中显示以下信息：

注：如果提示错误信息，请尝试“终止”后重新启动真机运行！

真机运行应用

在 Android 设备会自动安装 HBuilder 应用，在桌面上可看到新安装的 HBuilder 应用图标（有些设备会在应用列表页面中）：

启动后会弹出提示框，选择“确定”，显示以下页面：

部署发布

完成应用页面的编辑后，需要正式发布到个大市场，这时需要从云平台进行安装包的制

作。通过菜单栏中的“发行”->“App 打包”，打开“App 云端打包”对话框提交。注意只有移动 App 项目才可以打包。

iOS 发布

对于 iOS 平台，可以选择越狱包或正式包（Appstore 专用），前者只能安装在已越狱的设备上，后者则可通过 iDP 证书打包提交到 Appstore 发布、或通过 iEP 证书打包在企业内部发布。

配置打包信息

l 越狱包

AppID：iOS应用标识，推荐使用反向域名风格的字符串，如“com.domainname.appname”。

l 正式包

AppID：iOS 应用标识，推荐使用反向域名风格的字符串，如“com.domainname.appname”，必须与 profile 文件绑定的 App ID 匹配。

私钥证书：iOSCertificates 文件（.p12）；私钥密码：导入私钥证书的密码；

Profile 文件：iOSProvisioning Profile 文件（.mobileprovision），必须与 App ID 和私钥证书区配；

查看打包状态

通过菜单栏中的“发行”->“查看打包状态”，打开“查看 App 打包状态”对话框，可查看打包历史记录和状态：

如果“制作状态”栏显示“打包成功，下载完成”则表示云端打包完成，可点击“打开下载目录”查看下载的安装包。

Android 发布

对于 Android 平台，可以选择使用 DCloud 生成的公用证书或自己生成的证书，两者不影响安装包的发布，唯一的差别就是证书中开发者和企业信息不同。

生成 Android 签名证书

（使用DCloud 公用证书可忽略）确保电脑上安装了JRE，我们将使用JRE 自带的创建和管理数字证书的工具 Keytool。使用以下命令生成证书：

-keystore helloworld.keystore 表示生成的证书，可以加上路径（默认在用户主目录下）；

-alias helloworld 表示证书的别名是 helloworld；

-keyalg RSA 表示采用的 RSA 算法；

-validity 10000 表示证书的有效期是 10000 天。

配置打包信息

l 使用 DCloud 公用证书

App 包名： Android 应用包名，推荐使用反向域名风格的字符串，如“com.domainname.appname”。

l 使用自有证书

App 包名： Android 应用包名，推荐使用反向域名风格的字符串，如“com.domainname.appname”。

证书别名：生成证书时使用-alias 参数设置的证书别名；私钥密码：生成证书时使用的 keystore 密码；证书文件：生成证书时使用-keystore 参数设置的证书保存路径；

查看打包状态

通过菜单栏中的“发行”->“查看打包状态”，打开“查看 App 打包状态”对话框，可查看打包历史记录和状态：

如果“制作状态”栏显示“打包成功，下载完成”则表示云端打包完成，可点击“打开下载目录”查看下载的安装包。

FAQ

HTML5+是否提供 UI 框架

HTML5+本身不包括任何 UI框架，我们推荐使用轻量级 UI框架 Ratchet，其他框架如 Sencha Touch、jQuery Mobile、jQTouch、PhoneJS 等性能略差，在一些低端Android 机上无法流畅运行。HBuilder 中内置了Ratchet 模板。

l 新建移动 App，在菜单栏中选择“文件”->“新建”->“移动 App”

l 在创建移动 App 对话框中选择“Ratchet”模板：

只能云端打包吗？支持本地打包吗？

支持本地打包，目前已经有开发者在内测该功能，未来会全面开放。

js 不能跨域，本地 HTML5 如何与服务器交互？

使用 plus.net 对象可以跨域

plus 对象浏览器不支持啊，是不是需要引用什么 js 框架？

不需要引入 js框架，plus 对象需要系统底层支持而不是单纯的一个 js 框架就能解决问

题。

plus 对象在 DCloud 的 5+runtime 里已经实现。使用 HBuilder 打包时，是把工程里的 html、

js、css 和 DCloud 的 5+runtime 混编打包成 ipa 或 apk 的。

也可以把 5+runtime 理解为 cef，一种没有地址栏的、实现了 plus 对象的增强浏览器内

核。

plus 规范是开放的吗，我可以自己实现plus 的 runtime 或在我自己的浏览器里支持 plus 对象吗？

plus 规范属于 HTML5Plus.org，是开放规范，任何公司或个人都可以基于 HTML5+规范开发自己的手机端实现。

什么是“响应式应用”：

一套代码根据不同运行环境调用不同能力来优化用户体验。比如文本框，在普通浏览器下就是一个文本输入框，在 Chrome 浏览器下运行时加个判

断调 Chrome 的语音输入，而运行在 App 模式下，则再加一个判断调用原生的语音识别 SDK，比如 plus.speech。

这样一个应用可以根据设备的不同而最大化的优化用户体验，这种模式很有魅力，对用户而言体验更好，对开发者而言成本更低。

iOS 如何安装越狱包

iOS 设备需要进行越狱操作（威锋网越狱教程）后才能安装越狱包，通常可以使用第三方工具进行管理，如 iTools（官网）：

使用 iTools 工具安装

l 安装 iTools 工具并启动（注：需安装 iTunes工具）

l 将 iOS 手机连接到电脑，这时 iTools 工具会提示发现设备，并确定设备越狱状态为“已越狱”：

l 右侧设备下选择“应用程序”，点击“安装”选择越狱包 ipa 文件：

l 安装完成后即可在手机上打开运行

iOS 安装越狱包提示“验证失败”错误

iOS 设备需要进行越狱操作（威锋网越狱教程）后才能安装越狱包，对于 iOS7.x 系统越狱操作后需要确认是否安装安装 afc2add、AppSync 工具？

安装 afc2add、AppSync 工具

l 打开 cydia

l 选择“软件源”-> “编辑” -> “添加”，输入 APT 地址：

l 添加源完成后，在搜索页面搜索工具并安装。

HBuilder 可以开发 phonegap 应用吗？

首先 HBuilder 的语法提示库是开放的，基于 xml 语法库文件或 jsdoc 这 2 种方式，可以制作任意语法提示。

这部分的开源地址是：https://github.com/dcloudio/WebFrameworkGrammar

只要有人制作了 phonegap 语法提示文件，导入到 HBuilder 里就可以提示。

HBuilder 支持 eclipse 插件，开发者完全可开发一个 eclipse 插件装到 HBuilder 上，实现

phonegap 打包等功能。

HTML5plus 移动 App开发入门相关推荐

HTML5 Plus 移动 App开发入门
HTML5 Plus 移动 App开发入门 HTML5+扩展了 JavaScript 对象 plus,使得 js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系统等, ...
5G 时代的 Android App 开发入门与项目实战
随着移动互联网的持续发展,Android系统从智能手机逐步拓展到平板电脑.智能电视.车载大屏.智能家居.智能手表等诸多设备,Android开发依然是前景可期的IT岗位. 当然,整个社会正在迈向5G时代 ...
android开发入门与实践_我的新书《Android App开发入门与实战》已经出版
前言工作之余喜欢在CSDN平台上写一些技术文章,算下时间也有两三年了.写文章的目的一方面是自己对技术的总结,另一方面也是将平时遇到的问题和解决方案与大家分享,还有就是在这个平台上能和大家共同交流. ...
Android APP开发入门
Android APP开发入门目录 android_studio很好用的一个就是debug 1 1导入demo编译出错 1 4使用as运行安装不了apk安装adb 2 5SeekBar组件使用 2 ...
傻瓜式Android APP开发入门教程
这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤一一讲解,非常简明的一个Android APP开发入门教程,android各种机子和rom的 ...
（转载）H5 手机 App 开发入门：概念篇
H5 手机 App 开发入门:概念篇一.H5 的含义二.原生应用 2.1 概念 2.2 优点 2.3 缺点三.Web 应用 3.1 概念 3.2 优点和缺点 3.3 Web APP 的劣势 3. ...
（转载）H5 手机 App 开发入门：技术篇
H5 手机 App 开发入门:技术篇一.手机 APP 的技术栈二.WebView 控件三.原生技术栈 3.1 Xcode 3.3 Android Studio 四.混合技术栈 4.1 框架种类 ...
《Android App开发入门与项目实战》出版后记
<Android Studio开发实战:从零基础到App上线>自面世以来,承蒙众多朋友的抬爱,该书一直保持不错的销量,其中第一版的出货量突破一万,第二版的出货量即将突破两万.对于一个程序员 ...
我的新书《Android App开发入门与实战》已经出版
文章目录 1. 前言 2. 写书的目的 3. 书籍简介 4. 书籍目标读者群体 5. 书籍比较 6. 书籍特色 7. 书籍章节 8. 书籍封面 9. 购书地址 10. 本书案例及源码下载 1. 前言 ...

HTML5plus 移动 App开发入门

HTML5plus 移动 App开发入门相关推荐

最新文章

热门文章