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

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

wepy与mpvue如何选择?mpvue和wepy对比分析:
对比项原生小程序mpvuewepy
语法规范小程序开发规范vuejs语法规范类似vuejs语法
标签集合小程序标签小程序标签+h5标签小程序标签
样式规范wxsssass less stylussass less stylus
组件化无组件化机制vue组件化规范自定义组件化规范
对端复用不支持支持支持
自动构建webpack框架内置
集中数据管理vuexredux
编辑器微信开发者工具不限不限
文件后缀.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开发微信小程序——音乐小程序项目源码分享

Logo

前往低代码交流专区

更多推荐