mpvue文档
项目搭建
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
page
小程序中设置页面颜色时候需要设置page,否则无效。
生命周期
除了Vue本身的生命周期外,mpvue还兼容了小程序生命周期,这部分生命周期钩子的来源于微信小程序的Page,除特殊情况外,不建议使用小程序的生命周期钩子。
import遇到的坑
在import 的时候导入文件时候不能使用绝对路径,必须使用相对路径(特别是vuex中)
使用fly.js请求数据交互(axios)
- 小程序中不支持使用axios,会报错:XMLHttpRequest is not a constructor
- 原因:小程序的环境和浏览器的环境不一样
- 解决方法:使用其他库: flyio
# 引入并注册
import Fly from 'flyio/dist/npm/wx'
// 配置fly进行ajax请求
let fly = new Fly
Vue.prototype.$fly = fly
# 使用
beforeMount() {
this.$fly.get(MOVIE_URL)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
页面跳转
- 在mpvue中对vue-router的支持不好,问题较多
- 进行页面跳转的时候可以使用小程序提供的api
- wx.navigateTo() 保留当前页面,可回退
- wx.redirectTo() 不保留,不能回退
- wx.switchTab() 使用于tabBar页面
原生小程序 VS mpvue对比总结
- 原生小程序运行更稳定些,兼容性好,mpvue可能在某些方面存在兼容问题(vue-router)
- mpvue支持vue组件化开发,效率更高,功能更强大(双向数据绑定,vuex)
- mpvue可基于webpack组件化,工程化开发
- 原生不支持npm安装包,不支持css预处理
- 支持computed计算属性和watcher监听器,模板语法中只支持简单的js表达式。可以直接写div、span等标签
- 之前会vue的工程师上手mpvue框架的成本较低
mpvue中使用的vuex报错问题
错误:[vuex] unknown mutation type: receive_list(有可能是mutation type引用变量问题,可以先不用mutation-type单独模块抽取变量)
页面必须配置json,{}空对象
否则报错:VM1218:5 pages/detail/main.json 文件解析错误 SyntaxError: Unexpected end of JSON input
使用beforeMount中的this来获取传递过来的数据实现详情页
使用this.$mp.query.index
取代onLoad中的options
以下报错是因为引入的js文件路径问题,不能使用绝对路径
Cannot read property ‘call’ of undefined
在写mpvue项目时候经常会出现以下错误:
VM11460:1 thirdScriptError
sdk uncaught third Error
Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefinedCannot read property 'call' of undefined TypeError: Cannot read property 'call' of undefined
# 解决方法:
打包之后这个警告也还在,并且报错 Uncaught TypeError: Cannot read property 'call' of undefined。解决方法是在 webpack.base.conf.js 的 module 下加 noParse: [/ali-oss/], 在编译时忽略上面的警告。再之后就出现上篇开头描述的情况。