在开发小程序时,经常会遇见从当前页(A)进入下一页(B),然后在B中操作之后,返回A页更新页面数据之类的操作。 这里有一个问题,如果A-->B, 用户不在B中有任何操作返回到A,那该怎么去判断呢? 因为经常会遇到此类需求,因此就封装了个方法,以便调用。
// 在B页面操作之后
import { handlePrePage } from 'utils'
// 提交某次操作
async submit () {
try {
await request()
// 完成操作数据之后,需要做一个标记
handlePrePage()
// 返回上一页
wx.navigateBack()
} catch (e) {
console.log('e', e)
}
}
// 在A页面
import { handleCurPage } from 'utils'
async onShow () {
const isBack = await handleCurPage()
// 如果是从上一个页面返回的,并且isBack为true,说明在B中更新了操作
if (isBack) {
// 更新当前页面数据,比如调用接口更新数据之类
}
}
这样调用是不是比较简单实用呢?
接下来我们来看看handlePrePage 和 handleCurPage这两个函数
// 返回第几层路由
getPageIndex(idx = 1) {
/* eslint-disable */
const pages = getCurrentPages()
const prePage = pages[pages.length - idx] as any
return prePage
}
// 处理返回到上一个页面,这里需要做一个标记,以便上一个页面获取到标记,好做处理。
handlePrePage(name = 'isBack') {
const prePage = this.getPageIndex(2)
prePage.data[name] = true
}
// 处理从上一个页面返回到当前页面,在onShow中的处理
handleCurPage() {
return new Promise<boolean>((resolve) => {
const curPage = this.getPageIndex(1)
// 新增出行人之后,返回预约信息页面,需要在从重新请求接口
if (curPage.data.isBack) {
// 需要删掉字段,以免重复使用
delete curPage.data.isBack
return resolve(true)
}
return resolve(false)
})
}
总结:A页--->B页, 如果在B页有操作,在B中调用handlePrePage生成一个标记,返回到A中后,在onShow通过handleCurPage捕获isBack字段是否存在?如果存在就说明在B中发生了操作,就可以进行你想要的操作,如果没有,就没它啥事,爱干啥干啥~~~~~~~~~~。