微信授权

在这一步上项目中是直接调取了后台书写好的接口，在这一步也很重要，为后面分享埋下伏笔

1
2
//http://servicetest.changan.com.cn/changan-trade-application/api/v1/weixin/redirect?url=http://servicetest.changan.com.cn/changan-b2c-web-h5/
// 在分享前先让用户进入当前页面的时候就必须获取授权，否则根本拿取不到openId,也进行不到下一步，通过接口也可以看出，url必须是当前页面的

获取微信config接口

这个接口也是由后端先接入微信

1
2
3
4
5
6
7
8
9
10
11
// http://servicetest.changan.com.cn/changan-trade-application/api/v1/weixin/config?url=http%3A%2F%2F192.168.111.120%3A8082%2F&openid=2.168.111.120%3A8082%2F
// 从楼上也可以判断出来需要传url和openId来给到后端，而openId则是由楼上的授权接口先获取到
{
    "signature":"a6e77a6b2f0c88cdd3554d864c09f09fcf5efa7b",
    "appId":"wxe427052c635210e8",
    "jsapi_ticket":"gdzxN2g622vVfv3lEXnBsu4pFZhQIyBUn_7uqUP9-sD7BJOGfsbsyJfsn3rv-ulEWgm3QR1bglPYQ0iwO4WWSg",
    // 实际场景中url则会是线上地址
    "url":"http://192.168.111.120:8082/",
    "nonceStr":"3135ec04-6f49-46bf-a21b-2b58055b9b44",
    "timestamp":"1544582200"
}

微信config (wx.config)

进行了楼上两个步骤后，我们开始开始进行微信API的配置，在2018这个分水岭，微信分享做了处理，分享接口有两个无法获取是否分享成功（失败监听不了的意思），但是还是能够监听success接口的回调，这两个 onMenuShareTimeline`onMenuShareAppMessage; 还有两个新的APIupdateAppMessageShareDataupdateTimelineShareData`,这两个在实践中还是监听不到success，建议先用旧的，也可能是我太菜了哎
楼下的data则上楼下config接口回来并且填入的数据，一环扣一环

1
2
3
4
5
6
7
8
9
10
11
12
13
wx.config({
  debug: debug,
  appId: data.appId,
  timestamp: data.timestamp,
  nonceStr: data.nonceStr,
  signature: data.signature,
  jsApiList: [
    'onMenuShareTimeline',       // 分享到朋友圈接口
    'onMenuShareAppMessage',  //  分享到朋友接口
    'updateAppMessageShareData', //1.4 分享到朋友
    'updateTimelineShareData', //1.4分享到朋友圈
  ]
});

微信分享

在这一步的encodeURIComponent则是因为我用的react框架中的hash模式，带了 #号，需要为后面的参数做转码，不然分享后数据会因为微信的分享机制而被截取掉（之前遇到的情况是安卓机会截取而IOS不会）；在这一步上则是在页面进入的初始上就立马调用，微信文档上有句文档叫可能分享的情况下提前调用’

sendData 里面有个Config.authURL,这个玩意则是后端给的微信授权后重定向的接口路径，是第一步骤上的url，防止新用户进入到新页面没授权拿取不到openId,直接调用的骚操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//进行data的数据配置
let sendData = {
  title: '长安汽车尊享服务-活动问卷详情', // 分享标题
  desc: '长安汽车尊享服务活动问卷详情', // 分享描述
  link: `${Config.authURL}${encodeURIComponent('#' + '/questionnaire?' + 'id=' + query.id + '&status=' + `${query.status ? query.status : ''}` + "&mId=" + mld + "&oId=" + old)}`,
  imgUrl: 'http://servicetest.changan.com.cn/changan-mgmt-application/img/2018-11-19/1542596562162.jpg', // 分享图标
  success: function (res) {
    // 设置成功
    console.log('Set Shareinfo ok', res)
  }
};
wx.ready(function () {
    console.warn(sendData, 'sendData');
    wx.updateAppMessageShareData(sendData);
    wx.updateTimelineShareData(sendData);
    wx.onMenuShareTimeline(sendData);
    wx.onMenuShareAppMessage(sendData);
    console.log('WXSDK is Ready!!');
})
})
.fail(e => {
console.error("接口出错！" + e);
});