⼩程序原⽣开发和wepy、mpvue对⽐
⼩程序原⽣开发和 wepy 、 mpvue 对⽐
三者的开发⽂档以及介绍
原⽣开发⼩程序⽂档：
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，编译配置：fig.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配置
└── fig.json 项⽬的编译配置
└── fig.json ⼩程序开发⼯具的配置
WePY⼤概做了这些⼯作：
编译代码为原⽣框架⽀持的形式
.wpy单⽂件开发简化⽂件⽬录
优化数据绑定语法与性能
优化时间绑定语法与性能
优化代码复⽤，组件化代理原⽣的模板
⽀持less/sass/typescript等，优化开发体验
将⼤部分API promise化
⽀持npm外部依赖，ESLink代码规范等
⼩结
因此，使⽤WePY开发⼩程序，出遵循WePY的语法外，
仍可保留原⽣的开发⽅式，⽐如按原⽣⾃定义组件的⽅式开发，WePy会将.js/.json/.wxml原⽣不动复制到输出⽬录下，将.less编译为同名的.wxss
对于继承⾃wepy.app/wepy.page/wepypinent的以.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配置
└── fig.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，可以看看
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
特性对⽐
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版本，暂不适
合投⼊⽣产
不⽀持
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论