示例:
A 小程序中底部菜单栏有个活动栏目,点击需要跳到B小程序活动页面,此时A小程序中的页面是 activity.wxml 里面是个空白页面,这个空白页是为了让小程序自带的Page配置底部导航栏显示创建,如图所示:
出现: A、B两个小程序相互跳转,出现点击A小程序底部导航栏菜单,第一次点击无法跳转B小程序,需要点击第二次才会触发跳转到B小程序,空白页面activity.wxml 的作用代码如下所示:
1 onShow: function(){ 2 wx.navigateToMiniProgram({ 3 appId: 'XXXXXXXXXXXXXXX', 4 path: '/pages/stores/main', 5 extraData: {}, 6 envVersion: '', 7 success: function(res) { 8 console.log('jump-success',res) 9 wx.reLaunch({url: "/pages/stores/index"}); 10 }, 11 fail: function(res) { 12 console.log('jump-fail',res) 13 }, 14 complete: function(res) { 15 console.log('jump-complete',res) 16 wx.reLaunch({url: "/pages/index/index"}); 17 }, 18 }) 19 }
上面代码为甚么会出现两次点击才会触发跳转小程序,原因是用户第一次没有实际的点击触发跳转,relaunch 到首页后,客户需要再次点击活动,才能触发唤起跳转到B小程序,onShow不是点击底部导航栏的实际触发事件。
微信小程序,底部菜单栏采用Page配置的导航栏,其实是tab组件,那我们可以尝试用小程序提供的触发事件: onTabItemTap
onTabItemTap 是点击tab时触发,那我们可以触发的时候,直接调取 wx.navigateToMiniProgram ,以便达到用户主动点击触发的条件,代码如下:
onTabItemTap(item) { console.log(item,'item') wx.navigateToMiniProgram({ appId: 'XXXXXXXXXXXXXXXXX', path: '/pages/stores/main', extraData: {}, envVersion: '', success: function(res) { console.log('jump-success',res) wx.reLaunch({url: "/pages/stores/index"}); }, fail: function(res) { console.log('jump-fail',res) }, complete: function(res) { console.log('jump-complete',res) }, }) }, onShow: function(){ // wx.navigateToMiniProgram({ // appId: 'XXXXXXXXXXXXXXXXX', // path: '/pages/stores/main', // extraData: {}, // envVersion: '', // success: function(res) { // console.log('jump-success',res) // wx.reLaunch({url: "/pages/stores/index"}); // }, // fail: function(res) { // console.log('jump-fail',res) // }, // complete: function(res) { // console.log('jump-complete',res) // wx.reLaunch({url: "/pages/index/index"}); // }, // }) wx.reLaunch({url: "/pages/index/index"}); //此处为了B小程序返回的时候,A小程序显示的不是空白页,重新reLaunch 到首页 }
此方法有个缺陷:就是点击跳转到B 小程序,亦或从B小程序向左滑动返回到A小程序的时候,A小程序页面会显示空白页面做的reLaunch,会导致页面刷新。(对于用户来说,无感可接受)
以上是处理标题的问题,另一个解决方案,则是自定义底部导航栏亦可解决。
在上面的代码功能实现跳转的情况下,会出现安卓上跳转没问题,而苹果手机则会出现刷新页面,将跳转小程序提示框被刷新页面覆盖掉,原因:初步猜想:ios 会优先加载页面 onShow ,然后再执行onTabItemTap
以下代码进行改进后,则可以实现:
方法则为增加一个 标记参数 signIndex
data:{ signIndex:false,//标记判断 是否需要relaunch 到首页,向右向左返回空白页处理relaunch }
onTabItemTap(item) { console.log(item,'item') let _this=this; _this.data.signIndex=true; wx.navigateToMiniProgram({ appId: 'XXXXXXXXXXXXXXXXX', path: '/pages/stores/main', extraData: {}, envVersion: '', success: function(res) { console.log('jump-success',res) _this.data.signIndex=false; wx.reLaunch({url: "/pages/stores/index"}); }, fail: function(res) { _this.data.signIndex=true; wx.reLaunch({url: "/pages/index/index"});//选择取消后,relaunch 到首页,否则会显示空白页面 console.log('jump-fail',res) }, complete: function(res) { console.log('jump-complete',res) }, }) }, onShow: function(){ // wx.navigateToMiniProgram({ // appId: 'XXXXXXXXXXXXXXXXX', // path: '/pages/stores/main', // extraData: {}, // envVersion: '', // success: function(res) { // console.log('jump-success',res) // wx.reLaunch({url: "/pages/stores/index"}); // }, // fail: function(res) { // console.log('jump-fail',res) // }, // complete: function(res) { // console.log('jump-complete',res) // wx.reLaunch({url: "/pages/index/index"}); // }, // }) if(!this.data.signIndex){ this.data.signIndex=true;
wx.reLaunch({url: "/pages/index/index"}); //此处为了B小程序返回的时候,A小程序显示的不是空白页,重新reLaunch 到首页
}
}
加上相关标记判别是否relaunch ,进行兼容iOS上,刷新导致跳转小程序提示框覆盖问题,具体标记代码位置的逻辑,需要各自尝试实践中理解,为什么这里是设置true或者false.
以上仅供参考.....