mpvue使用入门

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

*** 作以上步骤即可初始化一个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 的回调函数即可。如下：

以下使用mpvue创建一个小程序

执行npm run dev 后可以看到生成 dist/wx的路径，将生成的文件目录导入小程序开发工具即可。

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

下面是最近了解的，开发者使用较多的框架：

1. WePY

WePY属腾讯系，是一款组件化的开发框架，比原生小程序的开发模式更接近于MVVM ，它类Vue的开发风格，让Vue开发者很容易上手。

Github地址: https://github.com/Tencent/wepy

官网地址：https://tencent.github.io/wepy

2. mpvue

mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

Github：https://github.com/Meituan-Dianping/mpvue

官网：http://mpvue.com/

在实际开发中，很多时候都需要要上传图片，但是对于上传多张时需要一张张的上传，因为图片都可能比较大，这时就需要我们对上传图片的API进行进一步的处理，这样就解决了我们同时选择上传多张图片需求。所以为了方便以后使用，封装成一个特定的组件分享出来，也许很多能用到，也可能用不到，但是修改一下还是差不多一样可以用的。

多张图片上传的原理其实就是用递归的方法，在每一张上传完之后再继续上传下一张，直到完成为止。

新建一个uploadImages组件文件，定义组件的样式结构及js文件。

1.页面样式布局

view

css

图片插件这样大概就完成了，不过不是每一个人都是和我一样的情况，使用请具体项目分析。

实例请查看地址： https://github.com/kingbuwu/uploadImages

---