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

最新推荐文章于 2023-09-07 10:40:33 发布

var_Xu

最新推荐文章于 2023-09-07 10:40:33 发布

阅读量3.1k

点赞数 2

文章标签： javascript vue 微信h5

本文链接：https://blog.csdn.net/var_Xu/article/details/109850554

版权

本文介绍了在微信浏览器中使用WeixinJSBridge禁止右上角分享的功能，尤其是在Vue项目中的实现。针对iOS和Android平台可能出现的问题进行了详细说明，包括初始化时WeixinJSBridge可能为undefined的解决方案，以及iOS设备因历史记录导致的分享功能重新出现的修复办法，最终通过pageshow事件确保分享功能在页面展示时被正确禁用。

摘要由CSDN通过智能技术生成

最近有一个需求是在微信浏览器中禁止右上角分享，因为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失败，开始循环获取