基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。
mpvue 2.0 在 微信小程序 的基础上增加了对 百度智能小程序、头条小程序 和 支付宝小程序 的支持,升级了相关依赖设施。为保证老用户的使用体验、同时对新项目提供更有针对性的支持,我们进行了 major 版本升级。此文档将作为新功能使用向导或升级指南。
mpvue 升级到 2.0 后,老项目并不能直接更新到此版本、手动升级方式并附后文。对于不考虑升级的开发者,可以继续使用原来的版本。使用 mpvue-quickstart 项目模板新创建的项目,将默认升级到 2.0。
对于不升级 2.0 的项目,可以继续使用1.x 的大版本,目前1.x 会持续在 1.4.x 上继续维护 同时请注意在构建脚本中同步 fileExt
配置项,修改方式如下:
vue-loader.config.js
中传递 fileExt
配置项: /build/vue-loader.conf.js
config/index.js
中 增加 fileExt
配置项:/config/index.js,并修改如下代码:// var fileExt = fileExtConfig[process.env.PLATFORM] // 修改前
var fileExt = fileExtConfig[process.env.PLATFORM || 'wx'] // 修改后
yarn add [email protected] [email protected] [email protected]
第一步:使用最新的 mpvue/mpvue-quickstart 项目模板,初始化 mpvue 小程序项目 第二步:安装依赖并运行
# 初始化项目
> vue init mpvue/mpvue-quickstart myproject
> cd myproject
# 安装依赖
> yarn
# 开发时构建
> npm dev
# 打包构建
> npm build
# 指定平台的开发时构建(微信、百度、头条、支付宝)
> npm dev:wx
> npm dev:swan
> npm dev:tt
> npm dev:my
# 指定平台的打包构建
> npm build:wx
> npm build:swan
> npm build:tt
> npm build:my
第一步:按照升级清单更新依赖项版本,也可使用如下安装命令
依赖升级脚本
yarn add [email protected] [email protected] [email protected] [email protected] [email protected]
第二步:更新构建脚本
build
,config
目录到老项目中package.json
中 script
指令到老项目中第三步: 指定平台执行构建,不指定将默认为构建微信小程序
注意: 如果构建脚本已经过定制,升级时请勿遗漏
依赖项 | 更新说明 |
---|---|
mpvue-quickstart |
项目模板默认最新,依赖项和构建脚本已更新 |
mpvue |
更新到 2.0.0 版本 |
mpvue-template-compiler |
更新到 2.0.0 版本 |
mpvue-loader |
更新到 2.0.0 版本 |
webpack-mpvue-asset-plugin |
更新到 2.0.0 版本 |
webpack-mpvue-vendor-plugin |
更新到 2.0.0 版本 |
mpvue-webpack-target |
未做更新,老版本 1.0.3 |
本次升级,旨在提供对其他小程序平台的能力支持,主要涉及的功能点如下:
统一api调用方式: mpvue 2.0 中, api 调用建议统一改为 mpvue 前缀,如需对特定平台做单独处理,可通过 mpvuePlatform 特征变量进行判断。若不考虑多平台适配,可继续使用原有方式调用 api。
let logs
if (mpvuePlatform === 'my') {
logs = mpvue.getStorageSync({key: 'logs'}).data
// 等效 logs = my.getStorageSync({key: 'logs'}).data
} else {
logs = mpvue.getStorageSync('logs')
}
说明: mpvue 在统一api调用方式上只做简单的前缀统一,并不抹平api差异,此部分交由开发同学自行决定。
感谢 @sexdevil 提交的pr https://github.com/Meituan-Dianping/mpvue/pull/1362