雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

微信小程序框架 wepy 实现组件事件交互及通讯

2017-04-18 分类:前端之旅 / 微信平台 阅读(8102) 评论(0)

之前 的 微信小程序开发框架 wepy 试水记录 记录了 wepy的安装过程,

chongwu1110

今天有时间,又简单做了个小Demo试试,主要包含 事件, 组件通讯,组件之间事件传输等等!

一  组件事件传输

首先 在 index.wpy 中, 引入我们的测试组件

import test from '../components/test

定义组件,定义一些数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//定义组件
components = {
    footer:footer,
    header:header,
    list:list,
    search:search,
    test:test
}
//定义数据
data={
    imgUrls: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    parentTitle: '这是啥啥啥'
};

首先的话,我们看看组件之间的事件传输,

wepy.component 基类提供三个方法 $broadcast,$emit,$invoke,

因此任一页面或任一组件都可以调用上述三种方法实现通信与交互,
$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序

$emit与$broadcast正好相反,事件发起组件的父组件会依次接收到$emit事件

$invoke是一个组件对另一个组件的直接调用,通过传入的组件路径找到相应组件,然后再调用其方法。

如果想在Page_Index中调用组件A的某个方法:

this.$invoke('ComA', 'someMethod', 'someArgs');

如果想在组件A中调用组件G的某个方法:

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

我们打开 test.wpy 组件, 在组件渲染完成事件中调用一次父组件的方法!

1
2
3
onLoad () {
this.$emit('some-event');
}

在父组件也就是 index.wpy  里面接收事件

1
2
3
4
5
6
//组件事件
events = {
    'some-event':function () {
        console.info('你好,我是子组件调用夫组件的方法');
    }
}

父组件给子组件传递事件

1
2
3
4
onLoad = function () {
    this.$broadcast('testClick');
    this.setData({title: 'this is title'});
}

子组件里

1
2
3
4
5
events = {
    testClick(){
        console.info('我是夫组件调用的子组件方法');
    }
};

二 ,组件props数据传输

在父组件里先import 进来组件然后 使用, 和Vue类似

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import wepy from 'wepy'
import footer from '../components/common/footer'
import header from  '../components/common/header'
import list from '../components/list'
import search from '../components/panel'
import test from '../components/test'
export default class Index extends wepy.page {
    config = {
        navigationBarTitleText: 'test'
    };
    //定义组件
    components = {
        footer:footer,
        header:header,
        list:list,
        search:search,
        test:test
    },

数据定义

1
2
3
4
5
6
7
8
9
10
11
12
data={
    imgUrls: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    parentTitle: '这是啥啥啥'
};

index.wpy的模板里

1
<test title="我是夫组件传下来的" :img="imgUrls" :syncTitle.sync="imgUrls" :twoWayTitle="parentTitle"></test>

test.wpy 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import wepy from 'wepy'
export default class Test extends wepy.component {
    props = {
        title:String,
        syncTitle: {},
        twoWayTitle: {
            type: Number,
            default: 50,
            twoWay: true
        }
    };
    data = {
        listd: []
    };
    events = {
        testClick(){
            console.info('我是夫组件调用的子组件方法');
        }
    };
    onLoad () {
        console.log(this.title);
        console.log(this.syncTitle);
        console.log(this.twoWayTitle);
        this.$emit('some-event');
    }
}

附加==> 小程序Wepy文档

等有时间了,自己也写个小程序玩玩!!

分享到:更多 ()
标签:微信开发

相关推荐

  • 微信小程序中rpx与rem单位转换
  • 记录两个关于图片和文件的Html5新属性
  • composer下载phpqrcode给二维码中间加上logo
  • 微店开放平台与微韵商城的一些简单构思~~
  • 微信扫描二维码登陆网页的原理分析
  • 关于本地平台改版及认证机制更改的一些说明
  • 微韵全部图片资源已迁移到腾讯云存储
  • 平台新功能上线,微站分类顶部幻灯片后台自定义
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图