使用mpvue开发微信小程序——原生微信小程序、mpvue、wepy对比

mpvue是什么？为什么使用它？

目前小程序开发主要有三种形式：原生、wepy、mpvue，其中wepy是腾讯的开源项目；mpvue是美团开源的一个开发小程序的框架，全称mini program vue(基于vue.js的小程序)，vue开发者使用了这个框架后，开发小程序的效率将得到很大的提升。

wepy与mpvue如何选择？mpvue和wepy对比分析：

对比项	原生小程序	mpvue	wepy
语法规范	小程序开发规范	vuejs语法规范	类似vuejs语法
标签集合	小程序标签	小程序标签+h5标签	小程序标签
样式规范	wxss	sass less stylus	sass less stylus
组件化	无组件化机制	vue组件化规范	自定义组件化规范
对端复用	不支持	支持	支持
自动构建	无	webpack	框架内置
集中数据管理	无	vuex	redux
编辑器	微信开发者工具	不限	不限
文件后缀	.wxss .wxml	.vue	.wpy
上手成本	熟悉原生小程序	熟悉vuejs	熟悉vuejs及wepy

三种形式小程序代码对比

（1）原生小程序js部分：

（2）mpvue js部分：

（3）wepy js部分

可以看出：假如你是一个vue使用者，想最快上手小程序的话，你应该选择mpvue，这种方式让你保留了vue项目的大多数体检，上手成本也相对较小。

mpvue项目初始化及目录结构

1、项目创建及运行

       （1）：打开命令行工具，运行vue init mpvue/mpvue-quickstart vue-music，即可创建一个名为vue-music的mpvue项目（2）：进入该项目目录，npm install 安装依赖（3）：npm run dev（4）：使用微信开发者工具打开项目目录下生成的dist/wx文件夹，即可预览mpvue项目初始化的结果

如图，得到的是一个长相比较一般的初始化页面：

2、项目初始化目录结构分析
新创建出来的项目目录结构及解析如下所示：

3、mpvue与vue项目不同的几个点

①：小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。
②：不支持部分复杂的表达式，比如{{ message.split('').reverse().join('') }}，建议使用computed计算属性返回计算值，这部分内容会直接编码到wxml中，小程序官网文档格式wxml不支持复杂的计算。
③：不支持过滤器，因为渲染部分会转成 wxml ，wxml 不支持过滤器，所以这部分功能不支持。

使用mpvue开发微信小程序上手项目(音乐小程序）可参考本人另一篇文章：
使用mpvue开发微信小程序——音乐小程序项目源码分享

使用mpvue开发微信小程序——原生微信小程序、mpvue、wepy对比相关推荐

微信小程序原生组件swiper在mpvue工程中使用注意事项
时下微信小程序开发框架中mpvue是主流的选择之一.其中,免不了还要使用部分小程序原生的组件.swiper组件几乎成为典型小程序界面的必备组成组件之一.但是,我在试用中遇到一个典型问题,很多相关网页中 ...
2021年用于开发构建本机原生Windows应用程序软件的6大C ++ IDE开发工具简介
集成软件开发环境(IDE)是一种软件应用程序,为应用程序开发提供了完整的功能集.代码通常以文本格式编写,您可以使用记事本,Word,Wordpad等文本编辑器轻松地编辑或修改代码.但是,对于开发人员( ...
使用mpvue开发微信小程序——音乐小程序项目源码分享
文章最后更新(2019-04-06) github最后更新(2019-04-09) 前言: 最近小组有个微信小程序分享的环节,于是在业余时间使用mpvue框架写了个音乐小程序,时间有限,之后有时间会继 ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
mpvue还在维护吗_mpvue 微信小程序开发之生命周期
最近在开发小程序,尝试性地使用了一下 mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compile ...
基于mpvue框架的仿酷狗音乐小程序开发的微信小程序(Robot Music)
1. 项目实现由于是小程序未认证所以只能添加体验者才能预览项目github地址:https://github.com/historytiger/wx- 请下载放开发者工具食用数据来源于网络大佬免 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
微信小程序开发之——mpvue开发小程序
一概述 mpvue:Vue.js in mini program,即mini vue.js编程框架 mpvue是把vue.js核心代码经过二次开发的框架,增加了vue.js开发小程序的能力 mpvu ...