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？

1. 做一个mobile web项目
   在这个模式下，开发者用不到HTML5Plus，使用标准的HTML5语法，运行在浏览器里。这不算5+ App。
   此时开发者仍然可以使用HBuilder这个开发工具，新建项目时选择web项目。
   开发者也仍然可以使用DCloud提供的mui开源框架，来简化ui的开发。
   但这就是一个普通的web项目，b/s方式，不可脱线运行，不能调用HTML5Plus的增加api。
2. 做一个正统的app
   传统意义上的app，是c/s方式的，它的程序要安装和运行在手机上，不通过浏览器在线下载。
   此时开发者在HBuilder里新建项目时，选择“移动App”。（HBuilderX里选择5+App）
   在App项目下编写的HTML、js等文件，是会被打包到原生的安装包（Android是apk包、iOS是ipa包）里的。
   此时本地的js和服务器通过ajax交互，由服务器按接口方式给出数据（一般是json），然后客户端的js文件解析json，并根据本地的业务逻辑来渲染页面和执行功能。
   所以请不要在App项目中放置运行在服务器端的php等文件。
3. 使用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项目下的所有文件，也都是打包在本机运行的。
4. 如果你想开发一次，全端覆盖，那么需要使用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，登录