使用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目前仍是有坑的，不事后面迭代的版本功能会愈来愈完善。