first commit

docs/.vuepress/config.js

@@ -0,0 +1,53 @@
+module.exports = {
+  title: "MogoH5+",
+  description: "快速开发WebApp的多页面脚手架工具,致力于打造H5+应用生态.",
+  base: "/mogo-h5plus/",
+  themeConfig: {
+    nav: [
+      { text: "主页", link: "/" },
+      { text: "MogoH5+", link: "/guide/guide.md" },
+      { text: "Hotfix", link: "/hotfix/introduction.md" },
+      { text: "H5+文档", link: "http://www.html5plus.org/doc/h5p.html" }
+    ],
+    repo: "tyaqing/mogo-h5plus",
+    search: true,
+    sidebar: {
+      "/guide/": [
+        {
+          title: "指南|Guide",
+          collapsable: false,
+          children: [
+            "introduction",
+            "development",
+            "production",
+            "update_log",
+            "qa"
+          ]
+        },
+        {
+          title: "最佳实践|Practice",
+          collapsable: false,
+          children: ["practice/webview", "practice/details"]
+        },
+        {
+          title: "关于|About",
+          collapsable: false,
+          children: ["about"]
+        }
+      ],
+      "/hotfix/": [{
+        title: "新版本|V1",
+        collapsable: false,
+        children: [
+          "introduction", "config", "hotfitxFemirror"
+        ]
+      }, {
+        title: "旧版本|Old",
+        collapsable: true,
+        children: [
+          "old/introduction", "old/usage", "old/hotfix", "old/hotfitxFemirror"
+        ]
+      }]
+    }
+  }
+};

docs/.vuepress/override.styl

@@ -0,0 +1,4 @@
+$accentColor = #F7782E
+$textColor = #2c3e50
+$borderColor = #eaecef
+$codeBgColor = #282c34

docs/README.md

@@ -0,0 +1,14 @@
+---
+home: true
+heroImage: /logo.png
+actionText: 查看文档 →
+actionLink: /guide/introduction.md
+features:
+- title: Vue多页面
+  details: 使用vue+webpack+babel构建的多页面脚手架,开发,调试非常便捷.
+- title: 热更新
+  details: 几部简单的操作就可以更新自己的APP,无需繁琐的审核
+- title: 云应用
+  details: 你可以将此想象成[微信-小程序]的关系,快速迭代您的app
+footer: MIT Licensed | Copyright © 2018
+---

docs/deploy.sh

@@ -0,0 +1,27 @@
+#!/usr/bin/env sh
+
+# 确保脚本抛出遇到的错误
+# set -e
+
+# 生成静态文件
+# npm run docs:build
+
+vuepress build
+
+# 进入生成的文件夹
+cd .vuepress/dist
+
+# 如果是发布到自定义域名
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# 如果发布到 https://<USERNAME>.github.io
+# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
+
+# 如果发布到 https://<USERNAME>.github.io/<REPO>
+git push -f https://github.com/tyaqing/mogo-h5plus.git master:gh-pages
+
+cd -

docs/guide/about.md

@@ -0,0 +1,13 @@
+# 关于
+
+## 框架
+
+框架由我个人维护,由于热爱,几乎每周都会有更新,同样关于脚手架周边的服务也在慢慢整合,致力于打造一个优质的 webapp 开发体验.
+
+## 赞助
+
+您的赞助会使`MogoH5+`发展的更好,所赞助的资金都将提升`FEmirror 云更新`服务.
+
+| 微信                                                       | 支付宝                                                        |
+| ---------------------------------------------------------- | ------------------------------------------------------------- |
+| <img width="200" :src="$withBase('/wxpay.JPG')" alt="foo"> | <img  width="200"  :src="$withBase('/alipay.JPG')" alt="foo"> |

docs/guide/development.md

