美文网首页
mpvue使用入门

mpvue使用入门

作者: ysp123 | 来源:发表于2019-12-23 23:25 被阅读0次

    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,附上一张首页图

    相关文章

      网友评论

          本文标题:mpvue使用入门

          本文链接:https://www.haomeiwen.com/subject/tjztoctx.html