Vue configures wechat open label wX-open-launch-app

background

The H5 opens in wechat and invokes the APP directly, to solve the problem that Deeplink cannot directly invoke the APP in Android

The official documentation

The development of

Front interface request

// 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(The '#') [0]);
            // Implement the signature logic on the server side
            Jsonp(`The ${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;

Copy the code

Packaging components

<template>
    <! -- v-if="isShow" -->
    <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">Within the App to view</button>
            </script>
        </wx-open-launch-app>
    </div>
</template>
<script>
    import Vue from 'vue';
    // Ignore errors thrown by custom element tags
    Vue.config.ignoredElements = [
        'wx-open-launch-app'
    ];
    let idIndex = 0;
    export default {
        name: 'my-open-label',
        data () {
            idIndex++;
            return {
                id: 'wxopenLanchAppId' + idIndex,
                appid: ' './* The AppID to jump to */
                isShow: false
            };
        },
        mounted () {
            this.init();
        },
        props: {
            href: {
                type: String.default: ' '}},computed: {
            /* eslint-disable vue/no-side-effects-in-computed-properties */
            // The jump requires additional information
            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={}`; /* Here to connect to the client, the client needs the parameter */
                        } 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 () {
                // Verify that wechat is open and it is Android
                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>
Copy the code

Using the component

PS: Note that there is an asynchronous interface, so in the actual performance, the page may be opened for 1s, click to take effect

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