一、引入微信:
- 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);
},
复制代码