微信日常踩坑

作者: 经纬文学 | 来源:发表于2019-08-23 20:48 被阅读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);

        });

      },

相关文章

  • 微信日常踩坑

    微信分享常遇问题 1、invalid signature 签名失败 2.config:ok 分享出去的却不是自己想...

  • 微信日常踩坑

    微信分享常遇问题 1、invalid signature签名失败 签名一般都是后台生成,检查 appid 是否和后...

  • 2021-05-12

    微信分享跳转2次,微信分享跳转微信正在连接,分享微信没反应 这几天搞微信分享,还是有一些坑在里面的,记录踩过的坑;...

  • UniversalLink适配踩坑

    iOS UniversalLink适配踩坑 最近微信OpenSDK升级微信OpenSDK更新要求 以及QQ Ope...

  • Swift开发 微信第三方登录

    引言 微信支付和微信第三方登录已经做过好多次了,每次做感觉都有坑,详细记录下,以免下次踩坑,先从微信登录开始吧。 ...

  • 【教程】微信小程序入门

    微信小程序入门基础知识 Moustache:我的微信小程序入门踩坑之旅 github精选:微信小程序入门简要教程 ...

  • 开发微信小程序分页功能的坑

    微信小程序开发分页的坑 微信小程序开发中list列表经常要进行分页处理,踩坑在所难免。 app.json wxml...

  • 微信踩坑文章

    1、vue2 spa单页项目实现微信支付2、vue项目修改微信文章标题deboyblog/vue-wechat-t...

  • 微信踩坑大全

    目录: 1 微信的平台1.1 微信公众平台1.2 微信开放平台1.3 商户平台1.4 openid 与 union...

  • 微信支付 code -2 首查位置推荐

    前言 说到微信相关,相信很多开发者都或多或少的踩过坑,如果没有记录甚至很容易二次踩坑,特此记录,留作纪念 ,嘿嘿...

网友评论

    本文标题:微信日常踩坑

    本文链接:https://www.haomeiwen.com/subject/nklxectx.html