Web前端之路

微信日常踩坑

2019-08-23  本文已影响0人  经纬文学

微信分享常遇问题

1、invalid signature签名失败

签名一般都是后台生成,检查 appid 是否和后台一致


2.config:ok 分享出去的却不是自己想要的

 --------------url问题

window.location.href.split('#')[0],传递url时候去掉#后面的数据

(根据实际情况是否对url进行decodeURLCompent)

 ------------分享link问题

分享出去的链接需要在appid对应的公众号上添加js安全域名

协议//相对写法,不要写死

----------------图片链接

图片链接 协议需要写死 http或者https


3.  vue中 可能会遇到 奇怪的问题

----------ios 分明config:ok  有时候下一页分享却有问题

ios用vue 路由跳转,进入下一页,这时候复制这个链接,发现还是上一页的链接

除了修改跳转方式,还可以通过路由拦截。修改url

router.afterEach((to, from) => {

  const u = navigator.userAgent.toLowerCase()

  // 微信中跳转

  if(u.indexOf("like mac os x") < 0 || u.match(/MicroMessenger/i) != 'micromessenger') return

  // 有个坏处就是可能会有奇怪的bug 所以在这针对要分享的页面单独处理 xxxx替换

  if (to.path.indexOf('xxxx') > -1){

    if (to.path !== global.location.pathname) {

      location.assign(to.fullPath)

    }

  }

})


----------安卓有时候在vue main.js  分明配置ok 跳转下一页 却不好使 刷新一下就ok

         在当前页重新配置吧~


附:


判断是否为微信的方法

function isWeiXin() {

    var ua = window.navigator.userAgent.toLowerCase();

    if (ua.match(/MicroMessenger/i) == 'micromessenger') {

      return true;

    } else {

      return false;

    }

  }


微信分享配置

          // 是否为微信

     if (isWeiXin()){

         let url = window.location.href.split('#')[0]

         // 解码

         url = decodeURIComponent(url)

         axios.get('后台地址', { params: { url: url } }).then((response) => {

           if (response.data) {

             let data = response.data.result

             wx.config({

               debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

               appId: 'xxxxxxxxxxx', // 必填,公众号的唯一标识

               timestamp: data.timestamp, // 必填,生成签名的时间戳

               nonceStr: data.noncestr, // 必填,生成签名的随机串

               signature: data.signature, // 必填,签名,见附录1

               jsApiList: [

                 'checkJsApi',

                 'hideOptionMenu',

                 'onMenuShareTimeline',

                 'onMenuShareAppMessage',

                 'onMenuShareQQ',

                 'onMenuShareWeibo',

                 'onMenuShareQZone'

               ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

             })

           }

         })

         // }

        //微信分享设置

       let descs = '我要我的滋味'

       this.wxshare({ title: '自定title', imgUrl: '', descs: descs });

     }


      wxshare({ title, imgUrl, descs }) {

        wx.ready(function () {

          let url = window.location.href;

          // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

          let shareConfig = {

            title: title || '默认title',

            link: ,

            imgUrl: imgUrl || '默认连接',

            desc: descs,

            type: 'link',

            success: function () {

              // 用户确认分享后执行的回调函数

              // alert('分享成功')

              // alert(imgUrl)

              // alert('分享成功')

            },

            cancel: function () {

              // alert('分享取消');

            }

          }

          wx.onMenuShareTimeline(shareConfig);

          wx.onMenuShareAppMessage(shareConfig);

          wx.onMenuShareQQ(shareConfig);

          wx.onMenuShareWeibo(shareConfig);

          wx.onMenuShareQZone(shareConfig);

        });

      },

上一篇 下一篇

猜你喜欢

热点阅读