HTML5+app开发学习之快速入门篇
5+app开发概念理解相关
开发环境与支持
开发环境
HBuilderX，HBuilderX内置HTML5+ APP开发环境，提供一套完整的移动应用开发解决方案，具有如下特点：
- 内置HTML5+ API语法提示，提高开发效率；
- 集成真机运行环境，方便开发后即时在真机上查看运行效果；
- 集成应用云端打包系统，不用部署xcode和Android
sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。
下载地址：http://www.dcloud.io/
平台支持
iOS 8.0及以上
Android 4.4及以上
快速入门实战
创建HelloWorld应用
启动HBuilderX
在菜单栏中选择“文件”-> “新建”->“项目”，打开“新建项目”对话框，选择“5+ App”，在项目名称中输入“HelloWorld”，选择模板中勾选“默认模板”
注意： 新建5+ App项目需要联网分配一个appid，在真机联调、打包发行时都需要这个ID，所以不联网将无法获取appid。
创建完成后，会在项目管理器中显示新建的“HelloWorld”项目。
配置环节
在项目管理器中双击“manifest.json”文件，打开应用配置页面：
对于要打包的原生应用而言，其各种配置均在此处。具体配置教程见：Manifest.json文件配置，或者点击配置页面上的“配置指南”链接。
调用HTML5+ API
在项目管理器中双击“index.html”文件，对于HTML5+应用的页面有一个很重要的“plusready”事件，此事件会在页面加载后自动触发，表示所有HTML5+ API可以使用，在此事件触发之前不能调用HTML5+ API，所以应该在此事件回调函数中调用页面初始化需要调用的HTML5+ API，而不应该在onload或DOMContentLoaded事件中调用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Hello world</title>
<script type="text/javascript">
// 扩展API是否准备好，如果没有则监听“plusready"事件
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready", plusReady, false);
}
// 扩展API准备完成后要执行的操作
function plusReady(){
var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview
// ... code
}
</script>
</head>
<body>
Hello World<br/>
</body>
</html>
编辑程序启动后默认显示的页面index.html，在页面中添加一个按钮，点击后将打开新页面加载“http://www.dcloud.io/”，为了实现此功能，我们需要定义openNewWebview方法，调用5+ API中plus.webview.createWebview()方法创建窗口，调用窗口对象的show方法显示：
// 打开新Webview窗口
function openNewWebview(){
var wv = plus.webview.create('http://www.dcloud.io/');
wv.show();
}
完整代码截图：
编辑完成后，保存。
真机运行
写完代码后，可以通过真机运行来查看效果，也可以通过模拟器运行来查看效果，其中真机运行有3个特点：
- 真实：虽然PC端HBuilderX右侧的内置浏览器也可以看大致的页面，但真实的布局效果以及手机上的特殊能力调用，还是必须在真机测试。
- 边改边看：在HBuilderX更改页面并保存后，可立即同步在真机上看到保存后的显示效果。比开发原生应用还方便。
- 检查错误和log：手机运行HTML等文件时如果发生错误以及打印的console.log，都可以在真机运行时从手机端反馈回到HBuilderX的控制台，在控制台直接查看。
注意：只有移动App项目（uni-app、Wap2App、5+ App）才可以真机联调。
启动真机运行
将iOS或Android设备连接到电脑，这时HBuilderX会自动检测连接到电脑上的设备，通过菜单栏中的“运行” -> “运行到手机或模拟器”，选择要运行的设备启动真机运行：
也可通过工具栏启动：
启动真机运行后，在底部控制台显示以下信息：
启动后如果弹出提示框，请选择“确定”，显示以下页面：
点击“打开新页面”按钮，加载显示“http://www.dcloud.io/”网页：
在Android设备会自动安装真机运行基座HBuilder APP，并启动运行，iOS设备需要开发者手动点击手机桌面的HBuilder App图标。
如果真机失败，注意看控制台的提示，或点HBuilder菜单-运行里的故障排查指南。
注意：真机联调App时，提供的是一个测试环境，打包，调试基座App的名字、图标、启动封面图片、是否可旋转这些只有打包才能更改的属性不会因为开发者修改manifest文件而变化。只有修改manifest且点击菜单发行-打包后，上述4个设置才能更改。
运行后，HBuilder中修改页面代码，保存后会自动同步到手机中，如果手机当前展示着被修改的页面，则会刷新页面。尝试在js中在plusready之后编写console.log，或者改写错误的js，可以直接在HBuilder的控制台看到结果。如果真机运行遇到各种故障，点击运行菜单里的真机运行常见故障指南进行排查。
启动模拟器运行
启动模拟器运行，显示如下：
点击打开新页面，进入网页：
可以看到模拟器运行调试不是很兼容，需要配置更多的内容让最终的模拟运行达到真机的效果，但是真机运行调试就比较方便有效。
debug调试
除了真机运行，还可以利用chrome和safari的开发者控制台来调试5+App。可以使用真机插上数据线，也可以使用Android或iOS的官方模拟器。所有Api包括plus的各种api，甚至包括plus.ios和plus.android的原生对象，都可以调试。
在HBuilder的菜单运行里选择打开Webview调试模式，如果手机连接正常，5+App启动，在ide上可看到可调试的页面，点击调试后，打开控制台，和普通的浏览器调试是一样的。
发行打包
完成应用页面的编辑后，需要正式打包为原生的apk或ipa安装包。首先明确一下，有人说HTML5做的应用无法通过苹果Appstore审核，这是错误的说法。苹果只是拒绝开发者把web站点直接打包上Appstore，不优化任何体验，它认为这是给Appstore制造垃圾应用，如果是原生体验的App，虽然使用HTML5技术，苹果也不会拒绝上架。
HBuilderX提供的打包有云打包和本地打包两种。HBuilderX提供的云打包对正常开发者是免费的。但过多浪费服务器资源会额外收费。用本地打包无任何限制。云打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。
对于不熟悉原生开发的前端工程师，云打包大幅降低了他们的使用门槛。对于没有mac电脑的开发者，他们也可以通过云打包直接打出iOS的ipa包。
无论云打包还是本地打包，在HBuilderX的菜单“发行”菜单中有链接。
本地打包还可参考原生开发者支持网站的App离线打包页面，下面仅对云打包进行说明。
通过菜单栏中的“发行”->“原生App-云打包”，打开“App云端打包”对话框提交。
注意：只有App项目才可以打包
iOS平台打包
对于iOS平台，可以选择越狱包或证书包（Appstore专用或企业证书），前者只能安装在已越狱的设备上，后者则可通过iDP证书打包提交到Appstore发布、或通过iEP证书打包在企业内部发布。
越狱包
Bundle ID(AppID)：iOS应用标识，推荐使用反向域名风格的字符串，如“com.domainname.appname”。
IDP/IEP证书包
Bundle ID(AppID)：iOS应用标识，推荐使用反向域名风格的字符串，如“com.domainname.appname”，必须与profile文件绑定的App ID匹配。
证书profile文件：iOS Provisioning Profile文件（.mobileprovision），必须与苹果App ID和私钥证书区配。
证书私钥密码：导入私钥证书的密码。
私钥证书：iOS Certificates文件（.p12）。
私钥证书及profile文件生成请参考http://ask.dcloud.net.cn/article/152
Android平台打包
对于Android平台，可以选择使用DCloud生成的公用证书或自己生成的证书，两者不影响安装包的发布，唯一的差别就是证书中开发者和企业信息不同。
应用在开发测试阶段可以使用公共测试证书打包体验，发布时请使用自有证书打包，更多信息参考Android平台云端打包证书使用说明
使用自有证书
以自有证书打包为例，使用公共测试证书时不用配置证书相关信息，其它配置一致：
Android包名：Android应用包名，使用反向域名风格的字符串，如“com.domainname.appname”。
证书别名：生成证书时使用-alias参数设置的证书别名；
私钥密码：生成证书时使用的keystore密码；
证书文件：生成证书时使用-keystore参数设置的证书保存路径；
查看打包状态
通过菜单栏中的“发行”->“原生App-查看打包状态”，可在控制台查看当前打包状态：
如果打包成功，则会在控制台显示下载地址，可点击链接下载安装包。遇到打包失败，常见原因是：
- 如果使用自用证书，很可能是证书配置错误。
- 如果使用DCloud证书仍然出错，很可能是图片错误。所有图片格式必须是标准png，且严格符合分辨率要求。使用其他图片格式重命名为png会导致打包失败！
- 其他错误请参考： 云打包常见错误排查指南
UI框架
HBuilder并不限制UI框架，开发者使用任何UI框架均可以。市面上移动前端框架也不少：
SUI Mobile 是一套基于 Framework7 开发的UI库。
MUI 最接近原生APP体验的高性能前端框架
weUI 微信原生框架
Vant Vue官网合作UI，有赞团队开发
Frozen UI 由腾讯团队开发，适用于使用手Q规范设计的Web页面
Mand Mobile Mand Mobile是面向金融场景设计的移动端组件库
Muse - UI Muse UI 是一套 Material Design 风格开源组件库，旨在快速搭建页面。
cube - ui 滴滴开源的UI框架
vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用。
vux vux 基于WeUI和Vue(2.x)开发的移动端UI组件库
Mint UI Mint UI 由饿了么前端团队推出的 ，是一个基于 Vue.js 的移动端组件库。
其中DCloud开发的mui框架，它的性能更高，样式也更接近原生App，并且mui调用了HTML5+扩展能力，可以实现更好的体验。推荐开发移动App的开发者使用mui框架，详情请参考文档中心mui章节。不过mui只封装了部分HTML5Plus Api，学会mui框架不代表可以不学习HTML5Plus规范。mui只是很有限的通过封装简化了常见开发过程。
开发资源
API手册：HTML5+规范
HelloH5+示例应用，应用中包括几乎所有plus API的示例：
- iOS：Appstore中搜索Hello H5+
- Android：下载地址
获取Hello H5+的源代码，在HBuilder中新建移动App，选Hello H5+，可以查看所有plus api的调用样例代码。
4654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
