• 微信小程序: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.

    以上仅供参考.....

  • 相关阅读:
    会计基础-资本与资本公积核算
    FORM 基本控件2
    EBS form的一些知识
    EBS功能安全性基本原理
    主物料界面数据来源
    organization --form 表单中organization 数据来源
    form 相关
    jar/war/ear文件的区别
    ORACLE判别字段是否包含中文
    亲测可用:SecureCRT 7 注册码/序列号
  • 原文地址:https://www.cnblogs.com/zty-Love/p/15166585.html
Copyright © 2020-2023  润新知