微信小程序:A、B两个小程序相互跳转,出现点击A小程序底部导航栏菜单,第一次点击无法跳转B小程序,需要点击第二次才会触发跳转到B小程序

示例:
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.

以上仅供参考.....

原文地址:https://www.cnblogs.com/zty-Love/p/15166585.html