隐藏显示微信右上角分享按钮

一、引入微信：

• 1.直接引入 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
• 2.npm 安装 npm install weixin-js-sdk --save;用的时候引入import "weixin-js-sdk";

二、隐藏微信网页右上角的按钮：

• 因为很多页面需要做这个操作，我直接写在了main.js中,然后挂载到了vue的实例上；

Vue.prototype.$hideWxMenu = () => {
	setTimeout(function() {
		document.addEventListener(
			"WeixinJSBridgeReady",
			function() {
				WeixinJSBridge.call('hideOptionMenu')
				// WeixinJSBridge.call('hideToolbar')
			},
			false
		);
		WeixinJSBridge.call('hideOptionMenu')
		// WeixinJSBridge.call('hideToolbar')
	}, 300);
};
Vue.prototype.$showOptionMenu =()=>{
	// 通过下面这个API显示右上角按钮
	setTimeout(function() {
		document.addEventListener(
			"WeixinJSBridgeReady",
			function() {
				WeixinJSBridge.call('showOptionMenu');
				// WeixinJSBridge.call('hideToolbar')
			},
			false
		);
		WeixinJSBridge.call('showOptionMenu');
		// WeixinJSBridge.call('hideToolbar')
	}, 300);
}
复制代码

tips：显示右上角分享之后，单页面应用ios分享的时候需要刷新页面，或者是跳到这个页面的时候用window.location.href跳转到这个页面；否则会有签名错误，因为ios的链接一直都是页面进入的链接；

• 页面引用,直接在mounted使用

this.$hideWxMenu()
this.$showOptionMenu()
复制代码

三、显示隐藏微信底部返回按钮

主要是针对苹果手机的返回；

hideWxAllMenu() {
    setTimeout(function() {
            document.addEventListener(
                    "WeixinJSBridgeReady",
                    function() {     
                            //这个是隐藏返回按钮
                            WeixinJSBridge.call('hideToolbar')
                            //这个是显示按钮
                            WeixinJSBridge.call('showToolbar');

                    },
                    false
            );           
            WeixinJSBridge.call('hideToolbar')
            WeixinJSBridge.call('showToolbar');
    }, 300);
},
复制代码