admin管理员组文章数量:1568307
遇到的问题:
在做vue项目时,需求是要在微信环境内。
微信h5页面要求前端控制退出时关闭页面功能。
如果是在微信外其他浏览器的话。可以直接使用Window.close即可关闭网页。
但是在微信环境却无法直接使用这个方法。
众所周知,微信小程序的js中不能使用window对象
以及document对象
。
什么原因呢?
难道他们真的不存在吗?事实并非如此。
这个问题稍后讨论。我会再写一篇文章专门说明这个问题。
今天暂时先解决问题:
解决办法:
温馨提示:有些同学照着一模一样的代码复制粘贴的。但是在微信开发者工具里面模拟微信环境操作。但是还是报错了:
因为必须要在真机环境才能成功!
WeixinJSBridge.call("closeWindow")
完整代码:
<script>
import {mapGetters} from 'vuex';
export default {
data() {
return {
showNative: false,
browserType: '', // 浏览器环境类型,wxpay:微信环境,alipay:支付宝环境
}
},
computed: {
...mapGetters(['userInfo'])
},
methods: {
logout() {
console.log(window);
console.log(this)
if (this.browserType === "wxpay") {
this.$toast('即将关闭页面!');
this.closeWindow()
} else {
this.$store.dispatch('user/logout')
}
},
/**
* 如果是微信环境。退出就关闭窗口
*/
closeWindow() {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
function () {
WeixinJSBridge.call("closeWindow")
parent.WeixinJSBridge.call('closeWindow')
},
false
);
} else if (document.attachEvent) {
document.attachEvent(
"onWeixinJSBridgeReady", function () {
//这个可以关闭ios系统的手机
WeixinJSBridge.call("closeWindow");
}
);
}
// 必须加最后这一句,否则关闭不了
WeixinJSBridge.call("closeWindow")
},
// 判断浏览器类型
checkBrowser() {
const browser = navigator.userAgent.toLowerCase();
if (browser.match(/Alipay/i) == "alipay") {
// 支付宝环境
return "alipay";
} else if (browser.match(/MicroMessenger/i) == "micromessenger") {
// 微信内置浏览器
return "wxpay";
}
// 其他h5环境
return "";
},
},
mounted() {
// 判断环境
// 获取浏览器类型,微信浏览器,支付宝浏览器,普通手机浏览器
this.browserType = this.checkBrowser();
},
created() {
}
}
</script>
什么是WeixinJSBridge?
WeixinJSBridge不同于jssdk,不需要鉴权,是微信内置浏览器自带的接口。
大致有以下几个有用的知识点(各功能具体方法请看原文):
- 分享给好友
- 分享到朋友圈
- 分享到微博
- 隐藏下方工具栏
- 隐藏微信右上角分享按钮(并非隐藏三个点,而是里面的菜单)
- 关闭浏览器回到公众号对话窗口
Vue中只需要定义好方法,在页面初始化中调用即可。
注意:(WeixinJSBridge只能在微信环境内打开的网页有效)
本文标签: 不被请参考httpCallWeixinJSBridge
版权声明:本文标题:WeixinJSBridge.call 不被支持,请参考 http:mp.weixin.qq.comwiki7aaa137b55fb2e0456bf8dd9148dd613f.html 进行 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726184863a1059406.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论