first commit
This commit is contained in:
13
docs/guide/about.md
Executable file
13
docs/guide/about.md
Executable file
@@ -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"> |
|
||||
220
docs/guide/development.md
Executable file
220
docs/guide/development.md
Executable file
@@ -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/`,将这个填入页面入口.
|
||||
|
||||
|
||||
|
||||
然后使用 Hbuilder 基座进行调试测试.
|
||||
|
||||
|
||||
|
||||
## 新建页面
|
||||
|
||||
假如我们要新建一个名称为`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(根据性能)的加载时间,可以通过增加窗口过场动画的时间弥补,或者预加载窗口
|
||||
257
docs/guide/guide.md
Executable file
257
docs/guide/guide.md
Executable file
@@ -0,0 +1,257 @@
|
||||
# 简介
|
||||
|
||||
|
||||
|
||||
`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/`,将这个填入页面入口.
|
||||
|
||||
|
||||
|
||||
然后使用 Hbuilder 基座进行调试测试.
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
主要怎么使用 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 中修改页面入口
|
||||
53
docs/guide/introduction.md
Executable file
53
docs/guide/introduction.md
Executable file
@@ -0,0 +1,53 @@
|
||||
# 介绍
|
||||
|
||||
> MogoH5+ 是以一个 `vue+webpack` 的多页面脚手架,配合[HTML5+](http://www.html5plus.org/doc/h5p.html)使用可以快速开发安卓/苹果应用.
|
||||
|
||||
|
||||
|
||||
下载 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"> |
|
||||
7
docs/guide/practice/details.md
Executable file
7
docs/guide/practice/details.md
Executable file
@@ -0,0 +1,7 @@
|
||||
# 实现细节
|
||||
|
||||
## 多页面的实现
|
||||
|
||||
## nodemon 的使用
|
||||
|
||||
## mui 的加载
|
||||
9
docs/guide/practice/webview.md
Executable file
9
docs/guide/practice/webview.md
Executable file
@@ -0,0 +1,9 @@
|
||||
# Webview
|
||||
|
||||
## openWebview()
|
||||
|
||||
## openWebviewFast()
|
||||
|
||||
## preLoad()
|
||||
|
||||
## showWebviewById()
|
||||
18
docs/guide/production.md
Executable file
18
docs/guide/production.md
Executable file
@@ -0,0 +1,18 @@
|
||||
# 发布
|
||||
|
||||
## 打包
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
运行命令后会有一个`dist`目录,里面的经过压缩的静态文件.
|
||||
|
||||
### Hbuilder 发行打包
|
||||
|
||||
在使用 Hbuilder 制作安装包前,请将`入口文件`修改成`dist/index.html`.
|
||||
然后可以安心的打包了.
|
||||
|
||||
## 热更新包
|
||||
|
||||
在 Hbuilder 菜单栏中选择`发布`->`制作移动APP资源升级包`,得到的`wgt`文件是可以用来更新的
|
||||
84
docs/guide/qa.md
Executable file
84
docs/guide/qa.md
Executable file
@@ -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
|
||||
);
|
||||
```
|
||||
140
docs/guide/update_log.md
Executable file
140
docs/guide/update_log.md
Executable file
@@ -0,0 +1,140 @@
|
||||
# 更新日志
|
||||
|
||||
|
||||
|
||||
### 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 的支持
|
||||
Reference in New Issue
Block a user