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/], 在编译时忽略上面的警告。再之后就出现上篇开头描述的情况。

你可能感兴趣的:(微信小程序,mpvue)