一 分类
我把微信小程序中的通信主要分为:
- 页面与页面:
- 页面与组件:组件触发页面函数 页面主动调用组件方法
- 组件与组件:
二 实例
页面与页面:
利用小程序提供的api
//正常跳转
if (!type || type == "navigateTo") {
wx.navigateTo(p)
}
//重定向
if (type == "redirectTo") {
wx.redirectTo(p)
}
//关闭所有页面,打开到应用内的某个页面
if (type == "reLaunch") {
wx.reLaunch(p)
}
//导航switchTab
if (type == "switchTab") {
wx.switchTab(p)
}
传参并回调:
A页面跳B页面并带参数,其中带 from:this.__router__,相当于是A页面的路径(可以在控制台打印this,看都有哪些参数),传到B页面后,B页面需要调用A中的方法:
app.pages.get(this.data.from).useDiscount(params);
app.BACK(1)
首先根据this.data.from找到这个page,然后调用page中useDiscount方法,并传params参数。这个BACK是我们自定义的,因为每个页面都有onshow,这个BACK是,onshow前把数据准备好。
页面与组件:
组件触发页面函数:
<shopCart bind:price="getLatestPrice" cardList="{{cardList}}"></shopCart>
这个组件中有两个地方需要注意:bind:price="getLatestPrice" cardList="{{cardList}}"
cardList是页面传给组件的数据。
getLatestPrice函数定义在主页面中:
price在子组件中的某个方法中主动触发:
this.triggerEvent('price')
当执行完这一句时,对应就会执行 主页面getLatestPrice,举个例子:比如有个主页面,主页面中有多个更新商品数量的组件,通过组件你把购物的商品数量变化了,加入在组件中你把数据放在缓存了,调用上面这一句相当于提醒了主页面我要更新page的某个最新价格,然后更新主页面的价格显示,这是被动通信。
主页面主动调用子组件的方法:
<shopCart id="shopCart"></shopCart>
this.shopCart= this.selectComponent("#shopCart");
this.shopCart.fun("value");
第一行是wxml中调用组件
第二行 是根据组件的id,相当于拿到这个组价对象
第三行 是调用 shopCart组件中的fun 函数,并且传个参数 vlaue
组件与组件
至于组件与组件可以通过中间量:页面来做个跳转,A组件可以通过triggerEvent触发主页面,改变页面中的某个值,然后,在wxml中,将这个改变了的值传给B组件!