前言

2016年小程序刚出来的时候，我就打算花点时间学习一下，可惜手头的项目太多，一个接一个，没有开发小程序的需求，所以就一直拖着。

直到上周，终于拿到了一个小程序项目，如果现在学小程序，肯定是来不及的（我只有一周的时间）。恰巧前段时间看到美团开源了用Vue开发微信小程序的框架，由于自己用Vue比较多，就决定用它开发。

介绍

我们先来看看官网上的介绍：

它是一个使用 Vue.js 开发小程序的前端框架，该框架基于 Vue.js 核心，并修改了 Vue.js 的实现，使其可以运行在小程序环境中，为小程序开发引入了一套完整的 Vue.js 开发经验。

优点 完善的组件化开发能力：提高代码复用性 完整的Vue.js开发体验 便捷的Vuex数据管理方案：方便构建复杂应用 快速构建机制：自定义构建策略，开发阶段支持使用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

接下来你只需要启动微信开发者工具，导入项目就可以预览你的第一个小程序了。

下面是项目目录结构。

和开发Vue一模一样，但是需要注意的是小程序不支持DOM操作，所以不能使用Vue中的ref。

其他基础可以参考官网，有详细的说明，下面主要说一下开发过程中遇到的一个坑。

开发中遇到的问题1.路由跳转

在vue中，使用vue-来进行路由跳转，在vue中只需要一个标签即可。

也可以使用小程序本身提供的API来完成页面跳转

wx.navigateTo({ url: `/pages/counter/main?text=${this.text}` });

2. 方框光标位置

当我在输入框输入内容的时候，如果我想修改之前已经输入过的文字，就把光标移动到需要修改的位置，修改完之后光标又自动移动到最后面，用户体验很差。

可以使用v-.lazy，但是lazy只有在输入框失去焦点时才会触发，可以用它延迟执行。

setTimeout(() => { ... let ipt = this.text; ... },100)

这样就能解决问题。

3.弹出层滚动穿透

我写了一个简单的弹出窗口，发现当我滚动弹出层中的内容时，它后面的内容也会滚动。我想我可以阻止弹出窗口的发生。但是没有用。我看到了别人在这里提供的解决方案并尝试了一下。它有效。

..... <-- 弹出层 -->

点击弹出按钮时设置为true，点击关闭按钮时设置为true，同时设置body样式

body{ overflow-y: hidden; height: 100%; }

4. 导入包后文件过大

项目需要引入，直接引入后打包体积超过2M，无法提交，提供了精简版，我们导入精简版即可。

import echarts from "echarts/dist/echarts.simple.min"; import mpvueEcharts from "mpvue-echarts";

具体的使用方法请参见文档的详细介绍。

5. 页面加载生命周期

当从一个页面跳转到另一个页面的时候，我们不能用新的页面来初始化获取接口返回的内容。

因为小程序第一次加载的时候会执行所有页面。

我们可以使用下面的方法

async onLoad() { .... }

结论

如果你之前用过Vue，那么开发小程序会非常容易上手，基本无缝衔接。

目前还存在一些缺陷，但后续迭代版本的功能会越来越完善。