vue在微信内分享所遇到的坑

ios上使用vue微信内分享

这段时间,使用vue做了一个微信内活动页面,把开发途中遇到的坑给列一下。

  • wx相关配置

    设计活动分享所以首先要进行一下wxConfig配置。需要啥就不多说了,详情见
    微信开发平台,这边列一下微信分享的配置。

    //直接wx.ready(() => {})开始配置
    wx.updateAppMessageShareData({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
    });
  • vue路由

    我们使用了vue的history模式,这个需要后台配合

    const router = new Router({
        mode:'history',//设置为history模式
        base:'',//路径,需与nginx配置相同·
        routes: [
            {
                path: '*',
                redirect: {
                    name: 'home'
                }
            },
        ]
    })
  • android和ios不同之处

    微信分享的坑

    //经过上面两步,android基本没问题,可以正常分享
    //但在ios上就不行了 会出现invalid signature签名错误
    //导致这种错误的,有俩地方:
    //1.ios上路由必须使用首页路由(举个例子,第一次进入的路由为/home,然后开始点点点,不管去了那个页面,点击右上角的复制链接,复制出来的链接永远都为/home的路由)
    //2.ios分享会给你带上一串莫名的参数
    
    //解决方法  路由跳转存起来
    router.beforeEach( async (to, from, next) => {
        if (!window.initUrl) {
            window.initUrl = location.href;
        }
    })
    
    //判断是否为ios
    Vue.prototype.isIosOrAndroid = function() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; // android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
        let isStr = "";
        if (isAndroid) {
            isStr = "android";
        }
        if (isiOS) {
            isStr = "ios";
        }
        return isStr;
    };
    
    //android和ios路径链接  这个url是配置wxConfig的时候使用
    const url = Vue.prototype.isIosOrAndroid() === "android" ? window.location.href : window.initUrl;
    
    //莫名参数给他截取掉
    function getQueryString(name) {//根据字段看网址是否拼接&字符串
        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){//假如拼接上了
            window.location.href = ''//再让他跳去你想要去的页面
    }
    
  • 最后附上完整代码

    //share.js 在需要分享的页面直接调用即可
    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 => {//请求后台接口配置config
            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: '', // 分享标题
                 desc: '', // 分享描述
                 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                 imgUrl: '', // 分享图标
                });
            }
      });
    }
    
    //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>分享页面</div>
    </template>
    <script>
    import share from "@/share";
    export default {
        created(){
            function getQueryString(name) {//根据字段看网址是否拼接&字符串
                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){//假如拼接上了
                    window.location.href = ''//再让他跳去你想要去的页面
            }
        },
        mounted(){
            share()
        }
    }
    </script>

结束

还有不懂的加qq:2869410800 ,希望各位老哥点个赞👍

    原文作者:pawn
    原文地址: https://segmentfault.com/a/1190000020347050
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