mpvue踩坑

mpvue踩坑

前言

最近公司要求开发一个小程序,没有接触过小程序开发,查询小程序官方文档发现完全使用了一套新的语法。由于时间比较紧,所以就用美团使用vue语法开发的mpvue作为解决方案。

小程序

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

mpvue

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

开发中遇到的一些坑

页面配置

mpvue本质上最终还是把vue转成小程序所需要的文件格式,所以默认每个页面都需要配置main.js,大部分情况下main.js内容都是相同的

路由

由于小程序与vue的差别,所以不能使用vue-router,这里我们直接使用wx提供的API封装了下

也有第三方插件:mpvue-router-patch

生命周期

vue跟wx小程序的生命周期是有些差别的,部分通用,以小程序为主

组件

大部分组件还是跟vue模式一样开发,slot只能渲染首次,数据变动后无法再次渲染

状态管理

使用vuex来管理项目,这点跟vue项目是统一的

接口请求

由于微信有要求,所以只能使用微信小程序提供的API来请求接口,所以我们在官方API基础上自行封装了下

也有第三方插件:fly

文本渲染

由于小程序是不能解析HTML Dom的,所以需要第三方插件来解析HTML mpvue-wxparse

同时也还有可以当markdown转为mpvue的mpvue-markdown-parser

结论

总的来说,mpvue还是给开发带来了一些便利,能够使用大部分vue语法、API,也能实现组件化开发。不过还是需要学习微信小程序的一些特性。

参考文献

mpvue 解析
mpvue踩坑记录

-------------本文结束感谢您的阅读-------------