mpvue的使用,包含axios、router的集成等完美结合小程序

mpvue开发微信小程序框架的使用注意事项:

  1、路由跳转,引用mpvue-router-patch

  在main.js文件中引入控件:import MpvueRouterPatch from ‘mpvue-router-patch‘  
              Vue.use(MpvueRouterPatch);
  2、axios的配置注意事项
axios.defaults.adapter = function (config) {
return new Promise((resolve, reject) => {
let param = [];
for (let o in config.params) {
param.push(`${o}=${config.params[o]}`);
}
let wxconfig = {
url: param.length !== 0 ? (config.url + ‘?‘ + param.join(‘&‘).toString()) : config.url,
method: config.method,
data: config.data,
header: config.headers,
success: function (res) {
resolve(res)
},
fail: function (res) {
reject(res);
}
}
let requestTask = wx.request(wxconfig);
})
}

//HTTPrequest拦截
axios.interceptors.request.use(config => {
if (config.headers.loading != false) {
wx.showLoading({
title: ‘正在加载中‘,
mask: true
})
}
const token = store.state.token;
//带入自定义的token标志
if (token) {
config.headers[‘X-Access-Token‘] = token
}
return config

}, error => {
return Promise.reject(error)
})
上述只陈述了几个比较重要的地方。如想了解全部配置以及mpvue使用情况,源代码已上传到码云,欢迎下载参考:Git地址

mpvue的使用,包含axios、router的集成等完美结合小程序

上一篇:php实现微信小程序登录


下一篇:小程序开发笔记(七)—加入内容安全检测