mpvue进阶
目前的开发挑战
多端开发工作量大, 端越多开发工作量越大
高昂的学习成本, 端越多学习成本越高
解决方案：Vue + 多端小程序 = mpvue2.0
介绍
mpvue是美团开源的小程序开发框架
彻底的组件化开发能力 + 完整的VueJs开发体验 + 生态支持
mpvue2.0支持微信、支付宝、百度和头条小程序 【一套代码, 多端适配】
技术栈
01.png
技术选型
02.png
原生小程序缺点
03.png
mpvue与原生的对比
04.png
脚手架初始化mpvue项目
$ vue init mpvue/mpvue-quickstart my-project
$ cd my-project
$ cnpm i
$ npm run dev
mpvue原理
mpvue保留了vue.runtime核心方法, 无缝继承了Vue.js的基础能力
mpvue-template-compiler, mpvue-loader提供了将vue的模板语法转换到小程序的wxml语法的能力
修改了vue的建构配置, 使之构建出符合小程序项目结构的代码格式: json/wxml/wxss/js文件
mpvue生命周期
05.jpg
集成scss
cnpm i -D sass-loader node-sass
集成组件库(以vant-weapp为例)
cnpm i vant-weapp -S --production
// 修改构建配置 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: [‘.*’]
}])
]
})
}
集成mpvue-router-patch
cnpm i -S mpvue-router-patch
// main.js配置
import MpvueRouterPatch from ‘mpvue-router-patch’
Vue.use(MpvueRouterPatch)
集成flyio
cnpm i -S flyio
// 初始化flyio对象
function createFly() {
if (mpvuePlatform === ‘wx’) {
const Fly = require(‘flyio/dist/npm/wx’)
return new Fly()
} else {
return null
}
}
// 处理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)
})
})
}
}
// 处理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)
})
})
}
}