mpvue使用入门
2019-12-23 本文已影响0人
ysp123
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,附上一张首页图