创建mpvue项目
引入脚手架
npm install vue-cli -g
创建基于mpvue的项目 ,选项全部回车Yes,ESLint 选 No
vue init mpvue/mpvue-quickstart projectName
· VScode 打开项目, cnpm install 安装依赖,npm run dev 编译
· 会发现文件夹内多出 dist 文件夹,里面的 wx 就是 run dev 编译出的 微信小程序代码
· 使用微信开发者工具导入 wx ,将开发者工具设置为保存时自动编译
· 尔后在 VScode 里编写代码保存会自动编译到 dist 的 wx ,小程序开发工具会同步更新页面
适用依赖迁移
配置 less 编译环境
cnpm install less --save
cnpm install less-loader --save
在 webpack.base.conf.js 的 rules 节点下新增
{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”
}
配置 vant 组件,旧项目使用的是 vant UI库 ,这里入乡随俗使用 vant-weapp ,拉取下方链接
git clone https://gitee.com/vant-contrib/vant-weapp.git
下载完 UI 库后将里面的 dist 文件夹改名 vant 放到 项目的 static 文件夹下
在需要使用 vant 组件的页面 mian.json 文件中像下方一样引入即可,或是在 app.json 中全局引入 ,全局引入的话路径改成 /static 开头就可以
‘usingComponents’ : {
‘van-button’ : ‘…/…/static/vant/tabs/index’
}
配置Axios
cnpm install axios --save
cnpm install qs --save
下面是 axios 请求和拦截函数,在 main 中引入 ,尔后在页面中使用 this.$call 调用 。
import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';
import store from "@/store"
import global from '../config/config';
axios.defaults.timeout = 1000000; // 请求熔断时间
axios.defaults.baseURL = global.baseUrl; // 请求前缀
axios.defaults.headers = { // 请求头内容
"content-type": "application/json"
};
axios.interceptors.request.use(
function (config) {
// ...
return config;
}, function (error) {
// ...
return Promise.reject(error);
});
axios.interceptors.response.use(
function (response) {
// ...
return response;
}, function (error) {
// ...
return Promise.reject(error);
})
axios.defaults.adapter = function (config) {
return new Promise((resolve, reject) => {
// get请求 参数序列化
let data = config.method === 'get' ? config.params : qs.stringify(config.data)
wx.request({
url: config.baseURL + config.url,
method: config.method,
header: config.headers,
data: data,
success: (res) => { return resolve(res) },
fail: (err) => { return reject(err) }
})
})
}
// 封装 外部请求函数
function call(config) {
if (!config.hide) {
wx.showLoading({
title: '加载中',
})
}
return new Promise((resolve, reject) => {
axios({
method: config.method,
url: config.url,
params: config.params
}).then(res => {
!config.hide && wx.hideLoading();
if (res.status) {
resolve(res.data);
} else {
reject(res.data);
}
}).catch(err => {
!config.hide && wx.hideLoading();
reject(err);
})
})
}
export default {
call
}
Vue.prototype.$call = call;
下面是迁移过程中遇到的问题
图片没有设置高度会被 wx 默认设置 240px 高度,需要手动赋值高度。
v-show 无法更新配置了display 属性的 dom元素,可以使用 v-if 替代。
map.getCenterLocation API 无法在 vue 生命周期生效,需要放到小程序的生命周期里
( onLoad、onShow)
bind 开头的事件 ( 例如 bindtap ) , 改成 @ ( @tap )
有些 bind 事件会莫名编译失效,例如 <map> 的 @regionchange 事件失效,得同时加上 @end 绑定事件才可以触发
\
vant-weapp 使用问题
// 原 vue 中的 vant ,输入框双向绑定
<van-field
v-model="name"
@input="inputFn(name)"
/>
// 现 mpvue 中的 vant-weapp ,这样写才能双向绑定
<van-field
v-model="name"
@input="
name = $event.mp.detail;
inputFn(name);
"
/>