使用mpvue开发微信小程序

前言

16年小程序刚出来的时候，就准备花点时间去学学。无奈现实中手上项目太多，一个接着一个，而且也没有开发小程序的需求，所以就一拖再拖。

直到上周，终于有一个小程序的项目。如果现在学小程序，时间上肯定来不及了（就给了一周的时间）。正好前段时间看到美团开源了一个使用vue来开发微信小程序的框架 mpvue。因为平时vue用的多，所以就决定使用 mpvue 来开发。

mpvue 介绍

我们看一下mpvue官网上的介绍：

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

mpvue 优势

1. 彻底的组件化开发能力：提高代码复用性
2. 完整的 Vue.js 开发体验
3. 方便的 Vuex 数据管理方案：方便构建复杂应用
4. 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
5. 支持使用 npm 外部依赖
6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
7. 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目前还是有坑的，不过后面迭代的版本功能会越来越完善。