小程序返回上一页如何更新数据?

952 阅读2分钟

在开发小程序时,经常会遇见从当前页(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) {
    // 更新当前页面数据,比如调用接口更新数据之类
  }
}

这样调用是不是比较简单实用呢?

接下来我们来看看handlePrePagehandleCurPage这两个函数


  // 返回第几层路由
	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中发生了操作,就可以进行你想要的操作,如果没有,就没它啥事,爱干啥干啥~~~~~~~~~~。