微信小程序原生开发 和 wepy 、 mpvue 对比
微信小程序原生开发 和 wepy 、 mpvue 对比参考资料1参考资料2三者的开发文档以及介绍原生开发小程序文档:点此进入wepy开发文档:点此进入github地址mpvue开发文档:点此进入github地址三者简单的对比:以下简单概括三者区别微信小程序mpvuewepy语法规范小程序开发规范VueJs开发规范类Vue开发规范...
·
微信小程序原生开发 和 wepy 、 mpvue 对比
三者的开发文档以及介绍
三者简单的对比:
以下简单概括三者区别
微信小程序 | mpvue | wepy | |
---|---|---|---|
语法规范 | 小程序开发规范 | VueJs开发规范 | 类Vue开发规范 |
标签集合 | 小程序标签 | html标签+小程序标签 | 小程序标签 |
样式标签 | wxss | sass,less,postcss | sall,less,styus |
组件化 | 无组件化机制 | VueJs组件规范 | 自定义组件规范 |
多端服用 | 不可复用 | 支持转换为H5 | 支持转换为H5 |
自动构建 | 本身无自动构建 | webpack构建 | 框架内自动构建 |
上手成本 | 全新学习 | 熟悉VueJs即可 | VueJs和wepy |
集中数据管理 | 不支持 | 使用Vuex实现 | wepy-redux数据管理 |
小程序支持的是WXML + WxSS + JS这样的组合,所以,wepy和mpvue都是将文件构建到dist目录,转换为小程序支持的文件类型,然后将微信开发者工具指向dist目录下,进行调式开发的,并且两者都提供了热更新。
WePY
-
一个类Vue开发风格的小程序框架
-
特性:
- 类Vue开发风格
- 支持组件化开发
- 支持NPM
- 支持Promise,主动选择是否开启
- 支持ES2015
- 编译器:支持less/sass/TypeScript等开发
- 小程序性能优化
- 框架大小:24.3k + 8.9k
- wepy-redux数据管理
-
构建与编译工具:wepy-cli,编译配置:wepy.config.js
-
项目目录结构:
├── dist 小程序运行代码目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件) ├── node_modules ├── src 代码编写的目录(该目录为使用WePY后的开发目录) | ├── components WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用) | | ├── com_a.wpy 可复用的WePY组件a | | └── com_b.wpy 可复用的WePY组件b | ├── pages WePY页面目录(属于完整页面) | | ├── index.wpy index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件) | | └── other.wpy other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件) | └── app.wpy 小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件) └── package.json 项目的package配置 └── wepy.config.json 项目的编译配置 └── project.config.json 小程序开发工具的配置
WePY大概做了这些工作:
- 编译代码为原生框架支持的形式
- .wpy单文件开发简化文件目录
- 优化数据绑定语法与性能
- 优化时间绑定语法与性能
- 优化代码复用,组件化代理原生的模板
- 支持less/sass/typescript等,优化开发体验
- 将大部分API promise化
- 支持npm外部依赖,ESLink代码规范等
小结
因此,使用WePY开发小程序,出遵循WePY的语法外,
- 仍可保留原生的开发方式,比如按原生自定义组件的方式开发,WePy会将
.js/.json/.wxml
原生不动复制到输出目录下,将.less
编译为同名的.wxss
- 对于继承自
wepy.app/wepy.page/wepy.compinent
的以.wpy
为文件后缀名的,则数据赋值需要按照WePY的方式,必要时使用$apply,$nextTick
,而不是setData
,至于事件绑定语法、API调用,可根据喜好与需求,保留原生语法or使用WePY优化语法
mpvue
-
命名意思解读:mp,nimi program的缩写,mpvue,Vue.js in mini program
-
框架基于Vue.js核心,mpvue修改了Vue.js的runtime和compiler实现。使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。
-
特性:
- 组件化开发
- 完整Vue.js开发体验,全部.vue单文件组件
- Vuex数据管理方案
- webpack构建机制:自定义构建策略、开发阶段hotReload
- 支持npm
- 使用Vue.js命令行工具vue-cli快速初始化项目
- H5代码转换编译成小程序目标代码能力(可使用html开发)
-
构建与编译工具:vue-cli,编译配置:build/
-
配套设施
- mpvue-loader
- movue-webpack-target
- postcss-movue-wxss
- px2rpx-loader
- 其他
-
项目目录结构
|--bulid 编译配置 |--config 编译配置 |--dist 小程序运行代码目录(该目录由编译生成) |--node_modules |--src 开发目录 | |--compinents 组件目录 | | |--com_a.vue 组件a | | |--com_b.vue 组件b | |--pages 页面目录 | | |--index index页面(默认会在src/main.js主入口生成page配置,路径为pages/index/main) | | | |--index.vue 由其入口文件编译main.js后,生成index/main.js、index/main.wxml和index/main.wxss文件 | | | |--mian.js 页面默认入口文件(config属性会编译为页面配置文件index/main.json) | | └──other other页面(默认会在src/main.js主入口生成pages配置,路径为pages/other/main) | | | |--index.vue 由其入口文件编译mian.js后,生成other/mian.js、other/main.wxml和other/main.wxss文件 | | | |--mian.js 页面默认入口文件(config属性会编译为页面配置文件other/main.json) | └──app.vue 小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json、app.wxss文件) └── static 静态文件,会直接被复制到dist/下 └── package.json 项目webpack配置 └── project.config.json 小程序开发工具的配置
mpvue原理
- mpvue 保留了 vue.runtime 核心方法,无缝继承了 Vue.js 的基础能力
- mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力
- 修改了 vue 的建构配置,使之构建出符合小程序项目结构的代码格式: json/wxml/wxss/js 文件
小结
- mpvue与WePY不同,除将代码编译为原生框架所支持的外,还支持使用html标签,因此可以增加代码复用性,比较适合需要web端、小程序端等多端支持的项目,尤其是已有VueJs实现的Web端的产品,需要快速开发一个小程序版本的需求场景;且该开发团队更熟悉Vue.js。
- 熟悉mpvue,可以看看mpvue-weui:movue重写weui
- web端与小程序如何代码复用?
- 对于一般的容易转化的html标签,如
div/p/ul/li
等可以直接适应,让mpvue的编译器帮你完成转换,但对于如picker/checkbox/radio/switch/slider/progress/icon
等这些与html标签不能简单对应的小程序原生组件,mpvue的建议是按小程序原生组件的用法,只不过事件绑定与变量动态赋值的语法要按mpvue的写法(mpvue使用手册有涉及,请别踩坑) - 基于上一点,Web端UI复用其实也只是局限于那些容易转换的标签,对于差异化较大的UI是需要按每个端的特性做修改的
- 小程序的组件默认样式是weui风格,因此小程序一些组件与api功能,比如
toast/loading/modal/actionsheet/picker
,WEb端可以截住weui.js来完成 - 小程序许多API,Web端可对应使用微信的js-sdk
- 对于一般的容易转化的html标签,如
特性对比
mpvue | WePY | 原生开发 | |
---|---|---|---|
开发特性 | 单文件组件 | 类Vue风格 | 每个页面有4个不同文件组成 |
组件化支持 | 支持,vue单文件组件 | 支持,同时可兼容原生自定义组件 | 模板(template),自定义组件 |
外部依赖npm | 支持 | 支持 | 不支持 |
原生API Promise化 | 基本不支持,请求可以选用fly | 大部分支持API均支持,选用 | 无,为回调函数 |
优化 | 优化了setData,npm资源不引用则不会占用体积 | setData不可太频繁使用,需要控制图片资源大小,第三方资源不用需及时清理 | |
less/sass/es6/typescript/eslint等 | 均支持 | 均支持 | 支持es6 |
自动化构建 | vue-cli,webpack | wepy-cli | |
数据统一管理 | vuex,选用 | wepy-redux,选用 | 全局数据globalData,Storage |
Web H5支持 | 已上线H5页面转小程序,更改小部分平台差异代码和webpack配置可运行 | 可输出web版本,暂不适合投入生产 | 不支持 |
更多推荐
已为社区贡献1条内容
所有评论(0)