【微信小程序知识点】getApp()全局数据共享，页面间通信，组件间通信

getApp()-全局数据共享

在小程序中，可以通过getApp()方法获取到小程序全局唯一的App实例。因此在App()方法中添加全局共享的数据，方法，从而实现页面，组件的数据传值。 

// app.js
App({
  //全局共享的数据
  globalData: {
    token: "",
  },
  //全局共享的方法
  setToken(token) {
    //如果想获取token,可以使用this的方式进行获取
    this.globalData.token = token;
  },
});

在使用App实例的js文件里面写如下代码： 

//getApp()方法用来获取全局唯一的App()实例
const appInstance = getApp();
Page({
  login() {
    console.log(appInstance);
    appInstance.setToken('difisivibbcueiw')
  },
});

页面间通信

如果一个页面通过wx.navigateTo打开一个新页面，这两个页面间将建立一条数据通道，从而实现两个页面之间的数据传递

1.在wx.navigateTo的success回调中通过EventChannel对象发射事件

2.被打开的页面可以通过this.getOpenerEventChannel()方法来获得一个EventChannel对象，进行监听，发射事件

3.wx.navigationTo方法中可以定义events配置项接收被打开页面发射的事件

（1）index.wxml页面

<button type="warn" bindtap="handle">跳转到分类页面</button>

（2）index.js

Page({
  
  handle() {
    wx.navigateTo({
      url: "/pages/cate/cate",
      events: {
        //key :被打开页面通过eventChannel发射的事件
        //value:回调函数
        currentevent: (res) => {
          console.log(res);
        },
      },
      success(res) {
        res.eventChannel.emit("myevent", { name: "tom" });
      },
    });
  },
});

（3）cate.js

Page({
  onLoad() {
    //通过this.getOpenerEventChannel()可以获取EventChannel对象
    const EventChannel = this.getOpenerEventChannel();
    //通过EventChannel提供的on方法监听页面发射的自定义事件
    EventChannel.on("myevent", (res) => {
      console.log(res);
    });
    //通过EventC提供的emit方法也可以发射事件
    EventChannel.emit("currentevent", { age: 10 });
  },
});

组件通信-事件总线

随着项目功能的增加，业务逻辑也会变得很复杂，一个页面可能是由多个组件进行构成，并且这些组件之间需要进行数据的传递。这时候如果使用之前学习的组件传值方式进行数据的传递，就会比较麻烦。

事件总线是对发布-订阅模式的一种实现，是一种集中式事件处理机制，允许不同的组件之间进行彼此的通信，常用于两个非父子关系组件和兄弟组件之间通讯，我们可以借助第三方的发布订阅JS包，来实现事件总线的功能。 PubSubJS

（1）安装PubSubJS

 （2）点击工具，构建npm

（3）代码

<view class="parent">
  <view class="title">父组件，子组件a和子组件b是兄弟关系</view>
  <view class="container">
    <custom01/> 
    <custom02/>
  </view>
</view>

<!--components/custom01/custom01.wxml-->
<view class="sona">
  <text>子组件a</text>
  <button bindtap="sendData">传递数据给兄弟</button>
</view>

// components/custom01/custom01.js
import PubSub from "../../miniprogram_npm/pubsub-js";
Component({
  /**
   * 组件的初始数据
   */
  data: {
    name: "tom",
    age: 10,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    sendData() {
      //publish 发布，发射自定义事件
      //1.自定义事件的名称
      //2.需要传递的数据
      PubSub.publish("myevent", this.data.name);
    },
  },
});

// components/custom02/custom02.js
import PubSub from "../../miniprogram_npm/pubsub-js";
Component({
  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {},
  lifetimes: {
    attached() {
      //subscribe订阅，监听自定义的事件
      //1.需要订阅，监听的自定义事件名称
      //2.回调函数，回调函数有两个参数
      //2.1 msg:自定义事件的名称
      //2.2 data:传递过来的数据
      PubSub.subscribe("myevent", (msg, data) => {
        console.log(msg, data);
      });
    },
  },
});