目前比较主流的方式有以下几种:
- 使用Storage
- 声明一个全局变量 (使用getApp())
- 使用eventChannel (在之前为开发自己手写的发布订阅模式,2.7.3之后微信支持)
- 使用getCurrentPage
方式一:使用Storage
在pageA中使用wx.setStorage(obj, obj),在pageB中判断是否存在即可。使用时应注意避免全局污染。在设计缓存时可以使用[pageName${key}
: value] 这种形式,去尽量避免全局污染。
使用完毕后,应该去掉该缓存,在使用非事件类型的状态传递时都应该注意此类的问题。避免在onShow中触发多次。
(注意点:整个App中,可以使用的storage只有10M,使用时需谨慎)
方式二:声明一个全局变量
在pageA中使用getApp()就可以在全局下声明变量,然后在pageB中使用相同的方法去取这个变量即可。但是getApp也存在和Storage相同的问题就是会污染全局。
注意点:如果使用了分包时可能会出现的问题如下
方法三:使用eventBus
在微信的基础库为2.7.3之前,微信不支持eventChannel,因此。如果想要实现通过发布订阅的模式去实现页面通信,就需要自己去实现一个发布订阅。这里不做赘述。这里只说明下eventChannel的用法。
在pageA页面跳转pageB时,pageA中为指定事件添加监听器,data中可以拿到回传的数据
navigateTo({
url,
events: {
submit(res) {
console.log(res.data);
}
}
})
在pageB中,如下:
const eventChannel = this.getOpenerEventChannel && this.getOpenerEventChannel();
eventChannel.emit('submit', {data});
方法四:使用getCurrentPage
使用方法可以理解为(pageA -> pageB),拿到页面栈,然后取到想要改变状态的page,就可以使用这个page下面的方法如:setData或者直接定义在this上的属性。在回到pageA时就可以在onShow中进行处理。具体使用方法如下:
const pages = getCurrentPage();
const tarPage = pages[pages.length - 2]; //获取想要获取到的页面index
tarPage.show = true;
tarPage.setData({ name: 'mango' });
这种方式需要注意的点和前两种方法类似,在pageA中需要把一些已经更改过的值做初始化。否则容易导致状态未改变,使得后续跳转页面时出现问题。
使用时需要根据实际情况选择合适的方式,解决问题的方式不止一种。
后续有别的方式再补充,以上。。。