HTML5 Plus应用概述

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

HTML5 Plus规范

通过HTML5开发移动App时，会发现HTML5很多能力不具备。为弥补HTML5能力的不足，在W3C中国的指导下成立了HTML5中国产业联盟www.html5plus.org组织，推出HTML5+规范。目前该联盟已经挂靠在工信部信通院标准所下，相关标准已经成为行业标准。
HTML5+规范是一个开放规范，隶属于工信部，允许三方浏览器厂商或其他手机runtime制造商实现。
HTML5+扩展了JavaScript对象plus，使得js可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。
除了功能外，HTML5+很重要的特点是提供了原生的渲染能力，通过plus.webview、plus.nativeObj、plus.nativeUI，让开发者可以使用js来调用原生渲染能力，实现体验的大幅提升。
原生的api多达40万，HTML5+的封装并非把40万api都封装了一遍，而是分成了2个层面：

HTML5Plus规范：常用的扩展能力，比如二维码、语音输入，都封装到了规范中，同时实现了Android和iOS的解析引擎，使得开发者的代码编写一次，可跨平台运行。
Native.js是另一项创新技术。手机OS的原生API有四十多万，大量的API无法被HTML5使用。Native.js把几十万原生API映射成了js对象，通过js可以直接调ios和android的原生API。这部分就不再跨平台，写法分别是plus.ios和plus.android，比如调ios game center，或在android手机桌面创建快捷方式，这些都是平台专有的api。

Native.js的用法示例，var obj= plus.android.import("android.content.Intent");，将一个原生对象android.content.Intent映射为js对象obj，然后在js里操作obj对象的方法属性就可以了。
Native.js的详细教程可以参考：5+ App开发Native.js入门指南
在5+App里，同时包含了HTML5Plus规范和Native.js的实现，开发者可以在5+App里自由使用相关技术。

5+ App概念解析

首先开发者需要清楚你要做什么，是一个mobile web项目，运行在浏览器里？还是要做一个app，安装和运行在手机上？或者要把一个mobile web项目打包成app？

做一个mobile web项目
在这个模式下，开发者用不到HTML5Plus，使用标准的HTML5语法，运行在浏览器里。这不算5+ App。
此时开发者仍然可以使用HBuilder这个开发工具，新建项目时选择web项目。
开发者也仍然可以使用DCloud提供的mui开源框架，来简化ui的开发。
但这就是一个普通的web项目，b/s方式，不可脱线运行，不能调用HTML5Plus的增加api。
做一个正统的app
传统意义上的app，是c/s方式的，它的程序要安装和运行在手机上，不通过浏览器在线下载。
此时开发者在HBuilder里新建项目时，选择“移动App”。（HBuilderX里选择5+App）
在App项目下编写的HTML、js等文件，是会被打包到原生的安装包（Android是apk包、iOS是ipa包）里的。
此时本地的js和服务器通过ajax交互，由服务器按接口方式给出数据（一般是json），然后客户端的js文件解析json，并根据本地的业务逻辑来渲染页面和执行功能。
所以请不要在App项目中放置运行在服务器端的php等文件。
使用wap2app打包mobile web项目为app
如果开发者想把一个做好的mobile web站，方便快速的打包成app，那么要使用DCloud的wap2app框架。
在HBuilder中新建项目时，选wap2app项目，把mobile web站的url输入进去，参考框架的教程来配置。
wap2app不同于普通的web打包技术，wap2app可真正做达到原生应用的功能和性能体验。
具体教程另见：文档中心-wap2app，http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244
wap2app属于5+app，它底层也是强大的HTML5Plus规范和Native.js在支撑。
wap2app项目下的所有文件，也都是打包在本机运行的。
如果你想开发一次，全端覆盖，那么需要使用DCloud的另一个产品uni-app

HTML5+ 应用架构

HTML5+ 规范 API 及demo示例

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

开发环境HBuilder

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

平台支持

iOS 5.0及以上
Android 2.3及以上

手把手教你开发HelloWorld（重点，重点，重点，必须说三遍）

创建HelloWorld应用

启动HBuilder（下载地址：http://www.dcloud.io/）；
在菜单栏中选择“文件”-> “新建”->“移动App”（快捷键Ctrl+N A），打开“创建移动App”对话框，在应用名称中输入“HelloWorld”；
如果是HBuilderX，则新建项目时选5+App。
注意新建移动App需要联网分配一个appid，在真机联调、打包发行时都需要这个ID，所以不联网无法创建移动App。
创建完成后，会在项目管理器中显示新建的“HelloWorld”项目

manifest.json（超级重要的配置文件）

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

对于要打包的原生应用而言，其各种配置均在此处。具体配置教程见：Manifest.json文件配置，或者点击配置页面上的“manifest文件配置指南”链接。

配置链接：https://ask.dcloud.net.cn/article/94

配置如下：

概述

manifest.json文件是5+移动App的配置文件，用于指定应用的显示名称、图标、入口页面等信息。用户可通过HBuilder|HBuilderX的可视化界面视图进行配置，也可在源码视图中根据以下规范直接修改。
manifest.json文件根据w3c的webapp规范制定，plus节点下内容为HTML5 Plus扩展规范，其下包括iOS和Android子节点，内容来源分别为iOS和Android原生打包所要求的参数，用于对5+移动App打包为ipa或apk安装包进行配置。
uni-app项目的manifest.json规范参考：https://uniapp.dcloud.io/collocation/manifest

链接：https://uniapp.dcloud.io/collocation/manifest

属性	类型	描述
android	Object	Android 应用配置，详见: 完整 manifest.json
ios	Object	iOS 应用配置，详见: 完整 manifest.json
sdkConfigs	Object	SDK配置，仅打包生效详见
orientation	Array	重力感应、横竖屏配置，可取值："portrait-primary"：竖屏正方向；"portrait-secondary"：竖屏反方向；"landscape-primary"：横屏正方向；"landscape-secondary"：横屏反方向。

App SdkConfigs

三方原生SDK配置。三方SDK的使用需要向这些SDK提供商申请，并配置参数到此处。可在HBuilderX可视化界面（App SDK配置）输入配置，此配置仅云打包后生效，本地打包需自行在原生工程中配置。

属性	类型	描述
oauth	Object	授权登录，配置后可调用 uni.login 进行登录操作，目前支持的授权登录平台有：QQ、微信、新浪微博。
share	Object	分享，配置后可调用 uni.share 进行分享，目前支持QQ、微信、新浪微博等分享，具体配置详见。
push	Object	push配置，使用方式详见，目前支持：uniPush、个推、小米推送，注意App仅支持一种 push 方式，配置多个 push 无效，建议使用 uniPush，支持多厂商推送。
payment	Object	三方支付配置，配置后可调用 uni.payment 进行支付，目前支持微信支付、支付宝支付、苹果内购，具体配置详见。
statics	Object	统计配置，目前仅支付友盟统计，详见，在uni-app中只用 plus.statistic 进行调用。
speech	Object	语音识别配置，支持讯飞语音、百度语音，详见，在uni-app中只用 plus.speech 进行调用。
maps	Object	原生地图配置，目前仅支持高德地图，申请方式可参考：地图插件配置。

nvue

nvue 页面布局初始设置

属性	类型	描述
flex-direction	String	flex 成员项的排列方向，支持项，row：从左到右； row-reverse：从右到左；column：从上到下；column-reverse：与 column 相反，默认值 column。

h5

属性	类型	说明
title	String	页面标题，默认使用 manifest.json 的 name
template	String	index.html模板路径，相对于应用根目录，可定制生成的 html 代码。参考：自定义模板
router	Object	参考：router
async	Object	参考：async
devServer	Object	开发环境 server 配置，参考：devServer
publicPath	String	引用资源的地址前缀，仅发布时生效。参考：publicPath
sdkConfigs	String	SDK配置，例如地图... 参考：sdkConfigs
optimization	Object	打包优化配置（HBuilderX 2.1.5 以上支持），参考optimization

自定义模板

需要使用自定义模板的场景，通常有以下几种情况：

调整页面 head 中的 meta 配置
补充 SEO 相关的一些配置（仅首页）
加入百度统计等三方js

