原生开发小程序 和 wepy 、 mpvue 对比
原生开发小程序 和 wepy 、 mpvue 对比
本文横向对比、探讨了下原生开发小程序,和目前比较热门的 wepy 、mpvue 开发小程序三种方式的优势和劣势;由于三者的篇幅都比较多,本文只是简单介绍。如有错误,请大神们指正。
三者的开发文档以及介绍:
原生开发小程序文档:点此进入
wepy 开发文档:点此进入
mpvue 开发文档:点此进入
三者的简单对比:
以下用一张图来简单概括三者的区别:
小程序支持的是 WXML + WXSS + JS 这样的组合,所以,wepy 和 mpvue 都是将文件构建到 dist 目录,转换为小程序支持的文件类型,然后将微信开发者工具指向 dist 目录下,进行调试开发,并且两者都提供了热更新。
开发中,该选择哪种开发方式:
个人认为:
如果小程序项目是新项目,没有旧的 h5 项目迁移,则可以考虑用小程序原生开发,好处:相比于第三方框架,坑少。
如果是从老的 h5 项目迁移到小程序,并且 老的 h5 项目是 vue 开发或者既有 h5 项目也需要小程序开发,则比较适合 wepy 或者 mpvue 来做迁移或者开发。
以下提供一些三者的不同点,作为开发者选择开发方式的建议,具体的开发文档请移驾各自的官方文档。。
1.开发方式上:
原生开发:
开发者需要全新学习小程序的抒写格式,目前版本模板中支持 slot,但是不支持 npm 包。原生不支持 css 预处理器,但是 vsCode 中 Easy WXLESS 插件可以将 less 文件自动转换为 wxss 文件;
wepy:
开发者需要熟悉 vue 和 wepy 两种语法,支持 slot 组件内容分发插槽,支持 npm 包,支持 css 预处理器;
mpvue:
开发者需要熟悉 vue ,目前版本(v1.0.5)不支持 slot ,支持 npm 包,支持 css 预处理器;
2.应用状态管理上:
原生开发:
没有提供原生的应用状态管理方式,但是可以将 Redux or Mobx 引入到项目中。
小程序原生提供了一种声明使用全局变量,写法为:
app.js 中配置变量
//App.js
App({BASE_URL: 'http://www.1m85.com/api',onLaunch: function () {console.log('App Launch')},onShow: function () {console.log('App Show')},onHide: function () {console.log('App Hide')}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
通过全局函数 getApp() 可以获取全局的应用实例,然后调用配置常量
/pages/index/index index.js测试
Page({onLoad:function(options){var app = getApp(); // Get the app instance.console.log(app.BASE_URL); }})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
wepy:
可以将 Redux or Mobx 引入到项目中。
mpvue:
可以直接使用 vuex 做应用状态管理
3.开发便利上:
原生开发:
不支持 computed 计算属性和 watcher 监听器;模板语法中只支持简单的 js 表达式。需要写小程序的 view 标签等;
wepy:
支持 computed 计算属性和 watcher 监听器;模板语法中只支持简单的 js 表达式。需要写小程序的 view 标签等;
computed 的写法:
computed = {aPlus () {return this.a + 1}
}
- 1
- 2
- 3
- 4
- 5
watcher 监听器的写法:
// 监听器函数名必须跟需要被监听的data对象中的属性num同名,
// 其参数中的newValue为属性改变后的新值,oldValue为改变前的旧值
watch = {num (newValue, oldValue) {console.log(`num value: ${oldValue} -> ${newValue}`)}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
mpvue:
支持 computed 计算属性和 watcher 监听器;模板语法中只支持简单的 js 表达式。可以直接写 div 、span 等标签
computed 的写法:
computed: {computedClassStr () {return this.isActive ? 'active' : ''},computedClassObject () {return { active: this.isActive }}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
watcher 监听器的写法:
watch: {num (newValue, oldValue) {console.log(`num value: ${oldValue} -> ${newValue}`)}
}
- 1
- 2
- 3
- 4
- 5
4.对云信 im 的支持性:
原生开发:
云信支持原生小程序开发;
wepy:
云信暂不支持wepy开发;
mpvue:
云信支持mpvue开发;
以上为一些简单的对比,具体开发详情请移驾官方文档。
原生开发小程序 和 wepy 、 mpvue 对比相关推荐
- 小程序转h5之后 vant文件查找失败:_你还在使用原生开发小程序吗
最近帮别人在做一个小程序,因为官方的支持不够好,组件库也不够多,所以就没有使用官方的操作.网上查找了一番,觉得mpvue还不错(之前也没玩过),索性拿来用吧! 01 前言 小程序的做法也是比较简单的, ...
- 小程序开发:用原生还是选框架(wepy/mpvue/taro/uni-app)
自 2017-1-9微信小程序诞生以来,历经2年多的迭代升级,已有数百万小程序上线,成为继Web.iOS.Android之后,第四大主流开发技术. 与之相随,小程序的开发生态也在蓬勃发展,从最初的微信 ...
- 小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)?
自 2017-1-9微信小程序诞生以来,历经2年多的迭代升级,已有数百万小程序上线,成为继Web.iOS.Android之后,第四大主流开发技术. 与之相随,小程序的开发生态也在蓬勃发展,从最初的微信 ...
- mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹 自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
- 微信小程序开发之——mpvue开发小程序
一 概述 mpvue:Vue.js in mini program,即mini vue.js编程框架 mpvue是把vue.js核心代码经过二次开发的框架,增加了vue.js开发小程序的能力 mpvu ...
- 6篇干货带你学会用vue开发小程序——mpvue
#第 003 期# 前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用 ...
- 使用mpvue开发微信小程序——原生微信小程序、mpvue、wepy对比
mpvue是什么?为什么使用它? 目前小程序开发主要有三种形式:原生.wepy.mpvue,其中wepy是腾讯的开源项目:mpvue是美团开源的一个开发小程序的框架,全称mini program vu ...
- 使用mpvue和wepy开发小程序
2019独角兽企业重金招聘Python工程师标准>>> 最近在开发小程序,分别使用了mpvue 和 wepy 这两个都是开发微信小程序的框架.都是牛人出品,给个赞! <!-- ...
- 小程序开发框架WePY和mpvue使用感受
今天想和小伙伴聊聊小程序开发框架的问题. 种种原因,去年年末接触到了小程序,使用mpvue做了两个项目,也使用WePY做了一个项目,关于这两个框架的恩恩怨怨,我觉得我有资格说两句. 1.主人公介绍 首 ...
最新文章
- .pth is a zip archive (did you mean to use torch.jit.load()?)
- php匿名函数use,深入理解 PHP 匿名函数关键字 use 的 Runtime Context
- Spring Security 学习之LDAP认证
- Java内存模型深度解析:顺序一致性
- Python基本图形绘制之“蟒蛇绘制”
- 静态资源详解和帮助文档的使用
- Redis主从配置详细过程
- 1104 LED Test
- 心系冬奥 翰墨传情 |当代书画名家为奥运加油书画推介展【姜萌篇】
- 基于java springboot仓库管理微信小程序源码
- python爬取琳琅社区整站视频
- 谷歌雅虎将联手实行即时信息兼容性计划
- limits.conf详解
- 网易云音乐的亏损,是社区经济的通病?
- Word操作之插入图片自动更改大小
- C++——百分制成绩转五分制成绩
- 家用计算机手抄报,大学计算机作业手抄报
- JAVA删除数组中指定元素
- H.264官方软件JM源代码简单分析-解码器ldecod(转载)
- vue+springboot+阿里云短信服务(集成redis实现验证码登录业务)
热门文章
- 基于linux的地震数据处理软件的设计与实现,地震数据处理软件系统与应用实验指导书...
- python 数据库查询系统_python查询数据库操作系统
- sql三表查询_SQL第五关:多表查询
- 前端基础-html-列表
- LeetCode 451 根据字符出现频率排序
- Java 集合List、Set、HashMap操作一(Array转List、Set排序、HashMap遍历、Set遍历、List遍历、HashMap大小长度、List打乱顺序)
- 设计模式:代理模式(C++)【代理服务器案例】
- 设计模式:抽象工厂模式(C++)【工厂方法升级】
- python语法学习—实现猜拳游戏
- 【glibc源码分析】--strcpy.c 字符串复制