vue配置微信开放标签wx-open-launch-app

缺乏、安全感 2022-09-11 10:15 332阅读 0赞

## 背景 ##

H5在微信里打开，然后直接唤起APP,为了解决deeplink 在安卓里不能直接唤起APP的问题

[官方文档][Link 1]

## 开发 ##

### 前置接口请求 ###

// WXOpenApp.js
    import Jsonp from 'jsonp';
    let wx = '';
    if (process.client) { 
        wx = require('weixin-js-sdk');
    }
    
    class WXOpenApp { 
        constructor () { 
            this.url = 'https://xxx.xxxx.com/xxx/getSignPackage';
            this.jsApiList = [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareQZone',
                'onMenuShareWeibo',
                'hideMenuItems',
                'showMenuItems',
                'hideAllNonBaseMenuItem',
                'showAllNonBaseMenuItem',
                'translateVoice',
                'startRecord',
                'stopRecord',
                'onRecordEnd',
                'playVoice',
                'pauseVoice',
                'stopVoice',
                'uploadVoice',
                'downloadVoice',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'hideOptionMenu',
                'showOptionMenu',
                'closeWindow',
                'scanQRCode',
                'chooseWXPay',
                'openProductSpecificView',
                'addCard',
                'chooseCard',
                'openCard'
            ];
        }
    
        init () { 
            if (wx) { 
                const $url = encodeURIComponent(location.href.split('#')[0]);
                // 在服务器端实现签名的逻辑
                Jsonp(`${ this.url}?url=${ $url}`, { }, (err, res) => { 
                    if (err) { 
                        console.log(err);
                    } else { 
                        const data = res.data;
                        if (res.error_code === '0') { 
                            wx.config({ 
                                debug: false,
                                appId: data.appId,
                                timestamp: data.timestamp,
                                nonceStr: data.nonceStr,
                                signature: data.signature,
                                jsApiList: this.jsApiList,
                                openTagList: ['wx-open-launch-app','wx-open-launch-weapp']
                            });
                            wx.ready(function () { 
                            });
                            wx.error(function (res) { 
                                console.log('error', res);
                            });
                        }
                    }
                });
            }
        }
    
        static getInstance () { 
            if (!this.instance) { 
                this.instance = new WXOpenApp();
            }
            return this.instance;
        }
    }
    
    export default WXOpenApp;

### 封装组件 ###

<template>
        
        <div v-if="isShow" id="wxOpenInAPPVui" class="wexin-launch-btn" >
            <wx-open-launch-app :id="id" style="width: 100%; height: 100%; display: block;" :appid="appid" :extinfo="getExtinfo" >
                <script type="text/wxtag-template"> <style>.btn { width:100%;height:65px;background: #fff}</style> <button class="btn">App内查看</button> </script>
            </wx-open-launch-app>
        </div>
    </template>
    <script> import Vue from 'vue'; // 忽略自定义元素标签抛出的报错 Vue.config.ignoredElements = [ 'wx-open-launch-app' ]; let idIndex = 0; export default { name: 'my-open-label', data () { idIndex++; return { id: 'wxopenLanchAppId' + idIndex, appid: '', /* 所需跳转的AppID */ isShow: false }; }, mounted () { this.init(); }, props: { href: { type: String, default: '' } }, computed: { /* eslint-disable vue/no-side-effects-in-computed-properties */ // 跳转所需额外信息 getExtinfo () { if (this.href.length === 0) { this.isShow = false; return ''; } else { const reg = new RegExp('[?&]json=([^#]+)'); const query = this.href.match(reg); const urlArr = query ? query[1] : null; if (urlArr) { try { const json = JSON.parse(urlArr); // eslint-disable-next-line quotes return `json={}`; /* 这里要跟客户端对接，客户端需要的参数 */ } catch (err) { console.log(err); this.isShow = false; return ''; } } else { this.isShow = false; return ''; } } } /* eslint-enable vue/no-side-effects-in-computed-properties */ }, methods: { init () { // 判断微信打开并且是安卓 if (/micromessenger/i.test(navigator.userAgent) && /Android/i.test(navigator.userAgent)) { this.isShow = true; } this.$nextTick(() => { if (this.isShow) { const _this = this; const btn = document.getElementById(this.id); if (!btn) { return; } btn.addEventListener('error', function () { window.location.href = _this.href; }); } }); } } }; </script>
    <style lang="scss" scoped> .wexin-launch-btn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; overflow: hidden; z-index: 1; } </style>

### 使用组件 ###

<template>
        <div>
            <my-open-label :href="deeplink"></my-open-label>
        </div>
    </template>
    <script> import WXOpenApp from 'WXOpenApp.js' export default { mounted () { const wx = WXOpenApp.getInstance(); wx.init(); } } </script>

[Link 1]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22