vue 美团框架_mpvue - 美团点评开源的基于 Vue 的微信小程序前端框架

mpvue 2.0

mpvue 2.0 在 微信小程序 的基础上增加了对 百度智能小程序、头条小程序 和 支付宝小程序 的支持,升级了相关依赖设施。为保证老用户的使用体验、同时对新项目提供更有针对性的支持,我们进行了 major 版本升级。此文档将作为新功能使用向导或升级指南。

新版本的问题或建议,有请各位关注者及时反馈,mpvue 2.0 祝大家节日快乐~

影响范围

mpvue 升级到 2.0 后,老项目并不能直接更新到此版本、手动升级方式并附后文。对于不考虑升级的开发者,可以继续使用原来的版本。使用 mpvue-quickstart 项目模板新创建的项目,将默认升级到 2.0。

附老版本最新依赖:

mpvue 1.0.20

mpvue-template-compiler 1.0.20

mpvue-loader 1.2.2

安装方式

新项目使用向导

第一步:使用最新的 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 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

第二步:更新构建脚本

初始化一个新项目

拷贝新项目中的 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

mpvue 2.0 功能说明

本次升级,旨在提供对其他小程序平台的能力支持,主要涉及的功能点如下:

提供一套源代码,构建到不同平台目标代码的能力

提供 api 统一调用的能力,附带平台判断能力,可针对平台单独书写逻辑代码,详见示例

重构 mpvue 代码转换部分的功能

统一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差异,此部分交由开发同学自行决定。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部