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);
});
},
},
});