项目框架搭建
项目初始化
- 打开视觉稿
- 初始化mpvue项目
- 删除无关内容
npm run dev进入开发模式
- 打开微信开发者工具
- 设置AppId
- 勾选"不校验合法域名"
集成scss
安装依赖
npm i -D sass-loader node-sass
1
使用
<style lang="scss" scoped>
.img {
width: 100%;
}
</style>
1
2
3
4
5
2
3
4
5
集成vant-weapp组件库
官网
https://youzan.github.io/vant-weapp/
安装依赖
npm i vant-weapp -S --production
1
引入组件
{
"usingComponents": {
"van-button": "/path/to/vant-weapp/dist/button/index"
}
}
1
2
3
4
5
2
3
4
5
使用组件
<van-button type="primary">按钮</van-button>
1
修改构建配置
修改webpack.base.config.js
if (/^wx$/.test(PLATFORM)) {
baseWebpackConfig = merge(baseWebpackConfig, {
plugins: [
new CopyWebpackPlugin([{
from: resolve('node_modules/vant-weapp/dist'),
to: resolve('dist/wx/vant-weapp/dist'),
ignore: ['.*']
}])
]
})
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
集成mpvue-router-patch插件
github地址：https://github.com/F-loat/mpvue-router-patch
安装依赖
npm i -S mpvue-router-patch
1
安装插件
import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)
1
2
3
2
3
使用
this.$router.push('/pages/categoryList/main')
1
集成flyio
github地址：https://github.com/wendux/fly
安装依赖
npm i -S flyio
1
使用
初始化Flyio对象
function createFly() {
if (mpvuePlatform === 'wx') {
const Fly = require('flyio/dist/npm/wx')
return new Fly()
} else {
return null
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
处理get请求
export function get(url, params = {}) {
const fly = createFly()
if (fly) {
return new Promise((resolve, reject) => {
fly.get(url, params).then(response => {
console.log(response)
resolve(response)
}).catch(err => {
console.log(err)
handleError(err)
reject(err)
})
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
处理post请求
export function post(url, params = {}) {
const fly = createFly()
if (fly) {
return new Promise((resolve, reject) => {
fly.post(url, params).then(response => {
console.log(response)
resolve(response)
}).catch(err => {
console.log(err)
handleError(err)
reject(err)
})
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
这里的handleError我们可以根据实际业务场景进行定制