221 lines
7.1 KiB
Markdown
Executable File
221 lines
7.1 KiB
Markdown
Executable File
# 开发
|
||
|
||
## 下载脚手架
|
||
|
||
首先下载脚手架
|
||
脚手架项目地址[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(根据性能)的加载时间,可以通过增加窗口过场动画的时间弥补,或者预加载窗口
|