mpvue 是一个使用 Vue.js 开发小程序的前端框架
使用 mpvue
开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:
-
彻底的组件化开发能力:提高代码
-
完整的
Vue.js
开发体验 -
方便的
Vuex
数据管理方案:方便构建复杂应用 -
快捷的
webpack
构建机制:自定义构建策略、开发阶段 hotReload -
支持使用 npm 外部依赖
-
使用
Vue.js
命令行工具 vue-cli 快速初始化项目 -
H5 代码转换编译成小程序目标代码的能力
使用mpve最大的好处是不用复习原始微信小程序的知识,直接用vue的写法快速开发,在后期H5转微信小程序,转字节跳动小程序更加方便。
目标:开发一款志愿填报的微信小程序,后期转H5与抖音小程序。
1. 初始化
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
UI框架使用vant-weapp官网:https://youzan.github.io/vant-weapp/#/intro
开发需要到官网看文档,如果是原生的微信小程序,可以使用npm install形式,但是mpvue开发不可以,需要到github地址
https://github.com/youzan/vant-weapp去下载zip压缩包,将dist文件夹拷贝至项目根目录的static下,在app.json里这样使用
"usingComponents": {
"van-button": "/static/vant/button/index"
}
2. 开发注意事项
1)如果一个页面的循环特别多,会导致key的重复,在H5一般会这样处理
v-for="(item, index) in options" :key="‘xxx’+index"
这种写法在mpvue里不支持,需要写成下面的。
v-for="(item, index) in options" :key="index"
2)新增页面需要npm run dev重启一下,并且需要在app.json里增加,用开发者工具打开对应项目的dist/wx即可。
3)使用this.$root.$mp.query获取参数需要在monted中获取,在created中会报Cannot read property 'query' of undefined 。
4)v-html不支持,还有尽量不要再data里放特别大的数据,会导致在微信小程序里很卡,放到页面page{}外的地方或者放到微信缓存里都可以。