关于微信小程序web-view和小程序路由导航的一些理解

507 阅读2分钟

需求背景:

web-view内的程序提供新增、编辑收货地址功能,功能调用小程序内原有的逻辑。所以就需要从web-view跳转至小程序新增、编辑地址页面。用户在新增、编辑完地址后回到web-view界面,用户应看到最新的地址列表并且之前的操作数据也要保留。同时用户进入新增、编辑地址页点左上角返回至web-view所在页面时,之前的相关状态也要正常展示。

实现:

wen-view内跳转小程序,需要事先安装微信的jsdk,然后我是把wx对象直接绑定到window对象上, navgateTo,redirectTo这两个方法需要根据具体情况来使用。

使用纯前端的方式往web-view里面的程序传参、刷新web-view内的组件只有一种办法:不断改变绑定的url的参数。每次用户操作完地址回到web-view所在的小程序页面时,就生成一个新的随机数绑定到小程序的url后面,用以刷新web-view获取最新的地址列表数据。同时需要在web-view跳转至新增、编辑地址页面前,事先缓存好相关数据。

navgateTo:web-view内使用navgateto跳转到目标小程序页面,会往小程序整体路由的history对象添加一条记录,然而该记录在getCurrentpages()里面却查不到,但点击web-view所在页面的左上角返回按钮时需要点多次才能返回到你想要的上级页面,说明该记录确实实实存在的。

redirectTo::web-view内使用redirectTo跳转到目标小程序页面,不会往小程序整体路由的history对象添加一条记录,但这里也会有一个问题。当redirectTo到目标小程序页面后,用户直接点击左上角的返回按钮,这时会直接返回到web-view所在页面的上级页面,而不是你想要的web-view所在页面。

基于这两个问题,所以你就需要用到小程序的onUnload生命周期了。因为小程序官方文档,没有提供任何劫持小程序左上角按钮的方法。另外自定义顶部导航栏对于web-view所在页面也不生效,但你需要的一些功能在这个生命周期里可以实现,就是在页面即将销毁时改变跳往下一个页面的跳转方法和目标路径。