前言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 标签就行了。同时也可以使用小程序自身提供的api完成页面跳转 wx.navigateTo({ url: `/pages/counter/main?text=${this.text}` }); 2.input框光标位置在input输入框内输入内容时，当我想修改前面已经输入好的文字，把光标移动到需要修改的位置。修改完之后，光标自动跑到最后了，这样给用户体验不好。 可以使用 v-model.lazy 但是 lazy 在输入框失去焦点时才能触发。可以使用setTimeout来延迟执行。 setTimeout(() => { ... let ipt = this.text; ... },100) 这样就能解决了。3.弹出层滚动穿透写了一个简单的弹窗，发现滚动弹出层里的内容，后面的内容也跟着滚动。开始以为阻止冒泡就行了。结果试了一下，还是不行。在 issues 里看到别人提供的解决办法，试了一下，可以用。 ..... <-- 弹出层 -->

....

点击弹窗按钮时，把 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目前还是有坑的，不过后面迭代的版本功能会越来越完善。}