使用mpvue和wepy 开发小程序

举报
thinker 发表于 2019/01/14 20:42:38 2019/01/14
【摘要】 mpvue 和 wepy 都是开发微信小程序的框架。都是牛人出口，给个赞！ wepy 是腾讯开源的一套语法接近vue.js、快速开发小程序的一套框架，开源的较早，网上有很多资源，也有一些大厂使用。并有成熟的UI，如weui 、zan-ui mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，按官网说可以达到小程序与H5界面使用一套代码。最近刚刚开源，资料较少。

wepy 是腾讯开源的一套语法接近vue.js、快速开发小程序的一套框架，开源的较早，网上有很多资源，也有一些大厂使用。并有成熟的UI，如weui 、zan-ui

mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，按官网说可以达到小程序与H5界面使用一套代码。最近刚刚开源，资料较少。一些UI正在开发中。如 weui的mpvue实现。

最近做两个简单的小程序，第一个是用wepy + weui 实现的。功能比较简单。基于weui demo 改一改就可以跑起来个小程序了。
遇到的比较多问题就是不会使用Promise (本人是后端写Java的,感觉前端JS代码有点飘…..),后来总算是能跑起来了，也不知道是不是正确的写法。

1
2
3
4
5
6
7
8
9
10
11
12
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的语法我不知道多少）。下面对比一下我遇到这两个框架使用上不一样的地方:

值绑定

看代码：

1
2
3
4
5
6
7
8
9
10
11
// 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
}


1
2
3
4
5
6
7
8
9
<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 {}

1
2
3
4
5
6
7
8
9
10
11
// mpvue 的写法
export default {
    data () {
      return {
        userInfo: {},
      }
    },
    components: {},
    methods: {}
    // 其他自定义方法
}
1
2
3
4
5
6
7
// wepy 的写法
export default class List extends wepy.page {
    data = {
        userInfo: {},
    };
    methods = {}
    // 其他自定义方法

对应 app.json的配置，mpvue 是在根目录(src)下的main.js,wepy是根目录下的app.wpy

总体来说，wepy更简单一些，mpvue显示要复杂一点


【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
React 小程序
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入