处理微信app跳转去苹果商店的地址

329 阅读1分钟

解决问题: 在微信app上不能直接点击a标签跳转去苹果商店的地址,有限制

步骤1: 把苹果app下载的地址 apps.apple.com/cn/app/id14… 用草料二维码转化为二维码,地址后面带参数 isShowButton =true (判断)

步骤2: 判断环境如果是在微信app打开,就展示二维码扫码去苹果商店

image.png

<div id="appc" v-cloak>
        <div class="contentcd">
            <img src="./images/文字图片@2x.png?544" class="logo" alt="" srcset="">
                <a href="https://a.app.qq.com/o/simple.jsp?pkgname=yiqi.bazi" v-if="isisAndroid">
                  <img src="./images/down_a@2x.png" @click="" class="buttonleft_c needcenter" alt="" srcset="">
                </a>
                <!-- 下面是二维码 -->
                <block v-if="isInweixin&&!isisAndroid&&!isQQ"  class="blockClass">
                    <img v-if="!isShowButton" src="./images/caoliaoios_code.png" class="caoliaoios_code" alt="" srcset="">
                    <span v-if="!isShowButton"  class="bindtapclass">长按识别</span>
                </block>
                <!-- 下面是ios 微信显示按钮 -->
                <a href="https://apps.apple.com/cn/app/id1462604864">
                    <div class="buttonleft_weixin" @click="clicktoShop" v-if="isShowButton">
                    </div>
                </a>
                  <!--下面是 ios 浏览器情况下才显示-->
                <a href="https://apps.apple.com/cn/app/id1462604864" v-if="!isisAndroid&&!isInweixin&&!isShowButton">
                    <img src="./images/down_i@2x.png" class="buttonleft_c needcenter" alt="" srcset="">
                </a>
                  <!--下面是 ios qq浏览器-->
                <a href="https://apps.apple.com/cn/app/id1462604864" v-if="!isisAndroid&&isQQ">
                    <img src="./images/down_i@2x.png" class="buttonleft_c needcenter" alt="" srcset="">
                </a>
        </div>
    </div>

步骤3: 判断扫描二维码重新跳转回本页面是否有参数isShowButton,如果有赋值给变量this.isShowButton

image.png

      created() {
            var u = navigator.userAgent, app = navigator.appVersion; 
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if(isAndroid){
                this.isisAndroid=true
            }else {
                this.isisAndroid=false
            }
            // console.log(this.isisAndroid,'isisAndroid')

            var ua = window.navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_'){
                this.isInweixin=true
            } else{
                this.isInweixin=false
            }
            if(ua.match(/QQ/i) == 'qq'){
                this.isQQ=true
            }

            this.isShowButton=this.getQueryVariable('isShowButton')

        },

方法获取url里面参数

    /**
             * 获取url参数
             * @param   
             * @returns  void
             * @data 2022年6月13日
             * @author   xiao
             */
             getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return '';
            },