前言
16年小程序刚出来的时候，就准备花点时间去学学。无奈现实中手上项目太多，一个接着一个，而且也没有开发小程序的需求，所以就一拖再拖。
直到上周，终于有一个小程序的项目。如果现在学小程序，时间上肯定来不及了（就给了一周的时间）。正好前段时间看到美团开源了一个使用vue来开发微信小程序的框架 mpvue。因为平时vue用的多，所以就决定使用 mpvue 来开发。
mpvue 介绍
我们看一下mpvue官网上的介绍：
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
mpvue 优势
- 彻底的组件化开发能力：提高代码复用性
- 完整的 Vue.js 开发体验
- 方便的 Vuex 数据管理方案：方便构建复杂应用
- 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
- 支持使用 npm 外部依赖
- 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
- H5 代码转换编译成小程序目标代码的能力
开发过程
通过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目：
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
接下来，你只需要启动微信开发者工具，引入项目即可预览到你的第一个 mpvue 小程序。
下面是一个项目目录结构。
和开发vue完全一样，不过需要注意的是，小程序不支持dom操作，所以vue中的 ref 也不能使用。
其它基础可以看mpvue官网，上面有详细的使用说明。下面主要说一个在开发过程中遇到的坑。
mpvue开发中遇到的问题
1.路由跳转
vue中 使用 vue-router 来进行路由跳转的。mpvue中只需要用 a 标签就行了。
<a href="/page/counter/main?text=123">
同时也可以使用小程序自身提供的api完成页面跳转
wx.navigateTo({
url: `/pages/counter/main?text=${this.text}`
});
2.input框光标位置
在input输入框内输入内容时，当我想修改前面已经输入好的文字，把光标移动到需要修改的位置。
修改完之后，光标自动跑到最后了，这样给用户体验不好。
<input type="text" v-model="text">
可以使用 v-model.lazy 但是 lazy 在输入框失去焦点时才能触发。可以使用setTimeout来延迟执行。
<input type="text" v-model.lazy="text">
setTimeout(() => {
...
let ipt = this.text;
...
},100)
这样就能解决了。
3.弹出层滚动穿透
写了一个简单的弹窗，发现滚动弹出层里的内容，后面的内容也跟着滚动。开始以为阻止冒泡就行了。结果试了一下，还是不行。在 issues 里看到别人提供的解决办法，试了一下，可以用。
<scroll-view :scroll-y="scroll" style="height:200px" scroll-with-animation="true">
.....
<-- 弹出层 -->
<div class="layer">
....
</div>
</scroll-view>
点击弹窗按钮时，把 scroll 设置为 false。 点击关闭按钮时，再把 scroll 设置为true 。同时设置body的样式
body{
overflow-y: hidden;
height: 100%;
}
4.引入echarts 打包后文件过大
项目中需要引入echarts,直接引入后，打包完体积超过 2M了，没办法提交。echarts提供的有精简版本，我们可以导入精简的版本。
import echarts from "echarts/dist/echarts.simple.min";
import mpvueEcharts from "mpvue-echarts";
具体的 echarts 使用，请看文档，有详细的介绍。
5.页面加载生命周期
当从一个页面跳转到另一个页面时，我们在新页面不能使用created来初始化获取接口返回的内容。
因为小程序首次加载会把所以页面的created都执行。
我们可以使用下面方法
async onLoad() {
....
}
结束语
如果之前使用过vue，那么使用mpvue来开发小程序上手非常快，基本上可以无缝对接。
mpvue目前还是有坑的，不过后面迭代的版本功能会越来越完善。