使用自定义模板时，1. 工程根目录下新建一个html文件；2. 复制下面的基本模板内容，到这个html文件，在此基础上修改meta和引入js；3. 在 `manifest.json->h5->template` 节点中关联这个html文件的路径。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title><%= htmlWebpackPlugin.options.title %></title><script>document.addEventListener('DOMContentLoaded', function() {document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'})</script><link rel="stylesheet" href="<%= BASE_URL %>static/index.css" /></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

在hello uni-app示例中有一个template.h5.html文件，即是此用途。

关于SEO的补充说明

H5平台是SPA单页应用，普通的SEO信息即加meta字段只能在，自定义的模板html里配置首页。

但SEO的时代在变，现在更有效的方式，是用uni-app同时发布一版百度小程序，这个搜索权重更高。DCloud的ask社区的H5版也是uni-app做的，同时发布了百度小程序，权重更高，每天来自百度的搜索量非常多。是一个可现身说法的好案例。

router

属性	类型	默认值	说明
mode	String	hash	路由跳转模式，支持 hash、history
base	String	/	应用基础路径，例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

注意：history 模式发行需要后台配置支持，详见：history 模式的后端配置

async

属性	类型	默认值	说明
loading	String	AsyncLoading	页面 js 加载时使用的组件（需注册为全局组件）
error	String	AsyncError	页面 js 加载失败时使用的组件（需注册为全局组件）
delay	Number	200	展示 loading 加载组件的延时时间（页面 js 若在 delay 时间内加载完成，则不会显示 loading 组件）
timeout	Number	3000	页面 js 加载超时时间（超时后展示 error 对应的组件）

devServer

属性	类型	默认值	说明
https	Boolean	false	启用 https 协议
disableHostCheck	Boolean	false	禁用 Host 检查

Tips：`uni-app` 中 `manifest.json->h5->devServer` 实际上对应 `webpack` 的 devServer，鉴于 manifest 为 json 文件，故 `webpack.config.js->devServer` 配置项下的简单类型属性均可在`manifest.json->h5->devServer`节点下配置，funciton 等复杂类型暂不支持。

publicPath

配置 publicPath 为 cdn 资源地址前缀，这样编译出来的 html 文件，引用的 js，css 路径会自动变成 cdn 上的地址。

示例

以 hello-uniapp 发布 H5 时为例

未配置 publicPath 时，发布时 index.html 中的结果：

<script src=/h5/static/js/chunk-vendors.803ce52d.js></script>
<script src=/h5/static/js/index.34e8497d.js>

配置 publicPath 为 https://www.cdn.com/h5/（无效地址仅用作示例）后，发布时 index.html 中的结果：

<script src=https://www.cdn.com/h5/static/js/chunk-vendors.803ce52d.js></script>
<script src=https://www.cdn.com/h5/static/js/index.34e8497d.js>

注意

打包部署后，在服务器上开启 gzip 可以进一步压缩文件。具体的配置，可以参考网上的分享：https://juejin.im/post/5af003286fb9a07aac24611b

sdkconfig

示例

"h5": {"sdkConfigs": {"maps": {"qqmap": {//腾讯地图秘钥（key）"key": "XVXBZ-NDMC4-JOGUS-XGIEE-QVHDZ-AMFV2"}}}
}

optimization

属性	类型	默认值	说明
prefetch	Boolean	false	资源预取
preload	Boolean	false	资源预加载
treeShaking	Object		摇树优化，根据项目需求，动态打包框架所需的组件及API，保持框架代码最精简化，参考treeShaking

treeShaking

属性	类型	默认值	说明
enable	Boolean	false	是否启用摇树优化

示例：

"h5": {"optimization": {"treeShaking": {"enable": true}}
}

Tips：关于摇树优化（treeShaking）原理及优化结果，参考：https://ask.dcloud.net.cn/article/36279

mp-weixin

属性	类型	说明
appid	String	微信小程序的AppID，登录 https://mp.weixin.qq.com 申请
usingComponents	Boolean	是否启用自定义组件模式，`v1.8.0+`，默认为false，编译模式区别详情
setting	Object	微信小程序项目设置，参考setting
functionalPages	Boolean	微信小程序是否启用插件功能页，默认关闭
requiredBackgroundModes	Array	微信小程序需要在后台使用的能力,详见
plugins	Object	使用到的插件，详见
resizable	Boolean	在iPad上小程序是否支持屏幕旋转，默认关闭
navigateToMiniProgramAppIdList	Array	需要跳转的小程序列表，详见
permission	Object	微信小程序接口权限相关设置，比如申请位置权限必须填此处详见
workers	String	Worker 代码放置的目录。详见

setting

编译到微信小程序平台下的项目设置。

属性	类型	说明
urlCheck	Boolean	是否检查安全域名和 TLS 版本
es6	Boolean	ES6 转 ES5
postcss	Boolean	上传代码时样式是否自动补全
minified	Boolean	上传代码时是否自动压缩

mp-alipay

属性	类型	说明
usingComponents	Boolean	是否启用自定义组件模式，`v2.0+`，默认为false，编译模式区别详情

mp-baidu

属性	类型	说明
appid	String	百度小程序的 AppID，登录 https://smartprogram.baidu.com/docs/introduction/enter_application/ 申请
usingComponents	Boolean	是否启用自定义组件模式，`v2.0+`，默认为false，编译模式区别详情
requiredBackgroundModes	Array	小程序需要在后台使用的能力，目前支持背景音频播放，"requiredBackgroundModes": ["audio"]，详见
prefetches	Array	预请求的所有url的列表，详见

mp-toutiao

属性	类型	说明
appid	String	头条小程序的 AppID，登录 https://developer.toutiao.com/ 申请
setting	Object	头条小程序项目设置，参考头条小程序项目设置
usingComponents	Boolean	是否启用自定义组件模式，`v2.0+`，默认为false，编译模式区别详情
navigateToMiniProgramAppIdList	Array	需要跳转的小程序列表，详见

头条小程序项目设置

属性	类型	说明
urlCheck	Boolean	是否检查安全域名和 TLS 版本
es6	Boolean	ES6 转 ES5
postcss	Boolean	上传代码时样式是否自动补全
minified	Boolean	上传代码时是否自动压缩

mp-qq

属性	类型	说明
appid	String	qq 小程序的 AppID，登录 https://q.qq.com 申请
requiredBackgroundModes	Array	小程序需要在后台使用的能力，目前支持背景音频播放，"requiredBackgroundModes": ["audio"]，详见
navigateToMiniProgramAppIdList	Array	需要跳转的小程序列表，详见
permission	Object	小程序接口权限相关设置，比如申请位置权限必须填此处详见
workers	String	Worker 代码放置的目录。详见
groupIdList	String Array	需要打开群资料卡的群号列表，详见button的open-type

mp-qq只支持自定义组件模式，不存在usingComponents配置

完整 manifest.json （重点内容）

{"appid": "__UNI__XXXXXX，创建应用时云端分配的，不要修改。","name": "应用名称，如uni-app","description": "应用描述","versionName": "1.0.0","versionCode": "100",// app-plus 节点是 5+App 特有配置，推荐在 HBuilderX 的 manifest.json 可视化界面操作完成配置。"app-plus": {// HBuilderX->manifest.json->模块权限配置"modules": {"Contacts": {},"Fingerprint": {},"Maps": {},"Messaging": {},"OAuth": {},"Payment": {},"Push": {},"Share": {},"Speech": {},"Statistic": {},"VideoPlayer": {},"LivePusher": {}},"distribute": {// Android 与 iOS 证书相关信息均在打包时完成配置"android": {"packagename": "Android应用包名，如io.dcloud.uniapp","keystore": "Android应用打包使用的密钥库文件","password": "Android应用打包使用密钥库中证书的密码","aliasname": "Android应用打包使用密钥库中证书的别名","schemes": ["应用支持的scheme，大小写相关，推荐使用小写"],"theme": "程序使用的主题","android:name": "自定义程序入口类名","custompermissions": "Boolean类型，是否自定义android权限，true表示自定义权限，只使用permissions下指定的android权限，不根据用户使用的5+模块自动添加android权限，false表示自动根据用户使用的5+模块自动添加android权限","permissions": ["要添加的额外的android权限，如<uses-permission android:name=\"com.android.launcher.permission.INSTALL_SHORTCUT\" />","<uses-permission android:name=\"com.android.launcher.permission.UNINSTALL_SHORTCUT\" />"],"minSdkVersion": "apk支持的最低版本，默认值为14","targetSdkVersion": "apk的目标版本，默认值为21"},"ios": {"appid": "iOS应用标识，苹果开发网站申请的appid，如io.dcloud.uniapp","mobileprovision": "iOS应用打包配置文件","password": "iOS应用打包个人证书导入密码","p12": "iOS应用打包个人证书，打包配置文件关联的个人证书","devices": "iOS应用支持的设备类型，可取值iphone/ipad/universal","urltypes": [{"urlschemes": ["hbuilder","必选，程序所支持的自定义协议名称"],"id": "可选，自定义协议的标识","icon": "可选，打开程序时显示的图标"},{"urlschemes": ["http","https","必选，程序所支持的自定义协议名称，大小写无关，推荐使用小写"],"id": "可选，自定义协议的标识","icon": "可选，打开程序时显示的图标"}],"frameworks": ["使用native.js调用API要引用的库文件名称，如CoreLocation.framework", "QuartzCore.framework"],"idfa": "true|false，是否使用广告标识符，默认值为false","plistcmds": ["Set :权限 使用权限的原因","Set :NSCameraUsageDescription 说明使用用户相机的原因"]},// HBuilderX->manifest.json->SDK配置"sdkConfigs": {"maps": {// 地图只能选一个，这里选的是百度。"baidu": {"appkey_ios": "","appkey_android": ""}},"oauth": {// 微信登录"weixin": {"appid": "","appsecret": ""},// QQ登录"qq": {"appid": ""},// 新浪微博登录"sina": {"appkey": "","appsecret": "","redirect_uri": ""},// 小米登录"xiaomi": {"appid_ios": "","appsecret_ios": "","redirect_uri_ios": "","appid_android": "","appsecret_android": "","redirect_uri_android": ""}},"payment": {// Apple应用内支付"appleiap": {},// 支付宝支付"alipay": {"scheme": ""},// 微信支付"weixin": {"appid": ""}},"push": {// 推送只能选择一个，这里选的是个推。"igexin": {"appid": "","appkey": "","appsecret": ""}},"share": {// 微信分享"weixin": {"appid": ""},// 新浪微博分享"sina": {"appkey": "","appsecret": "","redirect_uri": ""},// 分享到QQ"qq": {"appid": ""}},"statics": {// 友盟统计"umeng": {"appkey_ios": "","channelid_ios": "","appkey_android": "","channelid_android": ""}}},// 屏幕方向"orientation": ["portrait-primary","landscape-primary","portrait-secondary","landscape-secondary"],// HBuilderX->manifest.json->图标配置"icons": {"ios": {"appstore": "必选, 1024x1024, 提交app sotre使用的图标","iphone": {"app@2x": "可选，120x120，iOS7-11程序图标（iPhone4S/5/6/7/8）","app@3x": "可选，180x180，iOS7-11程序图标（iPhone6plus/7plus/8plus/X）","spotlight@2x": "可选，80x80，iOS7-11 Spotlight搜索图标（iPhone5/6/7/8）","spotlight@3x": "可选，120x120，iOS7-11 Spotlight搜索图标（iPhone6plus/7plus/8plus/X）","settings@2x": "可选，58x58，iOS5-11 Settings设置图标（iPhone5/6/7/8）","settings@3x": "可选，87x87，iOS5-11 Settings设置图标（iPhone6plus/7plus/8plus/X）","notification@2x": "可选，40x40，iOS7-11 通知栏图标（iPhone5/6/7/8）","notification@3x": "可选，60x60，iOS7-11 通知栏图标（iPhone6plus/7plus/8plus/X）"},"ipad": {"app": "可选，76x76，iOS7-11程序图标","app@2x": "可选，152x152，iOS7-11程序图标（高分屏）","proapp@2x": "可选，167x167，iOS9-11程序图标（iPad Pro）","spotlight": "可选，40x40，iOS7-11 Spotlight搜索图标","spotlight@2x": "可选，80x80，iOS7-11 Spotlight搜索图标（高分屏）","settings": "可选，29x29，iOS5-11 设置图标","settings@2x": "可选，58x58，iOS5-11 设置图标（高分屏）","notification": "可选，20x20，iOS7-11 通知栏图标","notification@2x": "可选，40x40，iOS7-11 通知栏图标（高分屏）"}},"android": {"mdpi": "必选，48x48，普通屏程序图标","ldpi": "必选，48x48，大屏程序图标","hdpi": "必选，72x72，高分屏程序图标","xhdpi": "必选，96x96，720P高分屏程序图标","xxhdpi": "必选，144x144，1080P高分屏程序图标","xxxhdpi": "可选，192x192"}},// HBuilderX->manifest.json->启动图配置"splashscreen": {"ios": {"iphone": {"retina35": "可选，640x960，3.5英寸设备(iPhone4)启动图片","retina40": "可选，640x1136，4.0英寸设备(iPhone5)启动图片","retina40l": "可选，1136x640，4.0英寸设备(iPhone5)横屏启动图片","retina47": "可选，750x1334，4.7英寸设备（iPhone6）启动图片","retina47l": "可选，1334x750，4.7英寸设备（iPhone6）横屏启动图片","retina55": "可选，1242x2208，5.5英寸设备（iPhone6Plus）启动图片","retina55l": "可选，2208x1242，5.5英寸设备（iPhone6Plus）横屏启动图片","iphonex": "可选，1125x2436，iPhoneX启动图片","iphonexl": "可选，2436x1125，iPhoneX横屏启动图片"},"ipad": {"portrait": "可选，768x1004，需支持iPad时必选，iPad竖屏启动图片","portrait-retina": "可选，1536x2008，需支持iPad时必选，iPad高分屏竖屏图片","landscape": "可选，1024x748，需支持iPad时必选，iPad横屏启动图片","landscape-retina": "可选，2048x1496，需支持iPad时必选，iPad高分屏横屏启动图片","portrait7": "可选，768x1024，需支持iPad iOS7时必选，iPad竖屏启动图片","portrait-retina7": "可选，1536x2048，需支持iPad iOS7时必选，iPad高分屏竖屏图片","landscape7": "可选，1024x768，需支持iPad iOS7时必选，iPad横屏启动图片","landscape-retina7": "可选，2048x1536，需支持iPad iOS7时必选，iPad高分屏横屏启动图片"}},"android": {"mdpi": "必选，240x282，普通屏启动图片","ldpi": "必选，320x442，大屏启动图片","hdpi": "必选，480x762，高分屏启动图片","xhdpi": "必选，720x1242，720P高分屏启动图片","xxhdpi": "必选，1080x1882，1080P高分屏启动图片"}}},// HBuilderX->manifest.json->启动图配置->启动界面选项"splashscreen": {"waiting": true,"autoclose": true,"delay": 0},"error": {"url": "页面加载错误时打开的页面地址，可以是网络地址，也可以是本地地址"},"useragent": {"value": "自定义ua字符串","concatenate": "是否为追加模式"},"useragent_ios": {"value": "与useragent的value一致，仅在iOS平台生效，当useragent和useragent_ios同时存在时优先级useragent_ios>useragent","concatenate": "与useragent的concatenate一致，仅iOS平台生效"},"useragent_android": {"value": "与useragent的value一致，仅在Android平台生效，当useragent和useragent_android同时存在时优先级useragent_android>useragent","concatenate": "与useragent的concatenate一致，仅Android平台生效"},"ssl": "accept|refuse|warning，访问https网络时对非受信证书的处理逻辑","runmode": "normal","appWhitelist": ["Android平台下载apk地址白名单列表","iOS平台跳转appstore地址白名单列表"],"schemeWhitelist": ["URL Scheme白名单列表，如：mqq" //iOS要求预先指定要打开的App名单，不能随意调用任何App],"channel": "渠道标记，可在DCloud开发者中心查看各渠道应用的统计数据","adid": "广告联盟会员id，在DCloud开发者中心申请后填写","safearea": { //安全区域配置，仅iOS平台生效  "background": "#CCCCCC", //安全区域外的背景颜色，默认值为"#FFFFFF"  "bottom": { // 底部安全区域配置  "offset": "none|auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"  },"left": { //左侧安全区域配置（横屏显示时有效）  "offset": "none|auto"},"right": { //右侧安全区域配置（横屏显示时有效）  "offset": "none|auto"}},"softinput": {"navBar": "auto", //是否显示iOS软键盘上的“完成”导航条"mode": "adjustResize|adjustPan" //软键盘弹出模式，},"popGesture": "none" //iOS上是否支持屏幕左边滑动关闭当前页面。默认是可关闭。设为none则不响应左滑动画。},// 快应用特有配置"quickapp": {},// 微信小程序特有配置"mp-weixin": {"appid": "wx开头的微信小程序appid"},// 百度小程序特有配置"mp-baidu": {"appid": "百度小程序appid"},// 头条小程序特有配置"mp-toutiao": {"appid": "头条小程序appid"},"h5": {"title": "演示", //页面标题，默认使用 manifest.json 的 name"template": "index.html", //index.html模板路径，相对于应用根目录，可定制生成的 html 代码"router": {"mode": "history", //路由跳转模式，支持 hash|history ,默认 hash"base": "/hello/" //应用基础路径，例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"},"async": { //页面js异步加载配置"loading": "AsyncLoading", //页面js加载时使用的组件（需注册为全局组件）"error": "AsyncError", //页面js加载失败时使用的组件（需注册为全局组件）"delay": 200, //展示 loading 加载组件的延时时间（页面 js 若在 delay 时间内加载完成，则不会显示 loading 组件）"timeout": 3000 //页面js加载超时时间（超时后展示 error 对应的组件）}}
}

更多配置相关的说明，请参考 manifest.json文档说明中的描述。可能节点的位置与普通的 5+App 有差异，请按照配置的名称进行对应。

FAQ

Q：iOS 应用调用相机等权限时，弹出的提示语如何修改？
A：在 manifest.json 可视化界面-App模块权限配置-iOS隐私信息访问的许可描述

manifest.json

以下是完整的manifest.json配置文件，在HBuilder|HBuilderX中切换到“源码视图”按以下规范进行手动配置。

复制代码

{ "id": "H512345", //必填 "name": "应用名称", //必填 "version": { "name": "1.0", //必填，推荐使用.分割，如1.0 "code": "10" //必填，纯数字 }, "launch_path": "入口页面", //必填 "description": "应用描述信息", //可选 "icons": { //可选，以分辨率为索引键名 "72": "图标路径" }, "developer": { //选填，开发者信息 "name": "开发者名称", "email": "开发者邮箱地址", "url": "开发者网站" }, "screenOrientation": [ //应用支持的屏幕方向 "portrait-primary", //竖屏 "portrait-secondary", //竖屏（反向），上下颠倒 "landscape-primary", //横屏，Home键在右侧 "landscape-secondary" //横屏（反向），Home键在左侧 ], "permissions": { //5+模块，uni-app项目对应节点为"app-plus" -> "modules" "Accelerometer": { "description": "加速度传感器" } }, "plus": { // 5+扩展配置, uni-app项目对应节点为"app-plus" "allowsInlineMediaPlayback":"true|false", //可选，是否允许video标签非全屏播放 "appWhitelist": [ //可选，应用白名单列表（Android平台为apk下载地址，iOS平台为appstore地址） ], "arguments": "", //可选，预设应用的启动参数 "cache": { //可选，缓存配置 }, "cers": { //可选，异常错误反馈配置 }, "channel": "", //可选，渠道信息 "confusion": { //可选，原生js文件混淆配置 }, "distribute": { //必选，云端打包配置 }, "error": { //可选，错误页面配置 }, "locales": { //可选，国际化配置 } "nativePlugins": { //可选，原生插件相关配置 }, "popGesture": "none|close|hide", //可选，侧滑返回功能配置 "kernel": { //可选，Webview渲染内核配置 }, "runmode": "normal|liberate", //可选，运行模式 "safearea": { //可选，安全区域配置 }, "schemeWhitelist":[ //可选，Scheme白名单列表 ], "splashscreen": { //可选，splash界面配置 }, "ssl": { //可选，SSL配置 }, "softinput": { //可选，软键盘配置 }, "statusbar": { //可选，系统状态栏配置 }, "useragent": { //可选，UA配置 },

"launchwebview": {   //可选，应用首页配置
        },
        "secondwebview": {   //可选，应用双首页配置
        },
        "uni-app": {        //可选，uni-app应用的配置
        },
        "compatible": {      //可选，编译器兼容性配置
        },
        "wap2app": {         //可选，wap2app相关配置
        },
    }
}

应用标识（AppID），在可视化“基础配置”项中。
更多信息参考DCloud AppID使用说明。

name

应用名称，打包为apk/ipa安装到手机上显示的名称。

version

应用版本信息，包括版本名称和版本号。

name
版本名称，字符串类型，用于显示的版本字符串。可通过5+API plus.runtime.version获取版本名称。
本地离线打包配置：Android平台，iOS平台。
code
版本号，数字类型（正整数），操作系统使用，新版本的值要大于老版本，否则无法正常安装。可通过5+API plus.runtiem.versionCode获取版本号。
本地离线打包配置：Android平台，iOS平台

launch_path

应用入口页面（首页）地址，相对于应用资源根目录（默认为根目录的index.html）。也可以是网络地址（需以http/https开头）。

description

应用描述信息。

icons

应用的图片配置（暂未使用）。

developer

开发者信息，可选内容。

name
开发者名称
email
开发者邮箱地址
url
开发者网站地址

screenOrientation

应用支持的屏幕方向，字符串数组类型，配置需要支持的方向，可取值：

portrait-primary
竖屏
portrait-secondary
竖屏（反向），山下颠倒
landscape-primary
横屏，Home键在右侧
landscape-secondary
横屏（反向），Home键在左侧

permissions

要使用的模块配置，不要手动修改，应该在HBuilderX中manifest.json的可视化界面“(App)模块权限配置”项的“打包模块配置”下勾选

支持以下模块：

模块标识	模块名称
Bluetooth	低功耗蓝牙
Contacts	通讯录
Fingerprint	指纹识别
iBeacon	iBeacon
LivePusher	直播推流
Maps	地图
Messaging	短彩信、邮件
OAuth	登录鉴权
Payment	支付
Push	消息推送
Speech	语言识别
Statistic	统计
SQLite	数据库
VideoPlayer	视频播放

plus

5+扩展配置，uni-app项目对应为"app-plus"节点

allowsInlineMediaPlayback

是否允许html页面中video标签非全屏播放，仅iOS平台有效
Boolean类型，值为true表示允许，false表示不允许，默认值为不允许。
html页面的video标签必须添加webkit-playsinline属性才支持非全屏播放，如下示例：

复制代码

`<video controls="controls" src="http://.../x.mp4" webkit-playsinline>`

此配置与VideoPlayer（视频播放）控件功能无关

appWhitelist

应用中可直接安装原生应用的白名单地址（url）。

Android平台
url地址如果是下载apk的链接，不在此白名单列表中的url下载apk将会被拦截（弹出toast提示“当前环境不支持下载未许可的apk文件”）
iOS平台
url地址如果是跳转到appstore，不在此白名单列表中的url跳转将会被拦截（弹出toast提示“当前环境不支持下载未许可的应用”）

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "appWhitelist":[ "http://www.dcloud.io/streamapp/streamapp.apk", "itms://itunes.apple.com/cn/app/liu-ying-yong/id793135951" ], // ... }

以上白名单机制仅在流应用环境中限制，发布为独立App时忽略此配置

arguments

应用启动时的5+默认参数
String类型，可选。
在5+中可通过plus.runtime.arguments获取，如果外部调用应用时传入了参数，则覆盖此默认参数。

cache

应用的缓存配置信息，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "cache":{ "mode": "" }, // ... }

mode
Webview窗口默认使用的缓存模式，可取值：

"default"
根据cache-control决定是否使用缓存数据，如果存在缓存并且没有过期则使用本地缓存资源，否则从网络获取；
"cacheElseNetwork"
只要存在缓存（即使过期）数据则使用，否则从网络获取；
"noCache"
不使用缓存数据，全部从网络获取；
"cacheOnly"
仅使用缓存数据，不从网络获取（注：如果没有缓存数据则会导致加载失败）。

默认为"default"。

cers

应用的异常崩溃与错误报告系统配置信息，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "cers":{ "crash": "" }, // ... }

crash
是否提交程序异常崩溃信息。
Boolean类型，true表示提交，false表示不提交，默认值为true。

channel

渠道标记，字符串类型。

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "channel": "google", // ... }

注意：不要直接修改此配置，参考渠道包打包配置教程

confusion

应用的JS文件原生混淆配置

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "confusion": { "description": "JS原生混淆", "resources": { "js/common.js": { }, "js/immersed.js": { } } }, // ... }

description
原生混淆配置描述信息
resources
要混淆的JS文件列表，JSON对象，以要混淆的js文件路径（相对路径）为键名，值为空JSON对象即可

注意：confusion节点是在plus节点之下，uni-app项目由于需要编译暂不支持原生混淆
iOS平台使用WKWebview不支持原生混淆，HBuilderX2.2.5（alpha）版本开始调整默认使用WKWebview，使用WKWebview时云端打包将忽略原生混淆配置（即不混淆）

error

定义窗口加载错误时的处理逻辑，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "error":{ "url": "本地错误页面地址" }, // ... }

url
窗口加载错误时（如本地页面不存在，或者无法访问的网络地址）跳转的页面地址，仅支持本地页面地址。设置为“none”则关闭跳转到错误页面功能，此时页面显示Webview默认的错误页面内容。默认使用5+ Runtime内置的错误页。

locales

云端打包国际化配置，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "locales":{ "zh": {//中文（简体） "name": "应用名称", "ios": { "privacyDescription": { } } }, "zh-TW": {//中文繁体（台湾） }, "zh-HK": {//中文繁体（香港） }, "en": { } }, // ... }

详细说明参考云端打包配置国际化

nativePlugins

uni原生插件配置，JSON对象数组

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "nativePlugins": [ { "%PluginID%": { } } ], // ... }

注意：不要直接修改此配置，推荐在HBuilderX的可视化界面中操作
使用云端uni原生插件参考：https://ask.dcloud.net.cn/article/35412
使用本地uni原生插件参考：https://ask.dcloud.net.cn/article/35844

popGesture

应用中Webview窗口侧滑返回功能的默认效果，字符串类型

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "popGesture": "none", // ... }

可取以下值：

"none"
默认Webview窗口无侧滑返回功能，侧滑时无任何响应
"close"
默认webview窗口侧滑返回关闭，用户侧滑后窗口自动关闭，关闭窗口的逻辑与调用 close()方法一致。
"hide"
默认webview窗口侧滑返回隐藏，即用户侧滑后窗口自动隐藏，隐藏窗口的逻辑与调用其hide()方法一致。

默认值为"none"。manifest.json中配置的为默认项，在应用中可以通过WebviewStyles的popGesture属性动态修改。
注意：Android平台仅在流应用环境下支持侧滑返回。

kernel

Webview窗口使用的内核，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "kernel": { "ios": "WKWebview", "recovery": "restart|reload|none" }, // ... }

ios

iOS平台Webview窗口默认使用的内核，可取值：

"WKWebview"
iOS8.0及以上系统默认使用WKWebview内核
"UIWebview"
使用UIWebview内核

默认值为UIWebview。
HBuilderX2.2.5（alpha）版本开始调整默认为WKWebview

recovery

Webview内核崩溃后的恢复处理逻辑，仅iOS平台非uni-app项目使用WKWebview内核时生效，uni-app项目可自动恢复（推荐转换为uni-app项目）。
当WKWebview崩溃后，Webview页面的JS上下文将丢失，也无法渲染DOM内容（白屏）
可配置以下值：

"restart"
重启应用，关闭所有页面重新打开应用首页，可通过（plus.runtime.isRecovery）来判断应用是否恢复重启
"reload"
重新加载当前WKWebview（崩溃的WKWebview）页面，页面中JS上下文中所有数据丢失，在当前Webview中可通过plus.webview.isRecovery判断是否恢复重新加载，在其它Webview中可监听recovery事件来判断
"none"
不做任何操作

创建Webview窗口时可设置kernelRecovery属性单独设置某个窗口的恢复处理逻辑

runmode

应用的运行模式，字符串类型

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "runmode": "liberate" // ... }

可取值：

"normal"
正常运行模式。
"liberate"
释放资源运行模式，应用在第一次启动时将解压自带资源到SDcard，正常情况不推荐使用该模式。该模式的缺点：第一次启动更慢，耗费时间先解压、容易被三方清理软件清理。该模式有用的场景：此模式下File API才可正常访问_www应用资源，以及在某些Android rom访问本地页面时url地址中包含？带参数，但不推荐使用这种跨页传参方式，推荐使用其他方式跨页传参http://ask.dcloud.net.cn/article/288。
注意：wap2app 应用固定为 liberate，不支持自定义。

safearea

iOS刘海屏设备（iPhoneX）的安全区域配置

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "safearea": { "background":"#CCCCCC", "bottom":{ "offset":"auto" }, "left": { "offset":"auto" }, "right: { "offset":"auto" } }, // ... }

background

安全区域外的背景颜色，默认值为"#FFFFFF"

bottom

底部安全区域配置，包括以下属性

offset
底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"

left

左侧安全区域配置（横屏显示时有效），包含的属性与bottom一致。

right

右侧安全区域配置（横屏显示时有效），包含的属性与bottom一致。

schemeWhitelist

配置应用中URL Scheme白名单（非http、https、file），字符串数组

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "schemeWhitelist": [ "streamapp" ], // ... }

仅允许白名单中的scheme跳转，不在白名单中URL Scheme链接将会被拦截（拦截后不做任何处理）。
默认白名单为：
'sms', 'tel', 'mailto', 'callto', 'weixin', 'alipay', 'alipays', 'alipayqr', 'weibo', 'mqq', 'mqqapi', 'qqmap', 'baidumap', 'amap', 'iosamap', 'streamapp'
iOS默认白名单还包括"itms"等跳转appstore。

splashscreen

程序启动界面配置信息，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "splashscreen": { "autoclose": "false", "event": "loaded", "target": "default", "waiting": "true", "delay": "500", "ads": { "background": "#FFFFFF", "image": "logo.png" } }, // ... }

包括以下字段：

autoclose
是否自动关闭程序启动界面，布尔类型。
默认为true，即自动关闭程序启动界面，否则需要在应用中显式调用plus.navigator.closeSplashscreen方法来关闭。
event
触发自动关闭splash界面的事件类型，字符串类型，可取值：
"titleUpdate"表示当首页Webview的titleUpdate事件触发时自动关闭splash界面；
"rendering"表示当首页Webview的rendering事件触发时自动关闭splash界面；
"loaded"：表示当首页Webview的loaded事件触发时自动关闭splash界面。
默认值为loaded。
target
设置双首页模式下，定义目标webview触发event类型自动关闭splash界面，可取值：
"default"根据首页Webview的event事件关闭splash；
"second"：根据第二个首页Webview的event事件关闭splash。
默认值为"default"。
waiting
是否在程序启动界面显示等待雪花，布尔类型。
默认为false，即不显示等待雪花。
delay
启动界面在应用的首页面加载完毕后延迟关闭的时间，单位为毫秒，数字类型。
默认不延迟，即首页面加载完毕后立即关闭。
ads
开屏广告配置信息，JSON格式对象
包括以下属性：
background：设置背景颜色
image：设置底部图片地址，相对应用资源目录路径，不支持网络地址，建议分辨率720x256（要求png格式，背景透明，留出边距，在不同分辨率手机上会自动等比例缩放处理）

ssl

应用ssl相关设置

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "ssl": { "untrustedca": "accept|refuse|warning" }, // ... }

包括以下字段：

untrustedca
配置应用中https请求时，如果服务器返回非受信证书的处理逻辑，字符串类型，可取值：
"accept" - 接受此非受信证书，继续访问；
"refuse" - 拒绝此非受信证书，停止访问；
"warning" - 弹出警告提示框提醒用户，由用户确定是否继续访问。
默认值为"accept"。

softinput

软键盘相关配置，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "softinput": { "navBar": "auto|none", "auxiliary": true|false, "mode": "adjustResize|adjustPan" }, // ... }

包括以下字段：

navBar
软键盘上导航条的显示模式，字符串类型（仅iOS平台支持）：
"auto" - 表示系统默认值（即显示导航条）；
"none" - 表示不显示。
默认值为"auto"。
auxiliary
是否开启辅助输入功能，Boolean类型
true表示开启，false表示关闭，默认值为true。
mode
弹出系统软键盘模式，字符串类型，可取值：
"adjustResize" - 表示弹出软键盘时自动调整窗口大小；
"adjustPan" - 表示弹出软键盘时自动移动滚动窗口使得输入框可见（Android平台可能会出现软键盘盖住输入框的情况）。
默认值为"ajustResize"。

iOS平台可通过WebviewStyles的softinputMode属性对单个窗口进行控制

statusbar

应用启动后的系统状态栏样式，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "statusbar": { "immersed": "none|suggestedDevice|supportedDevice", "style": "dark|light", "background": "#RRGGBB" }, // ... }

包括以下字段：

immersed
定义应用是否使用沉浸式状态栏样式，String类型，可取值：
"none" - 非沉浸式状态栏样式；
"suggestedDevice" - 沉浸式状态栏，仅在支持设置状态栏前景色样式的设备上生效（Android5.0的小米&魅族、Android6.0及以上，iOS在所有设备上生效）；
"supportedDevice" - 沉浸式状态栏，在所有支持沉浸式状态栏设备上生效（与之前的true一致，Android4.4及以上）。
默认值为"false"。
-style
系统状态栏样式（前景颜色），字符串类型，可取以下值：
"dark" - 深色前景色样式（即状态栏前景文字为黑色），此时background建议设置为浅颜色；
"light" - 浅色前景色样式（即状态栏前景文字为白色），此时background建设设置为深颜色。
可通过plus.navigator.setStatusBarStyle()动态调整。注：Android5.0（小米&魅族）和Android6.0及以上系统支持，iOS7.0及以上系统支持
-background
系统状态栏背景颜色，字符串类型，#RRGGBB格式，颜色值格式为"#RRGGBB"，如"#FF0000"为红色。
默认使用系统样式，通常iOS平台默认为light样式；Android平台默认为dark（各ROM厂商存在差异）。
可通过plus.navigator.setStatusBarBackground()动态调整。
注：仅在immersed属性值设置为false时有效。

useragent(useragent_android/useragent_ios)

应用中http请求的userAgent信息，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "useragent": { "value": "要设置的默认userAgent值", "concatenate": "true|false" }, "useragent_android": { "value": "android平台要设置的默认userAgent值", "concatenate": "true|false" }, "useragent_ios": { "value": "ios平台要设置的默认userAgent值", "concatenate": "true|false" }, // ... }

包括以下字段：

value
自定义userAgent值，字符串类型
concatenate
是否将value值作为追加值连接到系统默认userAgent值之后，布尔类型：
"true" - 表示追加模式，若value不以空格字符开头，则在其前面自动添加空格字符；
"false" - 表示覆盖模式，即value值作为完整userAgent使用。
默认为false，即覆盖默认userAgent值。

useragent_android和useragent_ios分别配置对Android和iOS平台生效。
注：为了保证运行环境的一致性，建议concatenate设置为true。

launchwebview

应用首页Webview的配置信息，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "launchwebview": { "plusrequire": "ahead|normal|later|none", "injection": "true|false", "overrideresource": [{ "match":"区配拦截的资源url地址", "redirect":"拦截资源的重现向地址", "mime":"拦截资源的数据类型", "encoding":"拦截资源的数据编码", "header":"拦截资源的http头数据" }], "overrideurl": { "mode": "allow|reject，拦截模式", "match": "匹配拦截规则", "exclude": "none|redirect，排除拦截理规则" }, "replacewebapi": { "geolocation": "none|alldevice|auto, 重写标准定位API" }, "geolocation": "none|replace|auto, 重写标准定位API", "subNViews": [{ "id": "原生子View控件的标识", "styles": "JSON对象，原生子View控件样式", "tags": "JSON数组对象，原生子View控件上绘制的元素" }], "titleNView": { "backgroundColor": "#RRGGBB, 标题栏背景颜色", "titleText": "标题栏标题文字内容", "titleColor": "#RRGGBB, 标题栏标题文字颜色", "titleSize": "17px，标题字体大小，默认大小为17px", "autoBackButton": "true|false，是否显示标题栏上返回键", "backButton": "JSON对象，标题栏上返回键样式", "buttons": [{ "color": "按钮上的文字颜色", "colorPressed": "按钮按下状态的文字颜色", "float": "按钮在标题栏上的显示位置", "fontWeight": "按钮上文字的粗细", "fontSize": "按钮上文字的大小", "fontSrc": "按钮上文字使用的字体文件路径", "text": "按钮上显示的文字" }], "splitLine": "JSON对象，标题栏底部分割线样式" }, "statusbar": { "background": "#RRGGBB格式字符串，沉浸式状态栏样式下系统状态栏背景颜色" }, "top": "0px|10%，Webview的顶部偏移量", "height": "0px|10%，Webview窗口高度", "bottom": "0px|10%, Webview的底部偏移量，仅在未同时设置top和height属性时生效", "backButtonAutoControl": "none|hide|close，运行环境自动处理返回键的控制逻辑", "additionalHttpHeaders": "JSON数据，额外添加HTTP请求头数据" }, // ... }

包括以下字段：

overrideresource

配置应用首页的拦截资源请求处理逻辑，可包含多条配置项，json支持以下属性：

match
区配拦截的资源url地址，支持正则表达式，与WebviewOverrideResourceOptions的match属性功能一致；
redirect
拦截资源的重现向地址，仅支持本地资源地址，如"_www"、"_doc"、"_downloads"、"_documents"等开头的路径，与WebviewOverrideResourceOptions的redirect属性功能一致；
mime
拦截资源的数据类型，RFC2045/RFC2046/RFC2047/RFC2048/RFC2049规范中定义的数据类型，与WebviewOverrideResourceOptions的mime属性功能一致；
encoding
拦截资源的数据编码，默认值"UTF-8"，与WebviewOverrideResourceOptions的encoding属性功能一致；
header
拦截资源的http头数据，JSON格式数据，与WebviewOverrideResourceOptions的encoding属性功能一致；

**注：以上配置项与Webview的overrideResourceRequest方法作用一致，配置项可参考规范

overrideurl

配置应用首页的拦截链接请求处理逻辑，支持以下属性：

mode
拦截模式，可取值：
"allow" - 表示满足match属性定义的条件时不拦截url继续加载，不满足match属性定义的条件时拦截url跳转并触发callback回调；
"reject" - 表示满足match属性定义的提交时拦截url跳转并触发callback回调，不满足match属性定义的条件时不拦截url继续加载；
默认值为"reject"。
match
匹配拦截规则，支持正则表达式，默认值为对所有URL地址生效（相当于正则表达式“.*”）。
如果mode值为"allow"则允许区配的URL请求跳转，mode值为"reject"则拦截区配的URL请求。
exclude
排除拦截理规则，可取值：
"none" - 表示不排除任何URL请求（即拦截处理所有URL请求）；
"redirect" - 表示排除拦截处理301/302跳转的请求（谨慎使用，非a标签的href触发的URL请求可能会误判断为302跳转）；
默认值为"none"。

titleNView

配置应用首页的标题栏，配置此属性则首页显示标题栏，支持以下属性：

backgroundcolor
标题栏背景颜色，字符串类型，格式为“#RRGGBB”，默认值为灰黑色（#1B1A1F）
titletext
标题栏标题文字内容，默认值为当前加载页面的标题
titlecolor
标题栏标题文字颜色，字符串类型，格式为“#RRGGBB”，默认值为白色（#FFFFFF）

secondwebview

应用双首页模式配置，添加此字段则表明应用采用双首页模式运行，应用启动除了创建默认入口页外还创建第二个Webview，此字段配置第二个Webview的配置信息，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "secondwebview": { "launch_path": "加载页面地址", "id": "Webview窗口标识", "mode": "front|child|behind|parent，Webview显示模式", "top": "0px|10%，Webview的顶部偏移量", "height": "0px|10%，Webview窗口高度", "bottom": "0px|10%, Webview的底部偏移量", "plusrequire": "ahead|normal|later|none，控制JS注入时机", "injection": "true|false，是否提前注入js", "overrideresource": [{ "match":"区配拦截的资源url地址", "redirect":"拦截资源的重现向地址", "mime":"拦截资源的数据类型", "encoding":"拦截资源的数据编码", "header":"拦截资源的http头数据" }], "overrideurl": { "mode": "allow|reject，拦截模式", "match": "匹配拦截规则", "exclude": "none|redirect，排除拦截理规则" }, "replacewebapi": { "geolocation": "none|alldevice|auto, 重写标准定位API" }, "geolocation": "none|replace|auto, 重写标准定位API", "subNViews": [{ "id": "原生子View控件的标识", "styles": "JSON对象，原生子View控件样式", "tags": "JSON数组对象，原生子View控件上绘制的元素" }], "titleNView": { "backgroundColor": "#RRGGBB, 标题栏背景颜色", "titleText": "标题栏标题文字内容", "titleColor": "#RRGGBB, 标题栏标题文字颜色", "titleSize": "17px，标题字体大小，默认大小为17px", "autoBackButton": "true|false，是否显示标题栏上返回键", "backButton": "JSON对象，标题栏上返回键样式", "buttons": [{ "color": "按钮上的文字颜色", "colorPressed": "按钮按下状态的文字颜色", "float": "按钮在标题栏上的显示位置", "fontWeight": "按钮上文字的粗细", "fontSize": "按钮上文字的大小", "fontSrc": "按钮上文字使用的字体文件路径", "text": "按钮上显示的文字" }], "splitLine": "JSON对象，标题栏底部分割线样式" }, "statusbar": { "background": "#RRGGBB格式字符串，沉浸式状态栏样式下系统状态栏背景颜色" }, "backButtonAutoControl": "none|hide|close，运行环境自动处理返回键的控制逻辑", "additionalHttpHeaders": "JSON数据，额外添加HTTP请求头数据" }, // ... }

包括以下字段：

launch_path

第二个Webview窗口加载的页面地址，支持网络地址和本地地址

第二个Webview窗口标识，默认值为%APPID%__second

mode

第二个Webview窗口显示模式，可取值：

child
表示作为launchwebview的子窗口
front
表示与launchwebview平级并在其前显示
behind
表示与launchwebview平级并在其后显示
默认值为"front"。

top

第二个Webview窗口的顶部偏移量
可取值像素值或百分比，如"0px"、"10%"。

height"

第二个Webview窗口的高度
可取值像素值或百分比，如"0px"、"50%"。

bottom

第二个Webview窗口的底部偏移量
可取值像素值或百分比，如"0px"、"10%"。

其它属性与launchwebview下一致

uni-app

仅uni-app项目生效
uni-app应用的配置，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "uni-app": { "nvue": { "flex-direction": "row|row-reverse|column|column-reverse" } }, // ... }

包括以下字段：

nvue

nvue页面的flex-direction默认值，字符串类型，可取值：
"row"、"row-reverse"、"column"、"column-reverse"
默认值为"row"。

compatible

仅uni-app项目生效
uni-app应用兼容性配置，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "compatible": { "ignoreVersion": true, "runtimeVersion": "兼容的uni-app运行环境版本号，多个版本使用,分割", "compilerVersion": "兼容的编译器版本号" }, // ... }

当uni-app运行环境与编译环境不一致时，会弹出可能存在兼容性问题的提示框。
详细描述参考：https://ask.dcloud.net.cn/article/35627

wap2app

wap2app应用配置，JSON格式对象

复制代码

"plus": { //uni-app项目对应节点名称为"app-plus" "wap2app": { "launchError": "tip|none" }, // ... }

包括以下字段：

launchError

应用首页加载错误处理逻辑，"tip"表示弹出提示框（无法连接服务器,请检查网络设置），"none"表示不处理（跳转到错误页面），默认值为"tip"。

plus->distribute

云端打包配置项，uni-app项目对应为"app-plus" -> "distribute"节点

复制代码

"plus": { "distribute": { "debug": "true|false，是否开启调试功能", "syncDebug": "true|false, 是否为真机运行基座", "apple": { "appid": "", //iOS包名（Bundle ID） "mobileprovision": "", //iOS打包使用的profile文件 "password": "", //iOS打包使用的证书密码 "p12": "", //iOS打包使用的证书 "devices": "iphone|ipad|universal", //iOS支持的设备类型 "urlschemewhitelist": [ //iOS平台应用访问白名单 "" ], "UIBackgroundModes": ["audio","location"],//iOS应用后台运行模式 "urltypes": [ //iOS平台url scheme配置 ], "frameworks": [ //iOS平台依赖的系统库 "CoreLocation.framework" ], "deploymentTarget": "9.0", //iOS支持的最低版本 "privacyDescription": { //iOS隐私描述 } "idfa":"true|false", //是否使用广告标识符，默认值为false "capabilities": { //应用的能力配置（Capabilities） } }, "google":{ "packagename":"", //Android包名 "keystore":"", //Android签名证书 "password":"", //Android签名证书密码 "aliasname":"", //Android签名证书别名 "locale": "default", //应用的语言，默认值为default（系统语言），如en_US表示使用英语（美国） "schemes":[ //Android平台url scheme配置 ], "theme":"程序使用的主题", "abiFilters":[ //支持的CPU类型 "armeabi", "armeabi-v7a", "x86" ], "custompermissions":"true|false", "permissions":[ //Android平台使用的权限 "" ], "permissionPhoneState": { //Android平台读取设备信息权限配置 "request": "always|once|none", //申请权限策略 "prompt": "" //用户拒绝时弹出提示框上的内容 }, "minSdkVersion":"apk支持的最低版本", //Android平台最低版本 "targetSdkVersion":"apk的目标版本" //Android平台目标版本 }, "icons":{ //应用图标配置 }, "splashscreen":{ //应用启动图片配置 }, "plugins":{ // 第三方sdk配置 } } }

apple

iOS平台打包配置，uni-app项目对应为"app-plus" -> "distribute" -> "ios"节点

其中appid、mobileprovision、password、p12、devices为iOS打包基础配置，点击HBuilderX菜单的"发行" -> "原生App-云打包"打开的“App云端打包”中配置：

urlschemewhitelist

设置应用访问白名单，更多详情参考https://ask.dcloud.net.cn

UIBackgroundModes

应用后台运行模式配置，如后台播放音乐、后台定位等
后台音乐播放
后台获取位置信息
更多后台能力参考苹果官方文档

urltypes

iOS平台URL Schemes配置，更多详情参考https://ask.dcloud.net.cn/article/64

frameworks

设置应用要引用的系统库（framework），字符串数组。
在使用native.js时使用，通知App云端打包在编译应用时引用对于的系统framework库，以便native.js能成功调用其中的API。
如要调用苹果游戏相关API，则需要引用"GameKit.framework"。

deploymentTarget

设置应用支持的最低版本，可取值：

iOS8:
'8.0', '8.1', '8.2', '8.3', '8.4'
iOS9:
'9.0', '9.1', '9.2', '9.3'
iOS10:
'10.0', '10.1', '10.2', '10.3'
iOS11:
'11.0', '11.1', '11.2', '11.3', '11.4'
iOS12:
'12.0', '12.1', '12.2', '12.3', '12.4'
iOS13:
'13.0', '13.1'

privacyDescription

iOS平台隐私描述，请在HBuilderX的manifest.json可视化界面“（App）模块权限配置”中进行配置。

idfa

iOS平台应用是否使用IDFA（广告标识），更多详情参考https://ask.dcloud.net.cn/article/36107

capabilities

iOS平台打包时Capabilities配置，json类型数据，配置应用的capabilities数据（根据XCode规范分别配置到entitlements和plist文件中）

复制代码

"capabilities": { "entitlements": { // 合并到工程entitlements文件的数据（json格式） }, "plists": { // 合并到工程Info.plist文件的数据（json格式） } },

更多详情参考https://ask.dcloud.net.cn/article/36393

google

Android平台打包配置，uni-app项目对应为"app-plus" -> "distribute" -> "android"节点

其中packagename、keystore、password、aliasname为Android打包基础配置，点击HBuilderX菜单的"发行" -> "原生App-云打包"打开的“App云端打包”中设置：

schemes

Android平台URL Schemes配置，更多详情参考https://ask.dcloud.net.cn/article/409

theme

Android平台应用要使用的系统主题名称
更多详情参考Android配置应用主题皮肤

abiFilters

Android平台配置支持的CPU类型，更多详情参考https://ask.dcloud.net.cn/article/36195

permissions

Android平台使用到的权限，请在HBuilderX的manifest.json可视化界面“（App）模块权限配置”中的“Android打包权限配置”中勾选。

permissionPhoneState

HBuilderX2.3.8+版本支持
Android平台应用启动时申请读取设备信息权限配置
支持以下字段

request
申请权限策略，可配置以下值：
"always" - 一直申请读取设备信息权限，用户必须授权允许，否则一直弹出提示框，直到用户允许；
"once" - 申请一次读取设备信息权限，不管用户是否允许
"none" - 不申请读取设备信息权限
prompt
配置request值为"always"时有效，当用户拒绝授权读取设备信息权限时弹出提示框上显示的内容。
跟多详情参考https://ask.dcloud.net.cn/article/36549

minSdkVersion & targetSdkVersion

minSdkVersion为应用兼容的最低Android版本（API等级）
targetSdkVersion为应用适配的Android版本（API等级）
更多详情参考https://ask.dcloud.net.cn/article/193

icons

应用图标配置，json格式数据，分别包含Android和iOS平台的配置项：

复制代码

"icons":{ "ios":{ "appstore":"必选, 1024x1024, 提交app sotre使用的图标", "iphone":{ "normal": "可选，57x57，iPhone3/3GS程序图标，低于iOS7不再支持", "retina": "可选，114x114，iPhone4程序图标，低于iOS7不再支持", "app@2x[retina7]": "可选，120x120，iOS7+程序图标（iPhone4S/5/6/7/8）", "app@3x[retina8]": "可选，180x180，iOS7+程序图标（iPhone6plus/7plus/8plus/X）", "spotlight-normal": "可选，29x29，iPhone3/3GS Spotlight搜索程序图标，低于iOS7不再支持", "spotlight-retina": "可选，58x58，iOS5/6 Spotlight搜索程序图标（iPhone4S），低于iOS7不再支持", "spotlight@2x[spotlight-retina7]": "可选，80x80，iOS7+ Spotlight搜索图标（iPhone5/6/7/8）", "spotlight@3x[spotlight-retina8]": "可选，120x120，iOS7+ Spotlight搜索图标（iPhone6plus/7plus/8plus/X） "settings-normal": "可选，29x29，iPhone4设置页面程序图标，低于iOS7不再支持", "settings@2x[settings-retina]": "可选，58x58，iOS5+ Settings设置图标（iPhone5/6/7/8）", "settings@3x[settings-retina8]": "可选，87x87，iOS5+ Settings设置图标（iPhone6plus/7plus/8plus/X）", "notification@2x": "可选，40x40，iOS7+ 通知栏图标（iPhone5/6/7/8）", "notification@3x": "可选，60x60，iOS7+ 通知栏图标（iPhone6plus/7plus/8plus/X）" }, "ipad":{ "normal": "可选，72x72，iPad普通屏幕程序图标，低于iOS7不再支持", "retina": "可选，144x144，iPad高分屏程序图标，低于iOS7不再支持", "app[normal7]": "可选，76x76，iOS7+程序图标", "app@2x[retina7]": "可选，152x152，iOS7+程序图标（高分屏）", "proapp@2x": "可选，167x167，iOS9+程序图标（iPad Pro）", "spotlight-normal": "可选，50x50，iPad Spotlight搜索程序图标，低于iOS7不再支持", "spotlight-retina": "可选，100x100，iPad高分屏Spotlight搜索程序图标，低于iOS7不再支持", "spotlight[spotlight-normal7]": "可选，40x40，iOS7+ Spotlight搜索图标", "spotlight@2x[spotlight-retina7]": "可选，80x80，iOS7+ Spotlight搜索图标（高分屏）", "settings[settings-normal]": "可选，29x29，iOS5+ 设置图标", "settings@2x[settings-retina]": "可选，58x58，iOS5+ 设置图标（高分屏）", "notification": "可选，20x20，iOS7+ 通知栏图标", "notification@2x": "可选，40x40，iOS7+ 通知栏图标（高分屏）" } }, "android":{ "ldpi": "可选，48x48", //已废弃 "mdpi": "可选，48x48", //已废弃 "hdpi": "可选，72x72", "xhdpi": "可选，96x96", "xxhdpi": "可选，144x144", "xxxhdpi": "可选，192x192" } },

云端打包时要求所有图标路径都相对于应用下".manifest"目录。
提交云端打包时需做路径转换，请在HBuilderX的manifest.json可视化界面“（App）图标配置”中操作设置
图片配置注意事项参考https://ask.dcloud.net.cn/article/35979

splashscreen

应用启动图配置，json格式数据，分别包含Android和iOS平台的配置项：

复制代码

"splashscreen":{ "ios":{ "iphone":{ "default": "可选，320x480，iPhone3（G/GS）启动图片", // portrait480h，兼容老设备，将废弃 "retina35": "可选，640x960，3.5英寸设备(iPhone4/4S)启动图片，支持iPhone4/4S时必选", // portrait480h@2x "retina40": "可选，640x1136，4.0英寸设备(iPhone5/5S)启动图片，支持iPhone5/5S显示时必选", // portrait-568h@2x "retina40l":"可选，1136x640，4.0英寸设备(iPhone5/5S)横屏启动图片，支持iPhone5/5S横屏显示时必选", // landscape-568h@2x "retina47": "可选，750x1334，4.7英寸设备（iPhone6/7/8）启动图片，支持iPhone6/7/8时必选", // portrait-667h@2x "retina47l": "可选，1334x750，4.7英寸设备（iPhone6/7/8）横屏启动图片，支持iPhone6/7/8横屏显示时必选", // landscape-667h@2x "retina55": "可选，1242x2208，5.5英寸设备（iPhone6/7/8Plus）启动图片，支持iPhone6/7/8Plus时必选", // portrait-736h@3x "retina55l": "可选，2208x1242，5.5英寸设备（iPhone6/7/8Plus）横屏启动图片，支持iPhone6/7/8Plus横屏显示时必选", // landscape-736h@3x "iphonex": "可选，1125x2436，5.8英寸设备（iPhoneX/XS）启动图片，支持iPhoneX/XS时必选", // portrait-812h@3x "iphonexl": "可选，2436x1125，5.8英寸设备（iPhoneX/XS）横屏启动图片，支持iPhoneX/XS横屏显示时必选", // landscape-812h@3x "portrait-896h@2x": "可选，828x1792，6.1英寸设备（iPhoneXR）启动图片，支持iPhone XR（iOS12+）时必选", "landscape-896h@2x": "可选，1792x828，6.1英寸设备（iPhoneXR）iPhoneXR横屏启动图片，支持iPhone XR（iOS12+）横屏显示时必选", "portrait-896h@3x": "可选，1242x2688，6.5英寸设备（iPhoneXS Max）启动图片，支持iPhone XS Max（iOS12+）时必选", "landscape-896h@3x": "可选，2688x1242，6.5英寸设备（iPhoneXS Max）横屏启动图片，支持iPhone XS Max（iOS12+）横屏显示时必选" }, "ipad":{ "portrait": "可选，768x1004，iPad竖屏无状态栏启动图片（兼容iOS5/6），仅支持iOS5/6的iPad时必选", //兼容老设备iOS5/6，将废弃 "portrait-retina": "可选，1536x2008，iPad高分屏竖屏无状态栏启动图片（兼容iOS5/6），仅支持iOS5/6的iPad时必选", //兼容老设备iOS5/6，将废弃 "landscape": "可选，1024x748，iPad横屏无状态栏启动图片（兼容iOS5/6），仅支持iOS5/6的iPad时必选", //兼容老设备iOS5/6，将废弃 "landscape-retina": "可选，2048x1496，iPad高分屏横屏启动图片（兼容iOS5/6），仅支持iOS5/6的iPad时必选", //兼容老设备iOS5/6，将废弃 "portrait7": "可选，768x1024，9.7/7.9英寸iPad/mini竖屏启动图片，支持iPad/mini（iOS7+）时必选", // portrait-1024h "landscape7": "可选，1024x768，9.7/7.9英寸iPad/mini横屏启动图片，支持iPad/mini（iOS7+）横屏显示时必选", // landscape-1024h "portrait-retina7": "可选，1536x2048，9.7/7.9英寸iPad/mini高分屏竖屏图片，支持iPad/mini（iOS7+）时必选", // portrait-1024h@2x "landscape-retina7": "可选，2048x1536，9.7/7.9英寸iPad/mini高分屏横屏启动图片，支持iPad/mini（iOS7+）横屏显示时必选", // landscape-1024h@2x "portrait-1112h@2x":"可选，1668x2224，10.5英寸iPad Pro竖屏启动图片，支持10.5英寸iPad Pro（iOS8+）时必选", "landscape-1112h@2x":"可选，2224x1668，10.5英寸iPad Pro横屏启动图片，支持10.5英寸iPad Pro（iOS8+）横屏显示时必选", "portrait-1194h@2x":"可选，1668x2388，11英寸iPad Pro竖屏启动图片，支持11英寸iPad Pro（iOS10+）时必选", "landscape-1194h@2x":"可选，2388x1668，11英寸iPad Pro横屏启动图片，支持11英寸iPad Pro（iOS10+）横屏显示时必选", "portrait-1366h@2x":"可选，2048x2732，12.9英寸iPad Pro竖屏启动图片，支持12.9英寸iPad Pro（iOS10+）时必选", "landscape-1366h@2x":"可选，2732x2048，12.9英寸iPad Pro横屏启动图片，支持12.9英寸iPad Pro（iOS10+）横屏显示时必选" } }, "android":{ "ldpi": "必选，320x442，低密度屏幕启动图片", "mdpi": "必选，240x282，中密度屏幕启动图片", "hdpi": "必选，480x762，高密度屏幕启动图片", "xhdpi": "必选，720x1242，720P高密度屏幕启动图片", "xxhdpi": "必选，1080x1882，1080P高密度屏幕启动图片" } },

云端打包时要求所有图标路径都相对于应用下".manifest"目录。
提交云端打包时需做路径转换，请在HBuilderX的manifest.json可视化界面“（App）启动图配置”中操作设置

plugins

第三方SDK配置，json格式数据
键名为模块名称，如下为“个推”配置数据：

复制代码

"plugins":{ // 第三方sdk配置 "push": { // 模块名称 "igexin":{ // 个推SDK参数配置 "appid": "pPyZWvH3Fa6PXba10aJ009", // 个推的appid "appkey": "b7dOGlNPHR7pqwUxDhpTi4", // 个推的appkey "appsecret": "IxVYAT9qws8dlNElaTMvg1", // 个推的appsecret "icons": { // 推送图片配置 "push": { // push图标，规格与应用图片一致，不配置则默认使用push图标 "ldpi": "可选，48x48", "mdpi": "可选，48x48", "hdpi": "可选，72x72", "xhdpi": "可选，96x96", "xxhdpi": "可选，144x144", "xxxhdpi": "可选，192x192" }, "small": { // 小图标，png格式图片，仅使用alpha图层 "ldpi": "可选，18*18", "mdpi": "可选，24*24", "hdpi": "可选，36*36", "xhdpi": "可选，48*48", "xxhdpi": "可选，72*72" }, "description": "推送图标" } } } }

请在HBuilderX的manifest.json可视化界面“（App）SDK配置”中操作设置

调用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> </body> </html>

编辑程序启动后默认显示的页面index.html，在页面中添加一个按钮，点击后将打开新页面加载“http://m.csdn.net/”，为了实现此功能，我们需要用到HTML5+扩展API中plus.webview.createWebview()方法创建窗口：

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

真机运行 run in device

写完代码后，我们可以通过真机运行来查看效果。真机运行有3个特点：

真实。虽然PC端HBuilder右侧的内置浏览器也可以看大致的页面，但真实的布局效果以及手机上的特殊能力调用，还是必须在真机测试。
边改边看。在HBuilder更改页面并保存后，可立即同步在真机上看到保存后的显示效果。比开发原生应用还方便。
检查错误和log。手机运行HTML等文件时如果发生错误以及打印的console.log，都可以在真机运行时从手机端反馈回到HBuilder的控制台，在控制台直接查看。
注意只有移动App项目才可以真机联调。

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

启动真机运行

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

也可通过工具栏启动：

启动真机运行后，在控制台中显示以下信息：

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

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

在Android设备会自动安装并启动HBuilder调试基座，iOS设备需要开发者手动点击手机桌面的HBuilder调试App。

如果你真机失败，注意看控制台的提示，或点HBuilder菜单-运行里的故障排查指南。
注意：真机联调App时，提供的是一个测试环境，并不真实发生打包，调试基座App的名字、图标、启动封面图片、是否可旋转这些只有打包才能更改的属性不会因为开发者修改manifest文件而变化。只有修改manifest且点击菜单发行-打包后，上述4个设置才能更改。

运行后，HBuilder中修改页面代码，保存后会自动同步到手机中，如果手机当前展示着被修改的页面，则会刷新页面。
尝试在js中在plus ready之后编写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技术，苹果也不会拒绝上架。事实上Appstore上使用HTML5技术的App超过40w。
HBuilder提供的打包有云打包和本地打包两种。
HBuilder提供的云打包对正常开发者是免费的。但过多浪费服务器资源会额外收费。用本地打包无任何限制。
云打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。

对于不熟悉原生开发的前端工程师，云打包大幅降低了他们的使用门槛。
对于没有mac电脑的开发者，他们也可以通过云打包直接打出iOS的ipa包。
无论云打包还是本地打包，都在HBuilder的菜单-发行中。
本地打包在该菜单下有详细教程，此处仅对云打包进行说明。

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

iOS发布

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

配置打包信息

越狱包

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

AppID：iOS应用标识，推荐使用反向域名风格的字符串，如“com.domainname.appname”，必须与profile文件绑定的App ID匹配。
私钥证书：iOS Certificates文件（.p12）；
私钥密码：导入私钥证书的密码；
Profile文件：iOS Provisioning Profile文件（.mobileprovision），必须与苹果App ID和私钥证书区配；
证书生成请参考http://ask.dcloud.net.cn/article/152

查看打包状态

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

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

Android发布（重点，重点，重点）

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

生成Android签名证书

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

重新上传

keystore helloworld.keystore 表示生成的证书，可以加上路径（默认在用户主目录下）；
alias helloworld 表示证书的别名是helloworld；
keyalg RSA 表示采用的RSA算法；
validity 10000 表示证书的有效期是10000天。

配置打包信息

使用DCloud公用证

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

重新上传
App包名：Android应用包名，推荐使用反向域名风格的字符串，如“com.domainname.appname”；
证书别名：生成证书时使用-alias参数设置的证书别名；
私钥密码：生成证书时使用的keystore密码；
证书文件：生成证书时使用-keystore参数设置的证书保存路径；
重新上传

查看打包状态

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

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

已经打好的安装包，允许开发者在指定天内下载指定次数。超时或超次后服务器端会清除文件。

遇到打包失败，常见原因是：
如果使用自用证书，很可能是证书配置错误。
如果使用DCloud证书仍然出错，很可能是图片错误。所有图片格式必须是标准png，且严格符合分辨率要求。使用其他图片格式重命名为png会导致打包失败！
其他错误请参考：云打包常见错误排查指南

UI框架

HBuilder并不限制UI框架，开发者使用任何UI框架均可以。
不过市面上确实没有什么好的手机App前端框架，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的调用样例代码。

Hello mui示例应用，漂亮且高性能的前端UI框架：
下载页面

进阶教程

如果想开发出接近原生体验的App，请访问如下教程：

提升HTML5的性能体验系列之一避免切页白屏
提升HTML5的性能体验系列之二列表流畅滑动
提升HTML5的性能体验系列之三流畅下拉刷新
提升HTML5的性能体验系列之四使用原生UI（nativeUI）

三方培训

HTML5中国产业联盟里有专业的培训机构为HTML5开发者提供DCloud产品的培训。
详见专门文章http://ask.dcloud.net.cn/article/299

发行和变现服务

在你的app开发完毕后，DCloud还提供了发布平台，帮助开发者简单的完成应用推广页面，参考http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12936；
如果开发者还需要流量变现，DCloud提供了广告平台，开发者可以方便的在自己的app中集成广告，参考http://ask.dcloud.net.cn/article/13084

最后，祝你通过DCloud的免费工具，快速完成自己的移动App，并获得更多用户和变现收益！

知其然必知其所以然，本文只是随手的笔记，最近bug改的有点多，文字记不住，标记下重点，哈哈。

20191107 关于mui的app打包相关推荐

人人商城生成app教程_人人商城APP打包教程（APICLOUD版）
一.APP环境搭建和配置编译 1.登录APICLOUD后台新建应用 step1 注册账号注册apicloud 账号并登录APICLOUD控制台 step2 新建应用再账户下面找到开发控制台=> ...
html5 plus与vue,基于Html5 Plus + Vue + Mui 移动App 开发（二）
基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...
iOS App打包上架超详细流程1
iOS App打包上架超详细流程(手把手图文教你) 转载: http://www.jianshu.com/p/817686897ec1?open_source=weibo_search 一.前言: 作 ...
HBuilder Android APP打包发布
1. manifest配置按照Manifest.json文档说明 manifest配置把工程中的manifest.json文件配置好,下面以我的项目为例进行配置. (1).应用信息 (2).图标配置 ...
Discuz app打包app上架appstore小技巧
做了很多年的论坛网站了,从discuz到pw再到discuz,作为一个资深的草根站长,混迹于建站领域多年.我们主要是做本地门户的,现在做单纯的PC站其实流量已经很有限了,一直也在观察用什么方法转型到移 ...
iOS app 打包发布
声明: 此文章仅限于个人爱好,给菜鸟打包者 APP打包首先你需要有一个开发者账号,发布证书,还有一个没有报错的APP 1.检查你的发布证书和bundleid是否匹配 2.这里需要选中你的iOS ...
最新码支付源码+完整版+免挂监听回调+微信、支付宝、qq监控APP打包教程
码支付手机APP打包教程码支付官网:https://pay.madanbao.com 1.打开uniapp的官网注册一个账号,网址为:www.dcloud.io/ 3.打开工具导入项目,打开mani ...
iOS开发基础：最新的APP打包上架流程
之前有人留言让我更新部分文章,下面就为大家分享一下iOS的APP打包上架流程: 上传至apple developer 1.1 上传准备工作更新上架和发布上架不同,在原始版本首次上架的时候就将描述文件 ...
uni-app使用Hbuilder X如何安卓APP打包、发布、运行
安卓APP打包本章节主要讲解如何将uni-app制作的企业站,打包成安卓apk,同步安装在手机上. 操作步骤如下: 第1步:配置manifest.json. 第2步:使用Hbuilder X,原生A ...
iOS—APP打包上线流程
iOS-APP打包上线流程 1 上传至apple developer 1.1 上传准备工作更新上架和发布上架不同,在原始版本首次上架的时候就将描述文件和证书之类的文档下载好了,所以无需再安装此类文件 ...

20191107 关于mui的app打包

HTML5 Plus应用概述

HTML5 Plus规范

5+ App概念解析

HTML5+ 应用架构

HTML5+ 规范 API 及demo示例

开发环境HBuilder

平台支持

手把手教你开发HelloWorld（重点，重点，重点，必须说三遍）

创建HelloWorld应用

manifest.json（超级重要的配置文件）

配置链接：https://ask.dcloud.net.cn/article/94

概述

h5

使用自定义模板时，1. 工程根目录下新建一个html文件；2. 复制下面的基本模板内容，到这个html文件，在此基础上修改meta和引入js；3. 在 manifest.json->h5->template 节点中关联这个html文件的路径。

Tips：uni-app 中 manifest.json->h5->devServer 实际上对应 webpack 的 devServer，鉴于 manifest 为 json 文件，故 webpack.config.js->devServer 配置项下的简单类型属性均可在manifest.json->h5->devServer节点下配置，funciton 等复杂类型暂不支持。

配置 publicPath 为 cdn 资源地址前缀，这样编译出来的 html 文件，引用的 js，css 路径会自动变成 cdn 上的地址。

打包部署后，在服务器上开启 gzip 可以进一步压缩文件。具体的配置，可以参考网上的分享：https://juejin.im/post/5af003286fb9a07aac24611b

mp-weixin

mp-alipay

mp-baidu

mp-toutiao

mp-qq

完整 manifest.json （重点内容）

allowsInlineMediaPlayback

是否允许html页面中video标签非全屏播放，仅iOS平台有效 Boolean类型，值为true表示允许，false表示不允许，默认值为不允许。 html页面的video标签必须添加webkit-playsinline属性才支持非全屏播放，如下示例：

<video controls="controls" src="http://.../x.mp4" webkit-playsinline>

此配置与VideoPlayer（视频播放）控件功能无关

iOS平台打包配置，uni-app项目对应为"app-plus" -> "distribute" -> "ios"节点

Android平台打包配置，uni-app项目对应为"app-plus" -> "distribute" -> "android"节点

云端打包时要求所有图标路径都相对于应用下".manifest"目录。 提交云端打包时需做路径转换，请在HBuilderX的manifest.json可视化界面“（App）启动图配置”中操作设置

发行打包（重要，重要，,重要）

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

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

Android发布（重点，重点，重点）

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

生成Android签名证书

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

重新上传

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

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

keyalg RSA 表示采用的RSA算法；

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

配置打包信息

使用DCloud公用证

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

重新上传

查看打包状态

已经打好的安装包，允许开发者在指定天内下载指定次数。超时或超次后服务器端会清除文件。

UI框架

开发资源

API手册：HTML5+规范

HelloH5+示例应用，应用中包括几乎所有plus API的示例：

iOS：Appstore中搜索Hello H5+

Android：下载地址

获取Hello H5+的源代码，在HBuilder中新建移动App，选Hello H5+。可以查看所有plus api的调用样例代码。

Hello mui示例应用，漂亮且高性能的前端UI框架： 下载页面

进阶教程

如果想开发出接近原生体验的App，请访问如下教程：

提升HTML5的性能体验系列之一 避免切页白屏

提升HTML5的性能体验系列之二 列表流畅滑动

提升HTML5的性能体验系列之三 流畅下拉刷新

提升HTML5的性能体验系列之四 使用原生UI（nativeUI）

三方培训

HTML5中国产业联盟里有专业的培训机构为HTML5开发者提供DCloud产品的培训。 详见专门文章http://ask.dcloud.net.cn/article/299

发行和变现服务

最后，祝你通过DCloud的免费工具，快速完成自己的移动App，并获得更多用户和变现收益！

20191107 关于mui的app打包相关推荐

最新文章

热门文章

使用自定义模板时，1. 工程根目录下新建一个html文件；2. 复制下面的基本模板内容，到这个html文件，在此基础上修改meta和引入js；3. 在 `manifest.json->h5->template` 节点中关联这个html文件的路径。

Tips：`uni-app` 中 `manifest.json->h5->devServer` 实际上对应 `webpack` 的 devServer，鉴于 manifest 为 json 文件，故 `webpack.config.js->devServer` 配置项下的简单类型属性均可在`manifest.json->h5->devServer`节点下配置，funciton 等复杂类型暂不支持。

是否允许html页面中video标签非全屏播放，仅iOS平台有效
Boolean类型，值为true表示允许，false表示不允许，默认值为不允许。
html页面的video标签必须添加webkit-playsinline属性才支持非全屏播放，如下示例：

`<video controls="controls" src="http://.../x.mp4" webkit-playsinline>`

云端打包时要求所有图标路径都相对于应用下".manifest"目录。
提交云端打包时需做路径转换，请在HBuilderX的manifest.json可视化界面“（App）启动图配置”中操作设置

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

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

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

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

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

Hello mui示例应用，漂亮且高性能的前端UI框架：
下载页面

提升HTML5的性能体验系列之一避免切页白屏

提升HTML5的性能体验系列之二列表流畅滑动

提升HTML5的性能体验系列之三流畅下拉刷新

提升HTML5的性能体验系列之四使用原生UI（nativeUI）

HTML5中国产业联盟里有专业的培训机构为HTML5开发者提供DCloud产品的培训。
详见专门文章http://ask.dcloud.net.cn/article/299