HTML5Plus 应用概述
HTML5Plus中国联通App，简称5+App，是一款基于HTML、JS、CSS运行在手机上的App。 这些App可以通过扩展的JSAPI调用手机原生能力，实现与原生App同样强大的功能和性能。 。
HTML5Plus规范
通过HTML5开发联通App时，你会发现HTML5并没有太多的能力。 为了填补HTML5能力的短板，在W3C中国指导下成立了HTML5中国产业联盟，并推出了HTML5+规范。 目前，该联盟早已挂靠住房和城乡建设部信息通信研究院，相关标准已成为行业标准。
HTML5+规范是一个开放规范，隶属于住房和城乡建设部，允许第三方浏览器厂商或其他手机运行时厂商实施。
HTML5+扩展了JavaScript对象plus，允许js调用各种浏览器无法实现或实现不好的系统能力，比如摄像头、陀螺仪、文件系统等设备能力，以及上传下载、二维码、地图、支付、语音输入、消息推送等
除了功能之外，HTML5+的一个非常重要的特性就是提供了原生渲染能力。 通过plus.webview、plus.nativeObj、plus.nativeUI，开发者可以使用js调用原生渲染能力，实现体验的大幅提升。
原生API多达40万个。 HTML5+封装并没有封装全部40万个API，而是分为两个层次：
Native.js 使用示例
var obj= plus.android.import("android.content.Intent");将原生对象android.content.Intent映射为js对象obj，然后在js中操作obj对象的方法属性。
Native.js详细教程请参考：5+应用开发Native.js入门手册
5+App既包含HTML5Plus规范，又包含Native.js的实现。 开发者可以在5+App中自由使用相关技术。
5+App概念分析
首先，开发人员需要知道你想做什么。 您想制作一个应用程序，安装并在手机上运行吗？ 或者您想将 mobileweb 项目打包到应用程序中？
制作一个严肃的应用程序
传统意义上的app是c/s的形式。 其程序必须在手机上安装并运行，不需要通过浏览器在线下载。
此时，开发者在HBuilderX中创建新项目时，选择“5+App”。 （在HBuilder中称为中国联通App）
App项目下编译的html、js等文件会被打包到原生安装包中（Android为apk包，iOS为ipa包）。
这时本地js和服务器通过ajax进行交互，服务器以socket的形式提供数据（通常是json）。 然后客户端的js文件解析json并根据本地业务逻辑渲染页面并执行功能。
所以请不要将php等运行在服务器端的文件放在App项目中。 使用wap2app将mobileweb项目打包成app
如果开发者想要快速、轻松地将一个完整的移动网站打包成一个应用程序，他或她必须使用 DCloud 的 wap2app 框架。
在HBuilderX中新建项目时，选择Wap2App项目，输入项目名称和wap站主页地址，并参考其他框架的教程进行配置。
wap2app不同于普通的网页打包技术。 wap2app能够真正实现原生应用的功能和性能体验。
具体教程参见：文档中心-wap2app，#//ask.dcloud.net.cn/article/1244
wap2app是一个5+的应用程序，其底层也得到了强大的HTML5Plus标准和Native.js的支持。
wap2app项目下的所有文件也打包在本机运行。 HTML5+应用架构
HTML5+标准API和演示示例
最新规格请参阅#specification
如需在手机上体验各API的效果，iOS手机请在Appstore中搜索HelloH5+，Android手机请在Appstore中搜索HelloH5+的下载地址。
在HBuilderX中新建一个工程，勾选5+App，选择模板HelloH5+即可查看本demo的源码。
开发环境HBuilderX
HBuilderX外置HTML5+APP开发环境，提供一整套中国联通应用开发解决方案。
外接HTML5+API句式提示，提高开发效率；
与真机运行环境集成，开发后可方便立即检查真机上的运行效果；
集成应用云打包系统，无需部署xcode和Android SDK即可打包应用程序。 开发者只需使用HTML5、Javascript、CSS技术即可快速开发跨平台的联通应用。
下载链接：
该平台支持如何开发HelloWorld 的分步说明。
以下教程已更新至HBuilderX版本。 使用旧版本 HBuilder 的开发人员应更新到最新版本的 HBuilderX。 旧版本的HBuilder将不再更新。
创建HelloWorld应用程序manifest.json
双击项目管理器中的“manifest.json”文件，打开应用程序配置页面：
对于要打包的原生应用，它们的各种配置都在这里。 具体配置教程请参见：Manifest.json文件配置，或者点击配置页面的“配置手册”链接。
调用HTML5+API
双击项目管理器中的“index.html”文件。 对于 HTML5+ 应用程序页面有一个非常重要的“plusready”事件。 该事件会在页面加载后手动触发，表示所有HTML5+ API都可以使用。 该事件触发之前无法调用HTML5+API，因此页面初始化需要调用的HTML5+API应该在这个暴风雨反弹函数中调用，而不应该在onload或DOMContentLoaded暴风雨中调用：
Hello world
// 扩展API是否准备好，如果没有则监听“plusready"事件
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready", plusReady, false);
}
// 扩展API准备完成后要执行的操作
function plusReady(){
var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview
// ... code
}
Hello World
编辑程序启动后默认显示的页面index.html。 向页面添加一个按钮。 单击时，将打开一个新页面来加载“”。 为了实现这个功能，我们需要定义openNewWebview方法并在5+ API中调用plus.webview.createWebview。 ()方法创建窗口并调用窗口对象的show方法进行显示：
// 打开新Webview窗口
function openNewWebview(){
var wv = plus.webview.create('http://www.dcloud.io/');
wv.show();
}完整代码截图：
编辑完成后，按Ctrl+S保存。
真机操作
代码编写完成后，我们可以通过真机运行来检验效果。 真机运行有以下三个特点：
现实：
虽然HBuilderX的PC端外接浏览器也可以查看一般页面，但手机上的实际布局效果和特殊能力的使用还是必须在真机上进行测试。 一边换一边观察：
在HBuilderX中修改页面并保存后，您可以立即在真实设备上同时听到保存的显示效果。 比开发原生应用更方便。 检测错误并记录：
如果手机运行HTML等文件出现错误，复制的console.log可以在真机运行时从手机反馈到HBuilderX控制台，可以直接在控制台查看。
需要注意的是html5打包app，只有联通App项目（uni-app、Wap2App、5+App）可以与真实设备进行联调。
在HBuilderX的“项目管理器”中选择创建的“HelloWorld”应用程序。
开始真机操作
将 iOS 或 Android 设备连接到笔记本电脑。 这时，HBuilderX会手动检查连接到笔记本的设备。 通过菜单栏的“运行”->“运行到手机或模拟器”，选择需要运行的设备开始在真机上运行。 :
也可以通过工具栏启动：
启动真机后，顶部控制台显示如下信息：
注意：如果提示错误信息，请尝试“终止”，然后重启真机！
如果启动后弹出提示框，请选择“确定”，显示如下页面：
单击“打开新页面”按钮加载显示“”的网页：
在Android设备上，真机运行基础HBuilderAPP将手动安装并启动。 在iOS设备上，开发者需要自动点击移动桌面上的HBuilderApp图标。
如果你的真机出现故障，请注意控制台的提示，或者点击HBuilder菜单中的故障排除手册-运行。
注：与真机联调App时，提供的是测试环境，并不会实际发生打包。 调试基础App的名称、图标、启动封面图、是否可旋转等，只能通过打包的方式修改，开发时不会修改。 当清单文件更改时它会更改。 以上四个设置只有在更改manifest并点击菜单Publish-Package后才能修改。
运行后，在HBuilder中更改页面代码，保存后会手动同步到手机上。 如果手机当前正在显示更改后的页面，则会刷新页面。
尝试在plusready后在js中编译console.log，或者重写错误的js，直接在HBuilder的控制台中就可以看到结果。
如果您在运行真机时遇到各种故障，请点击运行菜单中的《真机操作常见故障处理手册》。
调试调试
不仅可以在真机上运行，我们还可以使用Chrome和Safari的开发者控制台来调试5+个App。
您可以使用真实设备插入数据线，也可以使用Android或iOS的官方模拟器。 所有的API，包括plus的各种API，甚至plus.ios、plus.android的原生对象，都可以调试。
在HBuilder的运行菜单中选择打开Webview调试模式。 如果手机连接正常，则启动5+ App，在ide上可以看到可调试的页面。 点击debug后，打开控制台，和普通浏览器调试一样。
配送包装
完成应用页面的编辑后，需要打包成原生apk或ipa安装包。
首先，我们要明确一点。 有人说，用HTML5制作的应用程序未能通过苹果应用商店的初审。 这是一个错误的说法。 苹果干脆拒绝开发者在不优化任何体验的情况下将网站直接打包进Appstore。 感觉这是在给Appstore制造垃圾应用。 如果是一款原生体验的App，即使使用了HTML5技术，苹果也不会拒绝上架。 事实上，Appstore 上有超过 400,000 个使用 HTML5 技术的应用程序。
HBuilderX提供两种打包方式：云打包和本地打包。
HBuilderX提供的云打包对普通开发者是免费的。 但过度浪费服务器资源会产生额外费用。 使用本地包装没有任何限制。
云打包的特点是DCloud官方配置了原生打包环境，可以将HTML等文件编译成原生安装包。
对于不熟悉原生开发的后端工程师来说html5打包app，云打包大大降低了他们的使用门槛。 对于没有Mac笔记本电脑的开发者来说，也可以通过云打包直接创建iOS ipa包。
无论云打包还是本地打包，HBuilderX的“发布”菜单中都有一个链接。
对于本地打包，还可以参考原生开发者支持网站的App离线打包页面。 这里只说明云打包。
通过菜单栏“发布”->“原生App-云打包”，打开“App云打包”对话框提交。
注意：只能打包App项目
iOS平台封装
iOS平台可选择越狱包或证书包（Appstore独享或企业证书）。 后者只能安装在越狱设备上。 前者可以通过iDP证书打包提交到Appstore发布，也可以通过iEP证书在企业内打包。 内部发布。
越狱包
IDP/IEP 证书包
请参考公钥证书和配置文件生成。
Android平台封装
对于Android平台，您可以选择使用DCloud生成的公共证书或您自己生成的证书。 两者不会影响安装包的发布。 唯一的区别是证书中的开发商和企业信息不同。
应用程序可以使用公共测试证书来打包开发和测试阶段的体验。 发布时请使用自己的证书进行打包。 更多信息请参考Android平台云打包证书使用说明。
使用您自己的证书
以自有证书打包为例，使用公共测试证书时无需配置证书相关信息。 其他配置相同：
检查包装状态
通过菜单栏的“发布”->“原生App-查看打包状态”，可以在控制台查看当前打包状态：
如果打包成功，控制台会显示下载地址，您可以点击链接下载安装包。
遇到包装失败时，常见原因有：
如果您使用自己的证书，很可能是证书配置不正确。
如果您在使用DCloud证书时总是出现错误，很可能是镜像错误。 所有图像格式必须为标准 png 并严格遵守帧速率要求。 使用其他图片格式并重命名为png会导致打包失败！
其他错误请参考：云打包常见错误排查手册
用户界面框架
HBuilder不限制UI框架，开发者可以使用任何UI框架。
然而，市场上确实没有好的移动应用后端框架。 DCloud开发了mui框架，性能更高，风格更接近原生应用。 不过，mui利用HTML5+扩展能力来实现更好的体验。
我们强烈推荐开发联通App的开发者使用mui框架。 详细内容请参考文档中心的mui章节。
请注意，mui 仅封装了 HTML5PlusApi 的一部分。 学习了mui框架并不意味着不需要学习HTML5Plus规范。 mui不会很重，但它会通过封装以非常有限的方式简化常见的开发过程。
开发资源
API 指南：HTML5+ 规范
HelloH5+示例应用程序，该应用程序包含几乎所有plusAPI示例：
获取HelloH5+源码，在HBuilder中新建一个联通App，选择HelloH5+。 您可以查看所有plusapi调用示例代码。
Hellomui 示例应用程序，一个美观且高性能的后端 UI 框架：
下载页面
高级教程
如果您想开发一款接近原生体验的应用，请访问以下教程：
三方培训
HTML5中国产业联盟内有专业的培训机构，为HTML5开发者提供DCloud产品培训。
详情请参阅专门文章
发行和货币化服务
当您的应用开发完成后，DCloud还提供发布平台，帮助开发者简单完成应用推广页面，参考#//ask.dcloud.net.cn/article/12936；
如果开发者还需要流量变现，DCloud提供了广告平台，开发者可以轻松地将广告集成到他们的应用程序中。 请参阅
最后祝您能够利用DCloud的免费工具快速完成自己的联通App，并获得更多的用户并实现盈利！
回答
如果您有兴趣，可以看看这些文章：
回顾 5+App 全局变量、常量、共享数据和跨 webview 参数。 针对APICloud虚假宣传plus.runtime.install在Android 9.0+上难以执行的解决方案，官网及媒体发表致歉声明。
