微信小程序入门（四） 通信分类

一 分类

我把微信小程序中的通信主要分为：

• 页面与页面：
• 页面与组件：组件触发页面函数 页面主动调用组件方法
• 组件与组件：

二 实例

页面与页面：

       利用小程序提供的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组件！