H5之微信公众号分享

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

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

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

// 回调参数：

{
    xxx: xxx,
    errMsg: '' // 接口调用成功/失败信息
}

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
  wx.updateTimelineShareData({ 
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

如打开页面：

https://www.xxx.com/m/#/activity/invite/friends
分享出去链接：

from=groupmessage   分享到群
from=timeline  分享到朋友圈
from=singlemessage  分享到好友
isappinstalled=0    0或1，表示是否安装了app

location.href.split('#')[0]

let href = window.location.href;
if(href.indexOf('groupmessage') > -1 || href.indexOf('singlemessage') > -1 || href.indexOf('timeline') > -1){
    href = href.replace(/\?from=(groupmessage|singlemessage|timeline)(\S*)#/, '#');
    window.location.href = href;
}

// 请求后台接口 获取微信配置信息
*getWxSignature({ payload, callback }, { call, put, select }) {
  const res = yield call(rGetWxSign, payload);

  if(res.code !==0) {return;}

  // 通过config接口注入权限验证配置
  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: [
      'updateTimelineShareData', 
      'updateAppMessageShareData'
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  })
}

// 获取微信签名
getWxSignature() {
  let url = location.href
  // 如果页面url是hash路由形式 需要处理一下参数
  let i = url.indexOf('#')
  if (i !== -1) {
    url = url.substring(0, i)
  }
  dispatch({ 
    type: `${namespace}/getWxSignature`, 
    payload: {url}
  });
}

// 页面加载完成就执行初始化监听
handleWxShare = ()=>{
    const {pagedata: {mainData={},projectInfo={}}} = this.props;
    const {pagequery} = this.state

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

      // 监听右上角分享到朋友圈事件
      // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
      wx.updateTimelineShareData({
        title: mainData.title, // 分享标题
        desc: (projectInfo.project || {}).projectName || '', // 分享描述
        link: linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: mainData.sharePicUrl, // 分享图标
        success: () => {
          // 用户确认分享后执行的回调函数
          console.log('分享成功')
        },
        cancel: () => {
          // 用户取消分享后执行的回调函数
          console.log('取消分享')
        }
      })
       // 监听右上角发送给朋友事件
       // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
       wx.updateAppMessageShareData({
        title: mainData.title, // 分享标题
        desc: (projectInfo.project || {}).projectName || '', // 分享描述
        link: linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: mainData.sharePicUrl, // 分享图标
        success: () => {
          // 用户确认分享后执行的回调函数
          console.log('分享成功')
        },
        cancel: () => {
          // 用户取消分享后执行的回调函数
          console.log('取消分享')
        }
      })
    })
    wx.error(function(res){
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      console.log(res,'wx error')
    });
  }

componentDidMount() {
    // 微信分享到朋友圈、发送朋友分享的链接带上微信加上的参数 导致分享不了 
    let href = window.location.href
    // from=groupmessage   分享到群
    // from=timeline  分享到朋友圈
    // from=singlemessage  分享到好友
    if(~href.indexOf('from=timeline') || ~href.indexOf('from=singlemessage') || ~href.indexOf('from=groupmessage')) {
      // 带有hash路由的链接分享到朋友圈会被微信带上?from=timeline 导致二次分享的链接打不开 需要重新处理
      // 如果是history模式下的路由 不需要另外处理
      // https://zmjtest.kaisasso.com/wxapp/?from=timeline#/dsb/article?id=286&pid=20&uid=110
      window.location.href = `${location.origin}${location.pathname}${location.hash}` 
    }
  }