美文网首页
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框架

    【最近更新】mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序...

  • mpvue使用入门

    mpvue是一个类vue的小程序框架,帮助开发者提高效率,增加开发体验,开发者只需要熟悉vue的api语法使用即可...

  • 2018-04-25

    1.http://mpvue.com/mpvue/quickstart/ // mpvue 小程序的使用 2.n...

  • mpvue实战开发美团外卖小程序

    mpvue-meituan mpvue-meituan 是一款使用mpvue开发的实战小程序项目,完全仿制美团官方...

  • mac安装指定的node版本

    最近在node环境12.12.0中使用mpvue写小程序时, 编译出错 原因是mpvue项目中添加了 mpvue-...

  • mpvue系列(四):建议与注意事项

    1、mpVue使用中好的建议? (1)mpvue建议使用v-model.lazy绑定方式以优化性能,此外v-mod...

  • mpvue使用

    1、初始化微信小程序项目 2、安装依赖 3、项目启动 4、项目结构 5、目录介绍

  • mpvue系列(三):组件、数据交互

    1、mpVue项目组件的使用? (1) mpvue 可以支持小程序的原生组件,比如: picker,map、swi...

  • MPVUE 入坑笔记

    1.小程序官方的组件事件在mpvue中不能直接使用。例如:bindinput、bindblur,在mpvue中需要...

  • 如何用mpvue搭建小程序

    由于公司需要进行小程序的开发,自己就上网查询了一下使用mpvue框架来做小程序的教程。 在使用mpvue的时候首先...

网友评论

      本文标题:mpvue使用入门

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