微信的二次分享

最新推荐文章于 2024-12-10 11:08:38 发布

勤奋小学童

最新推荐文章于 2024-12-10 11:08:38 发布

阅读量528

点赞数

分类专栏：微信公众号文章标签：微信二次分享 invalid signature

本文链接：https://blog.csdn.net/CJXBShowZhouyujuan/article/details/86554454

版权

微信公众号专栏收录该内容

1 篇文章 0 订阅

订阅专栏

微信的二次分享

场景描述

从App分享一条资讯到微信好友。分享的样式包含：标题，描述，图片，App的logo
在微信中预览这条资讯，然后使用微信内部的分享功能，分享给好友，不做任何处理，分析出去的是默认标题，没有logo, 描述部分是文章的链接

期望的结果

分享出去是文章的标题，图片和初次分享的一直，描述部分是初次分享的描述信息。

处理方式

使用微信的jssdk。注册微信jssdk的签名
注册jssdk时填写分享到微信好友，微信朋友圈的方法

处理步骤

微信JSSDK文档地址
需要准备一个微信公众号。登录到“公众号设置”的“功能设置”里填写“JS接口安全域名”
- 域名的格式：比如分享出去的连接：https://testshare.com?params=aaaaa, 那么接口的安全域名：testshare.com
引入微信的js文件：http://res.wx.qq.com/open/js/jweixin-1.2.0.js（支持https）
通过wx.config 接口注入权限验证

(function () {
  var baseUrl = 'https://test.bgycc.com/weixin/get/js/signature'
  getparameter()
  function getparameter () {
    var xhr = new XMLHttpRequest()
    xhr.open('POST', baseUrl, true)
    xhr.timeout = 30000
    xhr.ontimeout = function (event) {
      console.log('请求超时event', event)
    }
    var otherLink = window.location.href.split('#')[0]
    // 这里调用后台的接口，进行定义。但是一定要进行encodeURIComponent的编码
    var data = JSON.stringify({'url': encodeURIComponent(otherLink)})
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var res = JSON.parse(xhr.responseText)
        if (res.code === '0') {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.noncestr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ['onMenuShareTimeline', //分享到朋友圈的接口
            'onMenuShareAppMessage'//分享给朋友的接口
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })
        }
      } else {
      }
    }
    xhr.send(data)
  }
  wx.ready(function (res) {
  // 文件的引用要注意接口的数据返回情况。放到html文件的最底部进行引入
   var sharetitle = window.sessionStorage.getItem('shareTitle')
   var shareimgUrl = window.sessionStorage.getItem('shareImgUrl')
   var sharedesc = window.sessionStorage.getItem('shareDesc')
    var linkUrl = window.location.href.split('#')[0] 
    // 微信的分享
    wx.onMenuShareTimeline({   
        title: sharetitle,    
        link: linkUrl,  
        imgUrl: shareimgUrl,  
        success: function() {  
            // 用户确认分享后执行的回调函数  
        },  
        cancel: function() {   
            // 用户取消分享后执行的回调函数  
        }  
    }); 
       //分享朋友  
    wx.onMenuShareAppMessage({  
        title: sharetitle,  
        desc: sharedesc,  
        link: linkUrl,  
        imgUrl: shareimgUrl,
        type: 'link', 
        success: function() {
        },
        cancel: function() {
        } 
    });  
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  })
  wx.error(function (res) {
     alert('error-------' + JSON.stringify(res))
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
  })
})()