mpvue的使用总结

mpvue文档

http://mpvue.com/

项目搭建

# 全局安装 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)

1. 小程序中不支持使用axios,会报错：XMLHttpRequest is not a constructor
2. 原因：小程序的环境和浏览器的环境不一样
3. 解决方法：使用其他库： 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);
    });
}

页面跳转

1. 在mpvue中对vue-router的支持不好，问题较多
2. 进行页面跳转的时候可以使用小程序提供的api
   1. wx.navigateTo() 保留当前页面，可回退
   2. wx.redirectTo() 不保留，不能回退
   3. wx.switchTab() 使用于tabBar页面

原生小程序 VS mpvue对比总结

1. 原生小程序运行更稳定些，兼容性好，mpvue可能在某些方面存在兼容问题(vue-router)
2. mpvue支持vue组件化开发，效率更高，功能更强大（双向数据绑定,vuex）
3. mpvue可基于webpack组件化，工程化开发
4. 原生不支持npm安装包，不支持css预处理
5. 支持computed计算属性和watcher监听器，模板语法中只支持简单的js表达式。可以直接写div、span等标签
6. 之前会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/], 在编译时忽略上面的警告。再之后就出现上篇开头描述的情况。