微信小程序原生开发 和 wepy 、 mpvue 对比

微信小程序原生开发 和 wepy 、 mpvue 对比

参考资料1

参考资料2

三者的开发文档以及介绍

三者简单的对比:

以下简单概括三者区别

微信小程序mpvuewepy
语法规范小程序开发规范VueJs开发规范类Vue开发规范
标签集合小程序标签html标签+小程序标签小程序标签
样式标签wxsssass,less,postcsssall,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文件编译示意图

WePY组件实现示意图

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

特性对比

mpvueWePY原生开发
开发特性单文件组件类Vue风格每个页面有4个不同文件组成
组件化支持支持,vue单文件组件支持,同时可兼容原生自定义组件模板(template),自定义组件
外部依赖npm支持支持不支持
原生API Promise化基本不支持,请求可以选用fly大部分支持API均支持,选用无,为回调函数
优化优化了setData,npm资源不引用则不会占用体积setData不可太频繁使用,需要控制图片资源大小,第三方资源不用需及时清理
less/sass/es6/typescript/eslint等均支持均支持支持es6
自动化构建vue-cli,webpackwepy-cli
数据统一管理vuex,选用wepy-redux,选用全局数据globalData,Storage
Web H5支持已上线H5页面转小程序,更改小部分平台差异代码和webpack配置可运行可输出web版本,暂不适合投入生产不支持
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值