• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

微信浏览器通过WeixinJSBridge禁止右上角分享,安卓、iOS适配。(vue开发)

互联网 diligentman 2天前 4次浏览

最近有一个需求是在微信浏览器中禁止右上角分享,因为wx-js-sdk目前还没通,所以只能用WeixinJSBridge来实现,最初逻辑是定义好禁止分享的方法后,初始化时调用即可,本地调试也没什么问题,但发到环境后发现了坑。。

1.首先发现ios和安卓偶尔会出现无效的情况,排查后发现是初始化中获取WeixinJSBridge结果为undefined,随后通过setInterval循环获取解决,保证调用具体方法时WeixinJSBridge存在即可。

2.第二个坑是iOS底部自带history前进后退,不会重新加载页面,所以跳转其他页面后,退回去分享就又出现了。。
这里本来是想监听visibilitychange事件,在切换前后台时调用具体方法,结果发现微信浏览器里不触发。。百度后才知道微信中不存在标签的概念(所以window.open无效),所以该方法永远不会触发。
之后换了一个方法监听就好了,我用的是pageshow,每次展示页面时触发(用popstate监听前进后退也可以)

具体代码:

created(){
    //判断当前是否是微信环境,方法网上一大堆
    if(isWexin()){
      let that = this;
      let WeixinJSBridge = _.get(window,'WeixinJSBridge',undefined)
      if(_rules.IsNull(WeixinJSBridge)){
        //首次获取WeixinJSBridge失败,开始循环获取
      let getJSbrige = setInterval(() => {
          WeixinJSBridge = _.get(window,'WeixinJSBridge',undefined)
          if(WeixinJSBridge!==undefined){
            //获取WeixinJSBridge成功,调用具体方法
            that.disableShare()
            //监听pageshow,调用具体方法
            window.addEventListener("pageshow",  ()=>{
              that.disableShare()
            })
            //停止循环
            clearInterval(getJSbrige)
          }
      }, 100);
      }else{
        //首次获取WeixinJSBridge成功,逻辑一样
        that.disableShare()
        window.addEventListener("pageshow",  ()=>{
            that.disableShare()
        })
      }
    }
  }

  methods: {
    //禁止微信右上角分享
    disableShare() {
      var that = this;
      try {
        //禁止分享
        if (typeof WeixinJSBridge == "undefined") {
          if (document.addEventListener) {
            document.addEventListener(
              "WeixinJSBridgeReady",
              that.onBridgeReady(),
              false
            );
          } else if (document.attachEvent) {
            document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady());
            document.attachEvent("onWeixinJSBridgeReady", that.onBridgeReady());
          }
        } else {
          //微信环境下做的处理
          that.onBridgeReady();
        }
      } catch (error) {
        console.log("禁止分享hideOptionMenu", error.message);
      }
    },
    onBridgeReady: function () {
      console.log('隐藏分享菜单')
      WeixinJSBridge.call("hideOptionMenu");
    },
  }


喜欢 (0)