微信小程序的几种页面间状态传递的方式

137 阅读2分钟

目前比较主流的方式有以下几种:

  1. 使用Storage
  2. 声明一个全局变量 (使用getApp())
  3. 使用eventChannel (在之前为开发自己手写的发布订阅模式,2.7.3之后微信支持)
  4. 使用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中需要把一些已经更改过的值做初始化。否则容易导致状态未改变,使得后续跳转页面时出现问题。
使用时需要根据实际情况选择合适的方式,解决问题的方式不止一种。

后续有别的方式再补充,以上。。。