当前位置：首页 > news >正文

优化uni-app页面间的传参跳转【兼容多端】

news 来源：原创 2024/9/20 4:53:11

问题场景

options传值的想必用的都比较多，除了option传值的场景外，还有两个场景用的也比较多：

1）传复杂对象

对于传递复杂对象options就有点力不从心了，毕竟URL模式GET传递参数的长度有限。此时需要采用eventChannel模式，而默认的模式使用复杂，需要进行再优化。

2）返回模式

虽然eventChannel也实现了上下级页面（对于页面栈式应用，我称之为上下级比较合适）传递参数，但是灵活度高也就意味着使用复杂。

理想中的模式

之前写过ElementUI的窗体模式封装，参考同样的理念。我需要实现这样更贴近开发逻辑的调用效果：

假设是A->B

A页面传参跳转到新页面：

/**** @param url* @param data 跳转页面请求的数据，由跳转页面在onLoad或onMount调用util.onPageInit(initFunc)接收* @param backFunc 跳转页面返回数据，由backFunc回调接收
export const navigateTo = (url: string,data: Record<string, any> = {},backFunc: (value: any) => void = () => {}
)*/navigateTo('/page/updateOrder?orderId=1111', {signKey: 'XXXXXX'}, (orderDetail) => {console.log(orderDetail)
})

/page/updateOrder是要打开的页面，orderId是URL上能够看到的参数，而signKey是隐藏的签名参数，不便在URL里展示的内容。payDetail对用的是返回的方法，在打开页面里采用goBack（见后面代码）返回时，将修改后的详细构成信息刷新到当前页面。这样好处是按返回不用全局刷新，试想如果是一个下拉列表修改第N页的数据，修改完后返回结果整个列表全部刷新找不到修改的位置了体验该多么的糟糕。

此时新的页面读取orderId直接使用option可以获取，而{signKey}部分，在onMouted或onLoad方法如下获取，B页面调用获取A传递参数的方法：

/*** 页面初始化接收参数的事件，接收由navigateTo传递的复杂对象数据* @param initFunc 接收参数的事件*/onPageInit((data)=>{console.log('post data:', data)
})

B页面处理完毕，返回到A页面的方法：

/*** 返回逻辑，如果小程序或H5是直接进入页面（此时无页面栈），返回时则直接跳转到首页* @param backValue 返回到前一个页面的方法，undefined则不执行返回，如果要执行返回逻辑但不传递参数可以传null或空对象*/goBack({amount: 9999, address: 'ABCD'})

会立即触发跳转回A页面，且返回后，A页面会打印收到的返回值{amount: 9999, address: 'ABCD'}

试想如果你忘记那些uniapp五花八门的传参方案，是不是觉得，这样应该是页面跳转传参本来应该的样子？

实现它

我们约定两个事件：

initData：新窗口接收参数的方法

navBack：从新窗口返回的方法

navigateTo代码如下：

/**** @param url* @param data 跳转页面请求的数据，由跳转页面在onLoad或onMount调用util.onPageInit(initFunc)接收* @param backFunc 跳转页面返回数据，由backFunc回调接收*/
export const navigateTo = (url: string,data: Record<string, any> = {},backFunc: (value: any) => void = () => {}
) => {// 简化跳转，可以在template直接用uni.navigateTo({url,events: {// 这个是添加到跳转前页面的on事件navBack: backFunc},success: (result: UniNamespace.NavigateToSuccessOptions) => {result.eventChannel.emit('initData', data)}})
}

initFunc接收参数的方法如下：

/*** 页面初始化接收参数的事件，接收由navigateTo传递的复杂对象数据* @param initFunc 接收参数的事件*/
export const onPageInit = (initFunc: (data: any) => void) => {const instance = getCurrentInstance()if (!instance) {console.error('you must call it in onLoad() or onMounted() method')} else {;(instance.proxy as any).getOpenerEventChannel().on('initData', (data) => {initFunc(data)})}
}

goBack返回前一页面数据的方法如下：

/*** 返回逻辑，如果小程序或H5是直接进入页面（此时无页面栈），返回时则直接跳转到首页* @param backValue 返回到前一个页面的方法，undefined则不执行返回，如果要执行返回逻辑但不传递参数可以传null或空对象*/
export const goBack = (backValue?: any) => {// 返回逻辑修正版，如果小程序或H5直接进入页面（此时无页面栈），返回时直接跳转到首页const pages = getCurrentPages()const eventChannel: UniNamespace.EventChannel = (pages[pages.length - 1] as any).$vm.getOpenerEventChannel()if (pages && pages.length > 0) {const firstPage = pages[0]if (pages.length === 1 && (!firstPage.route || firstPage.route !== Global.HOME_ROUNTE)) {// 栈底页非首页，去首页uni.reLaunch({url: Global.HOME_ROUNTE})} else {uni.navigateBack({success: () => {if (backValue !== undefined) {eventChannel.emit('navBack', backValue)}}})}} else {// 无栈底页，去首页uni.reLaunch({url: Global.HOME_ROUNTE})}
}

Global.HOME_ROUNTE是首页地址，由常量文件定义

就这点代码，剩下的没了，如果硬是要再讲点什么的话。说一下eventChannel的原理：

eventChannel在每个页面实现了一个事件总线。在navigateTo时，跳转成功的success里会带上成功页面的eventChannel，这样我们则可以给跳转后的页面发送数据。而currentInstance(this)的getOpenerEventChannel()则是获得打开它的页面的事件总线。向其emit发送数据，则发送到前一个页面。

如果不使用cuurentInstance，uni-app里我们还可以采用如下底层方法获得每个页面的event总线

        const pages = getCurrentPages()const topPage = pages[pages.length - 1] // 当前页面（栈顶）const eventChannel: UniNamespace.EventChannel = (topPage as any).$vm.getOpenerEventChannel()

然后同样可以进行emit、on等操作来注册和发送事件