vue 微信h5首页左滑退出 方法

因为微信需要授权 授权要跳转code页面 此时浏览器其实就有两个历史记录页面 如果手势左滑 会返回上一个页面 可能是空白的 也可能自动刷新 就变成两个一样的页面

网上的方案都是 

function pushHistory() {
  var state = {
      title: "title",
      url: ""
  };
  window.history.pushState(state, "title", "");
}
window.addEventListener("popstate", function(e) {...//下面的代码写在这里面})

不过并不满足我的需求 所以在此方案上 添加了一些判断

先是判断ios 还是 android 

var ua= window.navigator.userAgent.toLowerCase();
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
 pushHistory();
 window.addEventListener("popstate", function(e) {
 //根据自己的需求实现自己的功能
 if(localStorage.getItem("address") === 'inventory' || localStorage.getItem("address") === 'enter') {
    // alert(sessionStorage.getItem("address"));
    if( (ua.match(/MicroMessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork') ){
       // alert("企业微信客户端");
       window.close();
     }else if( ua.match(/micromessenger/i) == 'micromessenger' ){
       // alert("微信客户端");
       WeixinJSBridge.call('closeWindow');
     }
  }
 }, false);
}
if (isIOS) {
 pushHistory();
 window.addEventListener("popstate", function(e) {
    //根据自己的需求实现自己的功能 这里判断的是首页左滑 退出
    if(localStorage.getItem("address") === 'inventory' || localStorage.getItem("address") === 'enter') {
       // alert(sessionStorage.getItem("address"));
       if( (ua.match(/MicroMessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork') ){
         // alert("企业微信客户端");
         window.history.go(-1);
        }else if( ua.match(/micromessenger/i) == 'micromessenger' ){
          // alert("微信客户端");
          window.close();
        }
     }
 }, false);
}

企业微信使用 window.history.go(-1); 是因为 退出的时候会返回两次 不是停留在聊天框内 会返回到工作台

以下是Vue微信H5分享的代码示例: ```javascript export default { data() { return { shareTitle: '分享标题', shareDesc: '分享描述', shareLink: window.location.href, shareImgUrl: '分享图标url' } }, mounted() { this.initWechatShare() }, methods: { initWechatShare() { // 引入微信JS-SDK const wx = require('weixin-js-sdk') const url = window.location.href.split('#')[0] const data = { url } // 向后端请求签名数据 axios.get('/api/wechat/signature', { params: data }).then(res => { if (res.data.code === 0) { const signatureData = res.data.data wx.config({ debug: false, appId: signatureData.appId, timestamp: signatureData.timestamp, nonceStr: signatureData.nonceStr, signature: signatureData.signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] }) wx.ready(() => { // 分享到朋友圈 wx.updateTimelineShareData({ title: this.shareTitle, // 分享标题 link: this.shareLink, // 分享链接 imgUrl: this.shareImgUrl, // 分享图标 success() { // 分享成功回调 } }) // 分享给朋友 wx.updateAppMessageShareData({ title: this.shareTitle, // 分享标题 desc: this.shareDesc, // 分享描述 link: this.shareLink, // 分享链接 imgUrl: this.shareImgUrl, // 分享图标 type: '', // 分享类型,music、video或link,不填默认为link dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 success() { // 分享成功回调 } }) }) } }) } } } ``` 在以上代码中,我们使用 axios 向后端请求签名数据,获取 appId、timestamp、nonceStr 和 signature 等信息,然后使用微信 JS-SDK 进行配置和分享。分享到朋友圈使用的接口是 `wx.updateTimelineShareData`,分享给朋友使用的接口是 `wx.updateAppMessageShareData`。 注意,以上代码仅供参考,实际使用需要根据自己的情况进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值