@@ -0,0 +1,220 @@
+# 开发
+
+## 下载脚手架
+
+首先下载脚手架
+脚手架项目地址[MogoH5+](https://github.com/tyaqing/mogo-h5plus)
+
+### Git clone
+
+```bash
+git clone https://github.com/tyaqing/mogo-h5plus.git
+```
+
+### 直接下载
+
+[下载地址](https://github.com/tyaqing/mogo-h5plus/archive/master.zip)
+
+下载后把目录直接导入到 Hbuilder.
+
+## 运行脚手架
+
+```bash
+// 1 进入项目主目录
+cd mogo-h5plus
+// 2 安装npm依赖
+npm i  // 或者 yarn  请不要使用cnpm
+// 3 调试运行
+npm start
+
+// 运行结果如下
+ℹ ｢wds｣: Project is running at http://192.168.199.155:8080/
+ℹ ｢wds｣: webpack output is served from /
+ℹ ｢wdm｣: Hash: e597725cca065f694fbd
+Version: webpack 4.10.2
+Time: 4959ms
+```
+
+直接下载项目然后根据需求定制打包,最后通过 Hbuilder 云打包即可生成 APP.
+
+> 本文自带一个案例是使用 VantUI 开发的几个界面,如果你喜欢其他 UI 同样可以替换成其他的 UI.
+
+## 真机调试
+
+将打印出来的 ip 地址,我们打印出来的是`http://192.168.199.155:8080/`,将这个填入页面入口.
+
+![](https://user-gold-cdn.xitu.io/2018/6/12/163f19299efa1d44?w=606&h=244&f=png&s=25160)
+
+然后使用 Hbuilder 基座进行调试测试.
+
+![](https://user-gold-cdn.xitu.io/2018/6/12/163f1938c91c9e1d?w=687&h=112&f=png&s=72460)
+
+## 新建页面
+
+假如我们要新建一个名称为`list`的页面作为商品列表,我们就要在`./src/page/goods`下新建`list.js`和`list.vue`两个文件.`list.js`作为多页面的入口,`list.vue`,脚手架自带了几个页面可供参考.
+
+```json
+{
+  "index|plusReady": "./src/main.js",
+  "goods.detail": "./src/page/goods/detail.js",
+  "goods.cart": "./src/page/goods/cart.js",
+  "mui.index|mui|plusReady": "./src/page/mui/index.js"
+}
+```
+
+### 访问页面
+
+```js
+openWebview({ url: "./goods.cart.html", id: "goods.cart" });
+openWebview({ url: "./mui.index.html", id: "mui.index" });
+```
+
+这里要注意 2 个细节:
+
+1.  后缀一定是`.html`
+2.  id 要按照页面的规范,不要出现重复 id
+
+### 删除页面
+
+如果删除页面了页面,也需要删除`page.json`相应的页面描述代码
+
+> 实现原理是监听了`page.json`,一旦`page.json`发生改变,会重启`webpack`
+
+## 新建组件
+
+组件放入`./src/components`目录下,如果组件较多,可自行建立目录.比如 demo 中使用的 Logo 组件可以作为参考.
+
+## 新建工具库
+
+工具库`./src/utils`主要放一些公用函数,比如请求,打开 webview,支付,分享等执行函数.
+demo 中封装了部分来自 mui 的函数比如`自定义事件`,`webview`.这些函数可以作为参考.
+
+`common.js` 是每个页面都需要加载的一个 js,里面加载了`fastclick`和`vconsole`.如果全局需要加统计,全局执行的函数,可以放在这个文件里面.
+
+`./src/utils` 做了 `alias`别名,可以 直接这样加载 `import common from "Utils/common"`.
+
+> utils 是我们会经常修改的, 如果有自己的工具库,请另建文件夹
+
+## 请求代理配置 Proxy
+
+首先,只有开发的过程中才会有跨域的情况.App 中不存在跨域.
+
+**为什么会有跨域呢?**
+
+`MogoH5+`的调试是使用`npm run dev`构建了一个局域网服务器的,比如`http://192.168.199.155:8080/`,这样的好处就是视图修改同步很快,不受 Hbuilder 的限制.
+
+起初考虑过`webpack watch`来实现,但是发现`watch`之后的文件变化 HBuilder 无法第一时间反应,也就是说,修改了一个界面,需要等 Hbuilder 发现`文件差异`才会去更新真机的试图.因此才考虑局域网服务器的.
+
+### 请求库
+
+demo 的请求使用的是 `axios`,同样你喜欢什么库都可以自己去封装.
+
+常见的请求库有`fetch`,`request`,`SuperAgent`,`jquery-ajax`.
+
+### 跨域
+
+由于`npm start`后,调试网页是挂在局域网上,并且作为 Hbuilder 的`页面入口`,因此,在请求时会出现`跨域`.
+
+在`/config/index.js`中使用本地代理,将下面的`https://api.douban.com`修改成自己使用的业务域名即可.
+
+```javascript
+proxy: {
+    "/api": {
+      name:"DOUBANAPI",  // 自己取名
+      target: "https://api.douban.com",
+      pathRewrite: { "^/api": "" },
+      changeOrigin: true,
+      secure: false
+    },
+     "/baidu_api": {
+      name:"BAIDUAPI",  // 自己取名
+      target: "https://api.baidu.com",
+      pathRewrite: { "^/baidu_api": "" },
+      changeOrigin: true,
+      secure: false
+    },
+    ...
+  }
+```
+
+如果有更多业务域名可以继续在`proxy`添加.
+
+只有开发的时候才会有跨域问题,打包后的文件网址会被替换成被代理的网址,因此发送请求一定要加上名称`DOUBANAPI`
+
+```javascript
+request({
+  url: DOUBANAPI + "/bookList" // 在打包后会变成 https://api.baidu.com/bookList
+});
+```
+
+## 调试
+
+### VConsole
+
+在 Hbuilder 中调试会有诸多问题,比如:
+
+- 不能直接打印`数组`,`对象`,需要转成字符串.
+- 即使使用`webview调试`,仍然不能打印出数组,在 mac 上使用也非常不方便.
+
+使用`VConsole`,调试的问题基本就脱离 Hbuilder 了,使用`VConsole`主要优点如下
+
+- 可以打印数组,对象
+- 可以查看请求,cookie,Localstorage
+- 在`System`栏目中可以看到页面加载速度
+- 可以查看元素
+
+基本上就是一个简化的`开发者工具栏`,对于调试来说非常简便了.
+
+### print 函数
+
+由于 `VConsole` 并不能解决全部调试问题,比如页面关闭后调试信息消失,增加一个 `print` 方法,用于在 Hbuilder 上打印对象
+
+```js
+print(someObjorArray);
+```
+
+## 使用 mui
+
+1.  首先在`page.json`中给需要使用`mui`的页面加入`|mui`,这一步,`mui`的`js`将会嵌入到改页面当中.
+
+2.  使用相对路径加入 mui 的 css,加入方式如下:
+
+```html
+<style lang="less">
+@import '../../assets/mui/mui.css';
+</style>
+```
+
+## 使用 vux/vant
+
+系统默认安装了`vux`和`vux-loader`,`vant`也是默认添加的,直接 import 使用即可.
+
+```js
+import { Group, Calendar, Cell, Badge, CellBox, XButton } from "vux";
+```
+
+> 如果您不使用 vux,或 vant,可以将其编译器去除来提高您的开发构建效率.[具体方式](qa.html#速度优化方案)
+
+## page.json 配置
+
+这是一份来自`demo`的页面配置,多页面的主要配置也是来自这里,具体实现细节请参看[多页面的实现]
+
+```json
+{
+  "index|plusReady": "./src/main.js",
+  "goods.detail": "./src/page/goods/detail.js",
+  "goods.cart": "./src/page/goods/cart.js",
+  "mui.index|mui|plusReady": "./src/page/mui/index.js",
+  "user.index": "./src/page/user/index.js",
+  "vux.index|plusReady": "./src/page/vux/index.js"
+}
+```
+
+在配置的`键`中发现了`|`符号,`|`后面的值表示页面加载参数,这里主要对一些参数作解释
+
+| 参数        | 解释                                                           | 备注           |
+| ----------- | -------------------------------------------------------------- | -------------- |
+| `mui`       | 在页面中加载 mui,使用后 mui 会挂在到`window`上                 | /              |
+| `plusReady` | 是否使 plus 提前生效 ,提前生效就可以不用监听 plus 是否已经生效 | 仅在安卓上有效 |
+
+> 注意:plus 在安卓上提前生效会增加 50-200ms(根据性能)的加载时间,可以通过增加窗口过场动画的时间弥补,或者预加载窗口

docs/guide/guide.md

@@ -0,0 +1,257 @@
+# 简介
+
+![GitHub tag](https://img.shields.io/github/tag/tyaqing/mogo-h5plus.svg)
+
+`MogoH5+` 是一个 vue 多页面**脚手架工具**,结合 H5+可以快速开发安卓与苹果 APP.
+
+即使不适用 Hbuilder 打包成 APP,本脚手架同样可以作为多页面网页生成的参考项目.
+
+### [APP 演示下载地址](https://fir.im/p52j)
+
+## 特性
+
+- `支持 Npm 生态`
+- `支持 vue 语法,以及 vue 生态,比如 mint,vant`
+- `支持 ES6/ES7 语法`
+- `使用 VConsole 调试`
+- `VSCode 友好`
+- `局域网便捷调试,不插数据线也可以调试`
+- `支持mui`
+
+# 快速上手
+
+## 下载脚手架
+
+首先下载脚手架
+脚手架项目地址[MogoH5+](https://github.com/tyaqing/mogo-h5plus)
+
+### Git clone
+
+```
+git clone https://github.com/tyaqing/mogo-h5plus.git
+```
+
+### 直接下载
+
+[下载地址](https://github.com/tyaqing/mogo-h5plus/archive/master.zip)
+
+下载后把目录直接导入到 Hbuilder.
+
+## 运行脚手架
+
+```
+// 1 进入项目主目录
+cd mogo-h5plus
+// 2 安装npm依赖
+npm i  // 或者 yarn
+// 3 调试运行
+npm start
+
+// 运行结果如下
+ℹ ｢wds｣: Project is running at http://192.168.199.155:8080/
+ℹ ｢wds｣: webpack output is served from /
+ℹ ｢wdm｣: Hash: e597725cca065f694fbd
+Version: webpack 4.10.2
+Time: 4959ms
+```
+
+直接下载项目然后根据需求定制打包,最后通过 Hbuilder 云打包即可生成 APP.
+
+> 本文自带一个案例是使用 VantUI 开发的几个界面,如果你喜欢其他 UI 同样可以替换成其他的 UI.
+
+## 真机调试
+
+将打印出来的 ip 地址,我们打印出来的是`http://192.168.199.155:8080/`,将这个填入页面入口.
+
+![](https://user-gold-cdn.xitu.io/2018/6/12/163f19299efa1d44?w=606&h=244&f=png&s=25160)
+
+然后使用 Hbuilder 基座进行调试测试.
+
+![](https://user-gold-cdn.xitu.io/2018/6/12/163f1938c91c9e1d?w=687&h=112&f=png&s=72460)
+
+## 使用
+
+主要怎么使用 MogoH5+做正式的开发,在开发过程中一定要遵守**目录规则**,否则会有意想不到的错误.
+
+### 目录结构
+
+```
+.
+├── assets  // 静态资源
+├── docs  // 文档
+├── index.html // 入口模板
+├── jsconfig.json //js配置
+├── manifest.json //hbuilder 入口文件
+├── src  
+│   ├── components  //组件文件夹
+│   │   └── List.vue  //组件
+│   ├── index.js  //主页入口文件
+│   ├── index.vue // 主页vue文件
+│   ├── page  // 页面
+│   └── utils // 工具
+├── unpackage // hbuilder 构建目录
+│   └── res
+└── webpack.config.js  //webpack配置目录
+```
+
+### 新建页面
+
+假如我们要新建一个名称为`list`的页面作为商品列表,我们就要在`./src/page/goods`下新建`list.js`和`list.vue`两个文件.`list.js`作为多页面的入口,`list.vue`,脚手架自带了几个页面可供参考.
+
+::: tip 路由
+遵循相对路径原则,如果在`src`访问这个页面则就是`./goods/list.html`
+!!! 后缀一定是`.html`
+:::
+
+### 新建页面/删除页面[0.3.0]
+
+0.3.0 的新建页面和 0.2.0 是兼容的,但是建议您使用 0.3.0 的`page.json`,这样会减少很多因为新建,删除页面产生的错误
+如果您需要更自由的页面结构,比如三级目录.可以按照`page.json`格式添加即可.
+
+```json
+{
+  "goods/detail": "./src/page/goods/detail.js",
+  "map/map": "./src/page/map/map.js",
+  "mui/index": "./src/page/mui/index.js",
+  "user/index": "./src/page/user/index.js"
+}
+```
+
+比如您需要一个添加一个三级级页面,可以按照下面的方法添加,
+
+```json
+{
+  ...
+  "user/index/point": "./src/page/user/point/index.js"
+}
+```
+
+如果删除页面了页面,也需要删除`page.json`相应的页面描述代码
+
+> 实现原理是监听了`page.json`,一旦`page.json`发生改变,会重启`webpack`
+
+### 新建组件
+
+组件放入`./src/components`目录下,如果组件较多,可自行建立目录.比如 demo 中使用的 Logo 组件可以作为参考.
+
+### 新建工具库
+
+工具库`./src/utils`主要放一些公用函数,比如请求,打开 webview,支付,分享等执行函数.
+demo 中封装了部分来自 mui 的函数比如`自定义事件`,`webview`.这些函数可以作为参考.
+
+::: tip
+`common.js` 是每个页面都需要加载的一个 js,里面加载了`fastclick`和`vconsole`.如果全局需要加统计,全局执行的函数,可以放在这个文件里面.
+
+`./src/utils` 做了 `alias`别名,可以 直接这样加载 `import common from "Utils/common"`.
+:::
+
+### 发送请求
+
+#### 请求库
+
+demo 的请求使用的是 `axios`,同样你喜欢什么库都可以自己去封装.
+
+常见的请求库有`fetch`,`request`,`SuperAgent`,`jquery-ajax`.
+
+#### 跨域
+
+由于`npm start`后,调试网页是挂在局域网上,并且作为 Hbuilder 的`页面入口`,因此,在请求时会出现`跨域`.
+
+在`./build.js`中使用本地代理,将下面的`https://api.douban.com`修改成自己使用的业务域名即可.
+
+```javascript
+proxy: {
+    "/api": {
+      name:"DOUBANAPI",  // 自己取名
+      target: "https://api.douban.com",
+      pathRewrite: { "^/api": "" },
+      changeOrigin: true,
+      secure: false
+    },
+     "/baidu_api": {
+      name:"BAIDUAPI",  // 自己取名
+      target: "https://api.baidu.com",
+      pathRewrite: { "^/api": "" },
+      changeOrigin: true,
+      secure: false
+    },
+    ...
+  }
+```
+
+如果有更多业务域名可以继续在`proxy`添加.
+
+::: tip 注意
+只有开发的时候才会有跨域问题,打包后的文件网址会被替换成被代理的网址,因此发送请求一定要加上名称`DOUBANAPI`
+
+```javascript
+request({
+  url: DOUBANAPI + "/bookList"
+});
+```
+
+:::
+
+## 调试
+
+在 Hbuilder 中调试会有诸多问题,比如:
+
+- 不能直接打印`数组`,`对象`,需要转成字符串.
+- 即使使用`webview调试`,仍然不能打印出数组,在 mac 上使用也非常不方便.
+
+使用`VConsole`,调试的问题基本就脱离 Hbuilder 了,使用`VConsole`主要优点如下
+
+- 可以打印数组,对象
+- 可以查看请求,cookie,Localstorage
+- 在`System`栏目中可以看到页面加载速度
+- 可以查看元素
+
+基本上就是一个简化的`开发者工具栏`,对于调试来说非常简便了.
+
+## 打包
+
+```bash
+npm run build
+```
+
+运行命令后会有一个`dist`目录,里面的经过压缩的静态文件.
+
+### Hbuilder 发行打包
+
+在使用 Hbuilder 制作安装包前,请将`入口文件`修改成`dist/index.html`.
+然后可以安心的打包了.
+
+## 如何使用 mui
+
+mui 默认未加载,但是相对应的 js 和 css 放在了 `assets` 目录下.如果需要使用,请按下面步骤操作
+
+### 1.去掉加载注释
+
+在根目录下去掉下面两段标签的注释
+
+```html
+<!-- 如果有使用mui,就不要注释下面两个标签 -->
+<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.muiSourcePath %>assets/css/mui.min.css">
+<script src="<%= htmlWebpackPlugin.options.muiSourcePath %>assets/js/mui.min.js"></script>
+```
+
+### 2.使用`npm run build:mui`打包
+
+> 这个命令会复制`assets`中的文件到打包目录.
+
+## 常见问题
+
+常见问题一般来说就是白屏问题,或者页面不存在,可能有以下几种情况
+
+**Q1:删除一些页面后控制台报错**
+
+这是由于`HtmlWebpackPlugin`没有找到模板的问题,只需要重新`npm start`即可.
+
+**Q2:`npm start`控制台报语法错误**
+
+请升级你的 node 到最新版本
+
+**Q3:`npm start`后出现空白页面无法显示**
+
+1.  电脑和调试的手机需要在同一个局域网下面
+2.  `npm start`后如果局域网 ip 地址有变,请同时在 manifest.json 中修改页面入口

docs/guide/introduction.md

@@ -0,0 +1,53 @@
+# 介绍
+
+> MogoH5+ 是以一个 `vue+webpack` 的多页面脚手架,配合[HTML5+](http://www.html5plus.org/doc/h5p.html)使用可以快速开发安卓/苹果应用.
+
+![GitHub tag](https://img.shields.io/github/tag/tyaqing/mogo-h5plus.svg)
+
+下载 DEMO 体验[MogoH5+](https://fir.im/p52j)
+
+文档是以`1.3.0`的基础上编写,如果您正在使用老版本出现问题,请加入 QQ 群 780150310 询问
+
+## 特点
+
+- **Vue 支持** 通过 vue 框架双向绑定等优点,可以快速开发出响应式 app 界面
+- **ES6/ES7 支持** 支持使用 `ES7/ES8`甚至更加新的 ES 规范,享受 `async/await`
+- **热更新** 支持`热更新`,自动化热更新平台正在内测中
+- **npm 生态** 支持使用 `npm` 安装管理第三方依赖
+- **css 预编译** 支持使用 `Less` 等
+- **局域网调试** 无须数据线连接即可`调试`
+- **vconsole 支持** 手机上享受`Chrome Dev Tools`一样的体验
+
+想继续写,估计还可以写很多,很多...大概表达就是,这个东西很强大!
+
+## 什么是 HTML5+
+
+`HTML5+` 是一个运行环境,在这个环境下的网页都可以使用 `HTML5+`的 API,比如摄像头,定位,推送等原生 APP 才有的功能.
+
+而这个运行环境的壳需要用`Hbuilder`来生成,所以需要搭配`Hbuilder`使用.
+
+## 入门解疑
+
+如果你要开发大型复杂 APP,游戏,请绕道....
+
+### 兼容问题
+
+`webapp`的本质就是`webview`,`webviwe` 也已经非常的成熟,比如小程序,因此,你知道如何处理网页兼容问题就可以了
+
+### 性能问题
+
+使用多`webview`来管理窗口,几乎满足大多数中小型 APP 的开发,可以安装 Demo 体验.
+
+目前手机的性能越来越强,只要使用规范,可以接近原生界面.
+
+### 与 mui 的关系
+
+`mui`只是一个 ui 框架,`mui.js`中封装了很多`HTML5+`的方法.如果您追求性能,我们建议您最好不要使用任何 ui 框架.
+
+## 赞助
+
+您的赞助会使`MogoH5+`发展的更好,所赞助的资金都将提升`FEmirror 云更新`服务.
+
+| 微信                                                       | 支付宝                                                        |
+| ---------------------------------------------------------- | ------------------------------------------------------------- |
+| <img width="200" :src="$withBase('/wxpay.JPG')" alt="foo"> | <img  width="200"  :src="$withBase('/alipay.JPG')" alt="foo"> |

docs/guide/practice/details.md

@@ -0,0 +1,7 @@
+# 实现细节
+
+## 多页面的实现
+
+## nodemon 的使用
+
+## mui 的加载

docs/guide/practice/webview.md

@@ -0,0 +1,9 @@
+# Webview
+
+## openWebview()
+
+## openWebviewFast()
+
+## preLoad()
+
+## showWebviewById()

docs/guide/production.md

@@ -0,0 +1,18 @@
+# 发布
+
+## 打包
+
+```bash
+npm run build
+```
+
+运行命令后会有一个`dist`目录,里面的经过压缩的静态文件.
+
+### Hbuilder 发行打包
+
+在使用 Hbuilder 制作安装包前,请将`入口文件`修改成`dist/index.html`.
+然后可以安心的打包了.
+
+## 热更新包
+
+在 Hbuilder 菜单栏中选择`发布`->`制作移动APP资源升级包`,得到的`wgt`文件是可以用来更新的

docs/guide/qa.md

@@ -0,0 +1,84 @@
+# 常见问题
+
+常见问题一般来说就是白屏问题,或者页面不存在,可能有以下几种情况
+
+**Q1:删除一些页面后控制台报错**
+
+这是由于`HtmlWebpackPlugin`没有找到模板的问题,只需要重新`npm start`即可.
+
+**Q2:`npm start`控制台报语法错误**
+
+请升级你的 node 到最新版本
+
+**Q3:`npm start`后出现空白页面无法显示**
+
+1.  电脑和调试的手机需要在同一个局域网下面
+2.  `npm start`后如果局域网 ip 地址有变,请同时在 manifest.json 中修改页面入口
+
+## 速度优化方案
+
+最近许多反映脚手架很慢的可以参考一下优化方案,可以大大提高调试/打包速度.
+
+1.2 的版本中移除了一些不必要的插件,应该会快那么一点吧.追求速度的继续往下看.
+
+由于 demo 需要展示各种 ui,加载了各种的 ui 的 loader,所以如果开发者用不到可以将其移除.
+
+### 1.如果不使用 VUX
+
+注释掉 `vux-loader` 即可,在`webpack.base.conf.js`中,修改以下代码
+
+```js
+const vuxLoader = require("vux-loader");
+
+module.exports = vuxLoader.merge(webpackConfig, {
+  plugins: ["vux-ui"]
+});
+```
+
+修改后
+
+```js
+module.exports = webpackConfig;
+```
+
+### 2.如果不使用 vant
+
+移除掉`.babalrc`中以下代码
+
+```json
+[
+  "import",
+  {
+    "libraryName": "vant",
+    "libraryDirectory": "es",
+    "style": true
+  }
+]
+```
+
+## 自定义返回按钮事件
+
+演示可以在 demo 中购物车页面查看,实现代码如下
+
+```js
+plus.key.removeEventListener("backbutton", function() {
+  console.log(5555);
+});
+plus.key.addEventListener(
+  "backbutton",
+  function() {
+    //  nativeUI.conf
+    // nativeUI.con
+    confirm("确认要离开么?").then(e => {
+      if (e.index === 0) {
+        plus.nativeUI.toast("离开了");
+        const ws = plus.webview.currentWebview();
+        ws.hide();
+      } else {
+        plus.nativeUI.toast("留住了");
+      }
+    });
+  },
+  false
+);
+```

docs/guide/update_log.md

@@ -0,0 +1,140 @@
+# 更新日志
+
+![GitHub tag](https://img.shields.io/github/tag/tyaqing/mogo-h5plus.svg)
+
+### 1.3.0 [20180727]
+
+#### [新增]
+
+1.  增加`热更新/迭代`集成,具体文档查看[热更新/迭代](../practice/hotfix.md)
+2.  增加自定义返回实现,返回按钮可以[自定义返回按钮事件](./qa.html#自定义返回按钮事件)
+3.  增加"商品加入购物车"功能实例演示页面间通讯
+4.  新增 VConsole 以 webpack 插件的形式加载,`run build`会自动去掉
+
+#### [修复]
+
+1.  修复了超多页面下调试慢的问题,使用`html-webpack-plugin-for-multihtml`解决
+2.  修改了版本文档
+
+#### [升级指导]
+
+1.  将 VConsole 在 common.js 中删掉,因为已经以 webpack 插件形式加载
+2.  `utils` 是我们会经常修改的, 如果有自己的工具库,请另建文件夹
+
+### 1.2.0 [20180719]
+
+#### [新增]
+
+- 增加预加载窗口打开方式,根据不同场景使用不同的打开方式,可以大大提高 webview 的打开速度,首页已加入使用案例
+- 由于 VConsole 并不能解决全部调试问题,增加一个`print`方法,用于在 Hbuilder 上打印对象
+
+#### [速度优化方案]
+
+最近许多反映脚手架很慢的可以参考一下优化方案,可以大大提高调试/打包速度.
+
+1.2 的版本中移除了一些不必要的插件,应该会快那么一点吧.追求速度的继续往下看.
+
+由于 demo 需要展示各种 ui,加载了各种的 ui 的 loader,所以如果开发者用不到可以将其移除.
+
+##### 1.如果不使用 VUX
+
+注释掉 `vux-loader` 即可,在`webpack.base.conf.js`中,修改以下代码
+
+```
+const vuxLoader = require("vux-loader");
+
+module.exports = vuxLoader.merge(webpackConfig, {
+  plugins: ["vux-ui"]
+});
+```
+
+修改后
+
+```
+module.exports = webpackConfig;
+```
+
+##### 2.如果不使用 vant
+
+移除掉`.babalrc`中以下代码
+
+```
+    [
+      "import",
+      {
+        "libraryName": "vant",
+        "libraryDirectory": "es",
+        "style": true
+      }
+    ]
+```
+
+##### 3.优化建议
+
+对于一些简单的页面其实可以不用 ui 框架,加载的时候会很快
+使用 ui 框架大概也只会增加 100-200ms 的 js 运行时间,窗口过渡 200ms 的话,基本上不会影响用户体验
+如果使用大量组件,增加的时间可能会比较大,这个时候可以考虑预加载这个窗口了.
+
+参考:http://ask.dcloud.net.cn/article/25
+
+#### [升级方案]
+
+几乎每个版本都是兼容的,所以只要将`src`中的文件转移到新版本就 ok 啦!
+
+#### [终极解决:webpack4]
+
+由于官方的 `webpack3` 脚手架速度也提升不了多少了,所以 `1.2` 之后的 `1.x` 版本之后可能几乎不会对脚手架做修改了,只会增加很多实用的使用案例和工具方法
+
+不过现在已经开始对 `webpack4` 开始研究了 webpack4 `2.0`版本见啦
+
+### 1.1.0 [20180706]
+
+#### [新增]
+
+- `page.json`可以配置是否加载 mui 或者是否使用 plusready
+- 增加`fire`页面传值函数,详情可见商品详情页和首页的自定义事件
+
+#### [修复]
+
+- 修复了资源路径加载问题(需修改`page.json`配置)
+- 修复了 mui 加载不灵活的问题,减少打包的体积
+- 修复了 mui 字体文件加载失败的问题
+
+#### 1.0.x 到 1.1.x
+
+由于之前资源路径的问题,目前的解决方案是修改`page.json`的配置,将原来的以路径作为键`mui/index`写成`mui.index`即可,如下
+
+如果要使用 mui 就加入 `|mui`, 如果要使用 mui 就加入 `|plusReady`,不用则不加.
+
+> plusReady 在安卓手机上提前载入可能会影响页面打开速度,解决方法有两种:1 不提前使 plus 生效 2.预加载 plus
+
+```json
+{
+  "mui.index|mui|plusReady": "./src/page/mui/index.js"
+}
+```
+
+#### 注意事项
+
+请在`created`生命周期里面接收事件,否则会因为视图刷新多次执行.
+
+### 1.0.1 [20180704]
+
+- 修复了 background 图片路径打包后不正确的问题
+
+### 1.0.0 [20180630]
+
+- 使用 vue 官方脚手架作为基层,健壮性得到`史诗级`提升
+- 添加了 vux 的支持
+- 修改的 mui 的加载方式
+- 配置方面有部分变化,详情请看文档
+- 升级了安卓 app
+
+### 0.3.0 [20180628]
+
+- 解决了因为新增/删除页面导致的 webpack 错误
+- 添加了 openWebview 的 extras 参数
+
+### 0.2.0 [20180623]
+
+- 添加了对 mui 样式和 js 的支持

docs/hotfix/config.md

@@ -0,0 +1,74 @@
+# Hotfix配置
+
+热更新能够不提交应用商店审核而修改 APP 内容,使得 app 的迭代变的非常灵活.
+
+`MogoH5+`在`1.3.0`后加入了`热更新/安装更新`的集成.同时,我们的`热更新服务器`也在内测中,将在不久公测使用.您无需后端就可以完成整个软件的`热更新/安装更新`服务.
+
+## 介绍
+
+在使用热更新前,请看完这份介绍再使用.
+
+### 热更新
+
+对于安卓来说,热更新是没有任何问题的,但是苹果您可以看下面这段话.
+
+#### App store 应用更新说明(引自 dcloud)
+
+> 应用资源更新肯定是违反 apple 政策的，但目前看起来它也不管。你在官网案例那里下载 Appstore 版本的那些 app，大多启动后都会提示更新，反正也都没下架。如果你不是很大的公司，apple 不会理睬你。如果你是大公司，建议不要做整体更新，每次更新几个页面，也不要提示更新后需要重启，这样会安全点。
+
+作者本人的实践中也经常使用热更新,名声不大,不频繁基本上可以自由使用.
+同样,我们加入了`静默更新`这种比较无脑的更新.
+
+### 安装更新
+
+安装更新在这里指的就是更新大版本,比如添加了模块,必须重新安装.
+
+#### 在安卓的安装更新
+
+1.  可以让 APP 提示,然后用户选择自己下载安装
+2.  应用商店更新
+
+#### 在苹果的安装更新
+
+1.  必须提交 AppStore 提交审核
+
+在这里顺便提一下,苹果用户的习惯一般是自己主动更新.
+在苹果应用商店的大厂 app (微信,淘宝,京东) 更新几乎不会受到 app 的更新推送,也没有所谓`检查更新`的功能,也就是说,更新是用户主动操作的.我们的`迭代`同样也遵循这条`行规`.
+
+
+## Hotfix参数
+
+|参数|说明|类型|
+|-|-|---|
+|`url`|更新请求地址|string|
+|`before(data)`| `data`返回的是请求后的`json`数据; 可在函数中执行安装前进行的操作,在此函数中,可以做一些确认操作,返回`Promise.resolve()`则执行下载安装,不返回或返回其他则不执行下载安装|`Promise`|
+|`success`|安装完成后执行的动作,比如重启app|`void`|
+|`error(e)`|返回error对象,一般在调试中使用|`Error`|
+|`onProgress(n)`|下载进度,`n`为0-100的下载进度|`int`|
+
+
+
+## 后端接收的数据格式
+
+`checkUpdate(url)` 是以 `POST` 去访问 URL 的.数据类型为`application/json`
+
+| 名称    | 描述                            | 类型   |
+| ------- | ------------------------------- | ------ |
+| version | app 当前的版本 ,如 2.1.0        | string |
+| os      | app 设备的系统信息 比如系统版本 | json   |
+| device  | app 设备的设备信息 比如 uuid    | json   |
+
+## 后端返回的数据格式
+
+下面是一个完整的数据返回 返回格式为`application/json` ,返回状态码为`200`.
+
+> 注意 : 返回`200`以外的状态码将不被处理,如果想自行处理可以改写代码
+
+| 名称           | 描述                                                            | 参数                     |
+| -------------- | --------------------------------------------------------------- | ------------------------ |
+| name           | 版本号 如果检测的版本大于本地版本就会更新                       | string                   |
+| title          | 升级提示标题                                                    | string                   |
+| description    | 升级提示内容                                                    | string                   |
+| platform       | 符合升级的平台 ios:升级苹果 android:升级安卓 both:都更新        | `ios` ,`android`, `both` |
+| hotupdate_type | 更新提示 silence:静默更新 tip:提示更新 (apk 的安装是需要提示的) | `silence`,`tip`          |
+| android_url    | 更新下载地址 以`.apk`,`.wgt`结尾的 http 地址                    | url                      |

docs/hotfix/hotfitxFemirror.md

@@ -0,0 +1,35 @@
+# Hotfix 云更新
+
+Hotfix 云更新的架构设计是`Mysql`+`Redis`+`Egg.js(typescript)`.对内存占用极低,可用性比较高.
+
+`Hotfix 云更新` 是一个自动化更新平台,无需后端也可以完成 app 日常更新.
+
+> Hotfix 云更新仅提供测试性功能,不能保障服务的`稳定性`,因此,如果您有商业需求,可以联系作者进行有偿`私有化部署`.
+
+<img  :src="$withBase('/h2.png')" alt="foo">
+
+## [访问网站](https://hotfix.femirror.com/)
+
+## 使用指南
+
+### 注册
+
+使用`Github`授权登录.
+
+### 操作步骤
+
+<br>
+
+<img style="box-shadow:0 0 20px #ccc"  :src="$withBase('/hotfix/1.png')" alt="foo">
+
+<br><br>
+<img style="box-shadow:0 0 20px #ccc"  :src="$withBase('/hotfix/2.png')" alt="foo">
+
+<br><br>
+<img style="box-shadow:0 0 20px #ccc"  :src="$withBase('/hotfix/3.png')" alt="foo">
+
+<br><br>
+<img style="box-shadow:0 0 20px #ccc"  :src="$withBase('/hotfix/4.png')" alt="foo">
+<br><br>
+
+<img style="box-shadow:0 0 20px #ccc"  :src="$withBase('/hotfix/5.png')" alt="foo">

docs/hotfix/introduction.md

@@ -0,0 +1,70 @@
+# 介绍
+
+> `Hotfix`+`FEmirror 云更新` 只需`几分钟` , 让您的 H5+应用快速拥有热更新功能.
+
+
+| iphone 热更新 效果如下                                           | 安卓热更新效果如下                                                    | 安卓安装更新如下                                                      |
+| ---------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| <img   width="400"  :src="$withBase('/IMG_0040.PNG')" alt="foo"> | <img   width="400"  :src="$withBase('/S80805-211149.jpg')" alt="foo"> | <img   width="400"  :src="$withBase('/S80806-112100.jpg')" alt="foo"> |
+
+
+
+## 快速使用 [项目地址](https://github.com/tyaqing/hotfix)
+
+### 安装
+#### npm 安装
+
+```bash
+npm i h5plus-hotfix -S
+```
+
+#### script加载
+
+```html
+<script src="hotfix-bs.js"></script>
+```
+
+### 使用
+
+```js
+hotfix({
+  url: updateUrl,
+  before(data) {
+    // 确认安装
+    return new Promise(resolve => {
+      plus.nativeUI.confirm(data.title, (selected) => {
+        if (selected.index === 0) {
+          plus.nativeUI.showWaiting("下载更新文件...");
+          resolve(data);
+        }
+      }, {
+          title: data.description,
+          buttons: ["确认更新", "取消"],
+          verticalAlign: "bottom"
+        });
+    });
+  },
+  success() {
+    console.log('安装成功')
+    plus.runtime.restart(); // 重启app 
+    plus.nativeUI.closeWaiting();
+  },
+  error(e) {
+    // 错误显示
+    plus.nativeUI.closeWaiting();
+    console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
+    plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
+  },
+  onProgress(p) {
+    console.log(p) // 下载进度
+  }
+});
+```
+
+## 赞助
+
+您的赞助会使`MogoH5+`发展的更好,所赞助的资金都将提升`FEmirror 云更新`服务.
+
+| 微信                                                       | 支付宝                                                        |
+| ---------------------------------------------------------- | ------------------------------------------------------------- |
+| <img width="200" :src="$withBase('/wxpay.JPG')" alt="foo"> | <img  width="200"  :src="$withBase('/alipay.JPG')" alt="foo"> |

docs/hotfix/old/hotfitxFemirror.md

@@ -0,0 +1,59 @@
+# FEmirror 云更新
+
+`FEmirror 云更新` 是一个自动化更新平台,无需后端也可以完成 app 日常更新.
+
+<img  :src="$withBase('/h2.png')" alt="foo">
+
+## [访问网站](https://hotfix.femirror.com/)
+
+## 使用指南
+
+### 注册
+
+使用`Github`授权登录.
+
+### 上传更新包
+
+点击左侧`点击/拖动上传升级包`按钮上传升级文件.
+
+可以上传`apk`,`wgt`两种类型的文件.
+
+文件上传成功后在`应用管理`列表中会出现您刚刚上传的更新包信息.
+
+<img  :src="$withBase('/h3.png')" alt="foo">
+
+### wgt 热更新的发布
+
+点击`发布`按钮,如下图,提供几种参数供您选择.
+
+<img :src="$withBase('/h1.png')" alt="foo">
+#### 更新方式的选择
+
+1.  静默更新 : 使用`checkUpdate`方法后检查更新,如果有更新会自动下载 app,整个过程没有任何提示,用户第二次打开 app 就会出现更新后的效果.
+2.  提示更新 : 使用`checkUpdate`方法后检查更新,如果有则会弹出确认框,用户确认后会提示正在下载,正在安装,安装完成重启,更新完成等提示.
+
+#### 更新平台的选择
+
+如果只需要某一个平台更新,可以根据需求选择
+
+| iphone 效果如下                                                  | 安卓效果如下                                                          |
+| ---------------------------------------------------------------- | --------------------------------------------------------------------- |
+| <img   width="380"  :src="$withBase('/IMG_0040.PNG')" alt="foo"> | <img   width="380"  :src="$withBase('/S80805-211149.jpg')" alt="foo"> |
+
+### app 更新的发布
+
+app 更新只适用于`安卓 apk` 类型,也就是下载更新包后执行安装.
+
+### 关闭更新
+
+在应用详情的右上角可以关闭更新,关闭更新后用户检查更新后不会作处理
+
+## 常见问题
+
+### 提示版本不一致
+
+在调试热更新的时候必须使用自定义基座,否则得到的版本是 `Hbuilder H5+ App` 的版本.
+
+### 更新替换
+
+由于这种热更新是替换更新,新的热更新包如果有问题,可能导致 app 无法使用,请测试成功后再发布,或者您上传一个专用于测试的 app

docs/hotfix/old/hotfix.md

@@ -0,0 +1,122 @@
+# Hotfix [项目地址](https://github.com/tyaqing/hotfix)
+
+热更新能够不提交应用商店审核而修改 APP 内容,使得 app 的迭代变的非常灵活.
+
+`MogoH5+`在`1.3.0`后加入了`热更新/安装更新`的集成.同时,我们的`热更新服务器`也在内测中,将在不久公测使用.您无需后端就可以完成整个软件的`热更新/安装更新`服务.
+
+| iphone 热更新 效果如下                                           | 安卓热更新效果如下                                                    | 安卓安装更新如下                                                      |
+| ---------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| <img   width="400"  :src="$withBase('/IMG_0040.PNG')" alt="foo"> | <img   width="400"  :src="$withBase('/S80805-211149.jpg')" alt="foo"> | <img   width="400"  :src="$withBase('/S80806-112100.jpg')" alt="foo"> |
+
+## 介绍
+
+在使用热更新前,请看完这份介绍再使用.
+
+### 热更新
+
+对于安卓来说,热更新是没有任何问题的,但是苹果您可以看下面这段话.
+
+#### App store 应用更新说明(引自 dcloud)
+
+> 应用资源更新肯定是违反 apple 政策的，但目前看起来它也不管。你在官网案例那里下载 Appstore 版本的那些 app，大多启动后都会提示更新，反正也都没下架。如果你不是很大的公司，apple 不会理睬你。如果你是大公司，建议不要做整体更新，每次更新几个页面，也不要提示更新后需要重启，这样会安全点。
+
+作者本人的实践中也经常使用热更新,名声不大,不频繁基本上可以自由使用.
+同样,我们加入了`静默更新`这种比较无脑的更新.
+
+### 安装更新
+
+安装更新在这里指的就是更新大版本,比如添加了模块,必须重新安装.
+
+#### 在安卓的安装更新
+
+1.  可以让 APP 提示,然后用户选择自己下载安装
+2.  应用商店更新
+
+#### 在苹果的安装更新
+
+1.  必须提交 AppStore 提交审核
+
+在这里顺便提一下,苹果用户的习惯一般是自己主动更新.
+在苹果应用商店的大厂 app (微信,淘宝,京东) 更新几乎不会受到 app 的更新推送,也没有所谓`检查更新`的功能,也就是说,更新是用户主动操作的.我们的`迭代`同样也遵循这条`行规`.
+
+## 引入方式
+
+可以在`main.js`中添加`checkUpdate(URL);`,打开 app 就会自动检测.还可以放在`检查更新`的按钮上触发.
+
+### ES6 Module 引入
+
+首先在`page.json`把用到`checkUpdate`的页面加上管道`|plusReady`.
+
+然后加载使用.
+
+```js
+import { checkUpdate } from "./utils/hotfix";
+checkUpdate(URL); // 填入您检查api的url地址
+```
+
+### `<script>`方式引入
+
+这种用于没有使用脚手架的开发者
+
+```html
+<title>APP</title>
+<script src="html5plus://ready"></script>  // 这段必须加载title底下
+....
+<script src="path/hotfix-bs.js"></script>
+<script>
+  checkUpdate('https://api.hotfix.femirror.com/public/app/checkUpdate?bundleId=你的appId'); // 填入您检查api的url地址
+</script>
+```
+
+## 热更新配置
+
+热更新分为两种,在 ios 和安卓都可以使用:
+
+1.  静默更新 : 使用`checkUpdate`方法后检查更新,如果有更新会自动下载 app,整个过程没有任何提示,用户第二次打开 app 就会出现更新后的效果.
+2.  提示更新 : 使用`checkUpdate`方法后检查更新,如果有则会弹出确认框,用户确认后会提示正在下载,正在安装,安装完成重启,更新完成等提示.
+
+如果您更新后不想立即重启,可以注释掉`hotfix.js`中的函数`plus.runtime.restart();`,这样,app 会在用户第二打开的时候自动完成更新.
+
+## 后端接收的数据格式
+
+`checkUpdate(url)` 是以 `POST` 去访问 URL 的.数据类型为`application/json`
+
+| 名称    | 描述                            | 类型   |
+| ------- | ------------------------------- | ------ |
+| version | app 当前的版本 ,如 2.1.0        | string |
+| os      | app 设备的系统信息 比如系统版本 | json   |
+| device  | app 设备的设备信息 比如 uuid    | json   |
+
+## 后端返回的数据格式
+
+下面是一个完整的数据返回 返回格式为`application/json` ,返回状态码为`200`.
+
+> 注意 : 返回`200`以外的状态码将不被处理,如果想自行处理可以改写代码
+
+| 名称           | 描述                                                            | 参数                     |
+| -------------- | --------------------------------------------------------------- | ------------------------ |
+| name           | 版本号 如果检测的版本大于本地版本就会更新                       | string                   |
+| title          | 升级提示标题                                                    | string                   |
+| description    | 升级提示内容                                                    | string                   |
+| platform       | 符合升级的平台 ios:升级苹果 android:升级安卓 both:都更新        | `ios` ,`android`, `both` |
+| type           | 安装类型 wgt:热更新 apk:安装更新                                | `wgt`,`apk`              |
+| hotupdate_type | 更新提示 silence:静默更新 tip:提示更新 (apk 的安装是需要提示的) | `silence`,`tip`          |
+| android_url    | 更新下载地址 以`.apk`,`.wgt`结尾的 http 地址                    | url                      |
+
+下面这段`json`可以表达为:
+
+1.  更新平台为 `全部平台`
+2.  `热更新`
+3.  `提示更新`
+
+```json
+{
+  "name": "2.2.1",
+  "title": "发现新版本,快来使用吧!",
+  "description": "1.增加了....\n 2.修复了... 3.杀了一个程序员祭天",
+  "platform": "both",
+  "type": "wgt",
+  "hotupdate_type": "tip",
+  "android_url": "http://cdn.femirror.com/H5FD926B1.wgt"
+}
+```

docs/hotfix/old/introduction.md

@@ -0,0 +1,49 @@
+# 介绍
+
+> `Hotfix`+`FEmirror 云更新` 让您的 H5+应用快速拥有热更新功能.
+
+只需`几分钟`,让您的应用拥有更新能力!
+
+| iphone 热更新 效果如下                                           | 安卓热更新效果如下                                                    | 安卓安装更新如下                                                      |
+| ---------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| <img   width="400"  :src="$withBase('/IMG_0040.PNG')" alt="foo"> | <img   width="400"  :src="$withBase('/S80805-211149.jpg')" alt="foo"> | <img   width="400"  :src="$withBase('/S80806-112100.jpg')" alt="foo"> |
+
+### Hotfix
+
+`Hotfix` 是一个适用于 H5+应用的一个`拓展库`.可以自动完成热更新,和安装更新任务.
+
+只要您的 app 是使用 Hbuilder 开发的,就可以使用 `Hotfix`.具体接入方式请[查看教程](hotfix.md)
+
+### 云更新
+
+`更新云` 是一个`app`版本更新的管理平台,提供版本更新服务.
+
+单独的 `Hotfix` 还需要后端的协作,比如`版本管理`,`下载服务`.
+
+`FEmirror 云更新`就是为您提供`版本管理`,`下载服务`的服务的.
+
+### 如何 3 分钟接入云更新
+
+#### 1.如果您是 MogoH5+ 开发者
+
+如果您是`MogoH5+`的开发者,`1.3`后是内置了热更新,只要后端完成相关更新逻辑,就可以使用了.
+
+如果想要更快的方式接入,可以使用`FEmirror 云更新`
+
+#### 2.如果您是 Hbuilder 开发者
+
+如果您的应用是使用`mui`开发,也没有使用`Mogoh5+`,您可以以`<script>`的方式引入`hotfix`获得更新能力.
+
+同样,搭配`FEmirror 云更新`使用可以让您快速获得热更新能力.
+
+### `FEmirror 云更新` 下一步计划
+
+下一步会加入数据统计,比如安装设备的系统分布,版本分布等,您也可以提出宝贵意见
+
+## 赞助
+
+您的赞助会使`MogoH5+`发展的更好,所赞助的资金都将提升`FEmirror 云更新`服务.
+
+| 微信                                                       | 支付宝                                                        |
+| ---------------------------------------------------------- | ------------------------------------------------------------- |
+| <img width="200" :src="$withBase('/wxpay.JPG')" alt="foo"> | <img  width="200"  :src="$withBase('/alipay.JPG')" alt="foo"> |

docs/hotfix/old/usage.md

@@ -0,0 +1,32 @@
+# 接入方式
+
+## 引入方式
+
+可以在`main.js`中添加`checkUpdate(URL);`,打开 app 就会自动检测.还可以放在`检查更新`的按钮上触发.
+
+### ES6 Module 引入
+
+首先在`page.json`把用到`checkUpdate`的页面加上管道`|plusReady`.
+
+然后加载使用.
+
+```js
+import { checkUpdate } from "./utils/update";
+checkUpdate(URL); // 填入您检查api的url地址
+```
+
+### `<script>`方式引入
+
+这种用于没有使用脚手架的开发者
+
+```html
+<title>APP</title>
+<script src="html5plus://ready"></script>  // 这段必须加载title底下
+....
+<script src="path/update.js"></script>
+<script>
+  checkUpdate('https://api.hotfix.femirror.com/public/app/checkUpdate?bundleId=你的appId'); // 填入您检查api的url地址
+</script>
+```
+
+如果您没有后端接入,可以使用`FEmirror云更新`