使用mpvue和wepy开发小程序
2019独角兽企业重金招聘Python工程师标准>>>
最近在开发小程序,分别使用了mpvue 和 wepy 这两个都是开发微信小程序的框架。都是牛人出品,给个赞!
<!-- more-->
wepy 是腾讯开源的一套语法接近vue.js、快速开发小程序的一套框架,开源的较早,网上有很多资源,也有一些大厂使用。并有成熟的UI,如weui 、zan-ui
mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码。最近刚刚开源,资料较少。一些UI正在开发中。如 weui的mpvue实现。
最近做两个简单的小程序,第一个是用wepy + weui 实现的。功能比较简单。基于weui demo 改一改就可以跑起来个小程序了。 遇到的比较多问题就是不会使用Promise (本人是后端写Java的,感觉前端JS代码有点飘.....),后来总算是能跑起来了,也不知道是不是正确的写法。
wxlogin() {console.log('weixin login...');const login = new Promise(function(resolve, reject) {wx.login({success: res => {console.log('weixin login success.');resolve(res);}});});return login;
};
上周看到mpvue的开源消息,下来试了一下,今天也算是跑一个功能简单的小程序。总体感觉比wepy要复杂,但语法是vue的语法(其实vue的语法我不知道多少)。下面对比一下我遇到这两个框架使用上不一样的地方:
值绑定
看代码:
// picker 组件的绑定 mpvue的使用方式
<picker mode="date" name="activity.endDate" v-bind:value="activity.endDate" start="2015-09-01" end="2017-09-01" @change="bindDateChange"><view class="weui-input">{{activity.endDate}}</view>
</picker>// methos 中的方法 bindDateChange (e) {console.log(e)this.activity.endDate = e.mp.detail.value
}
<picker mode="date" name="activity.endDate" value="{{activity.endDate}}" start="2015-09-01" end="2017-09-01" @change="bindDateChange"><view class="weui-input">{{activity.endDate}}</view>
</picker>// methos 中的方法 bindDateChange(e) {this.activity.endDate = e.detail.value;
}
mpvue中要使用v-bind:value的方式,并且取值要使用e.mp.detail.value. wepy使用双花括号来绑定值,取值使用e.detail.value,这个比较接近原生小程序,因为是一家吗?
程序目录
mpvue 的目录结构要在pages目录下创建自己的目录,然后有两个文件。比如:pages/index/index.vue,pages/index/main.js, 在pages数组中配置页面是这样:'pages/index/index',一个目录下只能使用一个页面,据大神说这是可以改的,但我还没有成功过。这点感觉没有wepy方便。
wepy 是在任何目录创建一个.wpy的文件,把css、html、script 都写在这个文件里,然后编译成小程序需要的三种格式的文件。比如: pages/index.wpy ,在pages数组中配置页面是这样:'pages/index/',而且多个文件可以在同一个目录下。
配置
在小程序中对应的 data {}
// mpvue 的写法
export default {data () {return {userInfo: {},}},components: {},methods: {}// 其他自定义方法
}
// wepy 的写法
export default class List extends wepy.page {data = {userInfo: {},};methods = {}// 其他自定义方法
对应 app.json的配置,mpvue 是在根目录(src)下的main.js,wepy是根目录下的app.wpy
总体来说,wepy更简单一些,mpvue显示要复杂一点(可能是本人的vue基础差吧。)
转载于:https://my.oschina.net/thinker4self/blog/1647338
使用mpvue和wepy开发小程序相关推荐
- wepy开发小程序eslint报错error 'getApp' is not defined no-undef
wepy开发小程序使用getApp().globalData保存全局数据很方便,但是会在控制台看到很多报错:"error 'getApp' is not defined no-undef&q ...
- 原生开发小程序 和 wepy 、 mpvue 对比
原生开发小程序 和 wepy . mpvue 对比 本文横向对比.探讨了下原生开发小程序,和目前比较热门的 wepy .mpvue 开发小程序三种方式的优势和劣势:由于三者的篇幅都比较多,本文只是简单 ...
- mpvue开发小程序所遇问题及h5转化方案
项目结构 |---build|---pages.js文件目录|---src|---component子组件|---pages|---业务页面|---store,vuex储存|---utils|---请 ...
- 使用mpvue开发小程序教程(二)
在上一篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在 ...
- mpvue初体验-用vue开发小程序
写在前面 昨天晚上刚刚开源的mpvue引起了不少前端er们的注意,下图是一个简单的对比(感谢 @胡成全 为本文提供的对比图). 话不多说,我们现在感受一下如何使用mpvue开发小程序.(以下内容参照m ...
- 微信小程序开发之——mpvue开发小程序
一 概述 mpvue:Vue.js in mini program,即mini vue.js编程框架 mpvue是把vue.js核心代码经过二次开发的框架,增加了vue.js开发小程序的能力 mpvu ...
- mpvue框架开发小程序
mpvue 是一个使用 Vue.js 开发小程序的前端框架 使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: 彻底的组件化开发能力:提高代码 完整的 Vue.js 开发体 ...
- 使用mpvue开发小程序教程(一)
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
- 6篇干货带你学会用vue开发小程序——mpvue
#第 003 期# 前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用 ...
最新文章
- c++语言文件流,C++ IO类、文件输入输出、string流详细讲解
- 智能制造大潮下,机器视觉产业迎来春天?
- 民间借贷利息多少才合法?
- scala入门-01-IDEA安装scala插件
- 计算机网络cr什么意思,现在网络上的“CR”是指什么意思
- BugkuCTF-WEB题file_get_contents
- 全志android启动串口无打印,CSK.Blog-给MK802(USB大小的Android4.0小PC)引出串口信号,变成ARM开发版...
- 全网最新Spring Boot2.5.1整合Activiti5.22.0企业实战教程<网关篇>
- net中 css 控制 GridView 样式
- 准备入手Macbook Pro
- 不抛出异常的swap
- String的replaceAll()用法详解
- [编程思想] POP OOP AOP
- (PhotoShop)如何用PS给证件照换底色(目前换底最成功的一个教程)
- a5解锁 oppo_oppoa5忘记密码了怎么强制解锁
- 数据挖掘期末大作业附加题
- Linux技术--mysql数据库基础操作
- C语言——应用与游戏
- 浏览器预览PDF文件(接口返回的是文件流形式)
- dlna server