Vue shares the pit encountered in wechat

Time:2020-3-11

Use Vue wechat to share on IOS

During this time, I used Vue to make a wechat activity page, listing the pits encountered during the development.

  • Wx related configuration

    Design activity sharing requires wxconfig configuration first. You don’t need to talk about anything. For details, see wechat development platform. Here is the configuration of wechat sharing.

    //Start configuration directly with Wx. Ready (() = > {})
    wx.updateAppMessageShareData({
        Title: '', // share title
        Desc: '', // share description
        Link: '// / share link, which must be consistent with the official account JS security domain corresponding to the current page.
        Imgurl: '', // share Icon
    });
  • Vue routing

    We use the history mode of Vue, which requires background cooperation

    const router = new Router({
        Mode: 'history', // set to history mode
        Base: '', // path, the same as nginx configuration·
        routes: [
            {
                path: '*',
                redirect: {
                    name: 'home'
                }
            },
        ]
    })
  • Differences between Android and IOS

    Wechat sharing pit

    //After the above two steps, Android is basically OK and can be shared normally
    //But it can't work on IOS. There will be an invalid signature signature error
    //There are two reasons for this mistake:
    //1. The route on IOS must use the home route (for example, the route entered for the first time is / home, and then click the start point. No matter which page you go to, click the copy link in the upper right corner, the copied link will always be / home route)
    //2. IOS sharing will bring you a string of inexplicable parameters
    
    //Solution: jump and store the route
    router.beforeEach( async (to, from, next) => {
        if (!window.initUrl) {
            window.initUrl = location.href;
        }
    })
    
    //Judge whether it is IOS
    Vue.prototype.isIosOrAndroid = function() {
        let u = navigator.userAgent;
        Let isoandroid = u.indexof ("Android") > 1 | u.indexof ("ADR") > 1; // Android terminal
        Let isios =!! u.match (/ \ (I [^;] +; (U;)? CPU. + Mac OS X /); // IOS terminal
        let isStr = "";
        if (isAndroid) {
            isStr = "android";
        }
        if (isiOS) {
            isStr = "ios";
        }
        return isStr;
    };
    
    //Android and IOS path link this URL is used when configuring wxconfig
    const url = Vue.prototype.isIosOrAndroid() === "android" ? window.location.href : window.initUrl;
    
    //Cut off the unknown parameters
    Function getquerystring (name) {// check whether the URL is spliced according to the field & String
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return unescape(r[2]);
        return null;
    }
    var from = getQueryString('from');
    var appinstall = getQueryString('appinstall');
    var sec = getQueryString('sec');
    var timekey = getQueryString('timekey');
      
    If (from | appinstall | sec | timekey) {// if it is spliced
            Window. Location. Href = "// let him jump to the page you want to go
    }
  • Complete code is attached

    //Share.js can be called directly on the page to be shared
    import  index  from "@/api";
    import wx from "weixin-js-sdk";
    import Vue from "vue";
    export default function() {
        const url = Vue.prototype.isIosOrAndroid() === "android" ? window.location.href :         window.initUrl;
        Index.wxconfig (URL). Then (RES = >
            if (res.code === 200009) {
                wx.config({
                    debug: false,
                    appId: res.appId,
                    timestamp: res.timestamp,
                    nonceStr: res.nonceStr,
                    signature: res.signature,
                    jsApiList: res.jsApiList
                });
                wx.ready(() => {
                    wx.updateAppMessageShareData({ 
                 Title: '', // share title
                 Desc: '', // share description
                 Link: '// / share link, which must be consistent with the official account JS security domain corresponding to the current page.
                 Imgurl: '', // share Icon
                });
            }
      });
    }
    //router.js
    import Vue from 'vue'
    import Router from 'vue-router'
    import home from "../views/index/index.vue";
    
    Vue.use(Router)
    
    const router = new Router({
        mode:'history',
        base:'',
        routes: [
            {
                path: '*',
                redirect: {
                    name: 'home'
                }
            },
            {
                name: 'home',
                path: '/home',
                component: home,
                meta: {
                    title: ''
                }        
            }
        ]
    })
    router.beforeEach( async (to, from, next) => {
        if (to.meta.title) {
            document.title = to.meta.title
        }
        if (!window.initUrl) {
            window.initUrl = location.href;
        }
        next();
    });
    
    export default router;
    //home.vue
    <template>
        < div > share page < / div >
    </template>
    <script>
    import share from "@/share";
    export default {
        created(){
            Function getquerystring (name) {// check whether the URL is spliced according to the field & String
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null)
                    return unescape(r[2]);
                return null;
            }
            var from = getQueryString('from');
            var appinstall = getQueryString('appinstall');
            var sec = getQueryString('sec');
            var timekey = getQueryString('timekey');
              
            If (from | appinstall | sec | timekey) {// if it is spliced
                    Window. Location. Href = "// let him jump to the page you want to go
            }
        },
        mounted(){
            share()
        }
    }
    </script>

End

If you don’t understand, add QQ: 2869410800. I hope you guys will like it A kind of