20191107 关于mui的app打包
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文件的路径。
<%= htmlWebpackPlugin.options.title %>
在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 中的结果：