使用mpvue开发微信小程序

时间:2023-03-08 17:00:25

前言

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

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

mpvue 介绍

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

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtimecompiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 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 小程序。

下面是一个项目目录结构。

使用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目前还是有坑的,不过后面迭代的版本功能会越来越完善。