mpvue使用入门

206 阅读1分钟

mpvue是一个类vue的小程序框架,帮助开发者提高效率,增加开发体验,开发者只需要熟悉vue的api语法使用即可上手。官方还提供了了基于@vue/cli脚手架的快速开发方式。执行

vue init mpvue/mpvue-quickstart  minidemo

cd  minidemo
npm install
npm run dev

操作以上步骤即可初始化一个mpvue的初始化项目。这样mpvue的入门就完成了。

mpvue除了支持vue的生命周期钩子函数,还支持小程序的生命周期钩子函数,官方建议 除特殊情况外,不建议使用小程序的生命周期钩子。


常见问题

1. 如何获取小程序在 page onLoad 时候传递的 options

在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。

2. 如何获取小程序在 app onLaunch/onShow 时候传递的 options

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

3. 如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },

   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}

以下使用mpvue创建一个小程序
执行npm run  dev 后可以看到生成 dist/wx的路径,将生成的文件目录导入小程序开发工具即可。


这样就搭建好了一个基本的mpvue小程序, 可以基于以上创建我们自己的项目。具体内容查看github,附上一张首页图