微信分享

前情提要：微信网页的分享，需要服务器域名与公众号绑定才能实现此功能。以前的微信分享，可以很明确的知道用户到底有没有分享，但是后来由于很多商家以此让用户不断分享到群聊，后来这边的功能就弱化了，用户到达分享页面，即使退出，也会进入success方法。

下面记录一下活动平台时用到的代码

步骤一：获取微信分享签名

拿当前url链接请求后台接口，获取签名，需要注意的是如果vue项目的路由模式是history，ios手机需要记录第一次进入时的链接，拿该链接去请求后台接口。PS：当微信分享和微信授权一起用时，会出现ios分享失效的问题，在“微信网页开发-微信授权”文章中单独讲解决办法。

代码如下：

function initWxJsConfig(options, type) {
 if (!/micromessenger/i.test(navigator.userAgent)) {
 return;
 }
 let url = window.location.href;
 //如果是 iOS 设备，则使用第一次进入App时的 URL 去请求 wxConfig，不然的话会导致 iOS 中分享的链接不对
 if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
 //记录第一次进入时的链接，iOS 分享时需要用到
 url = store.state.theFirstLink;
 }
 // 请求后台获取微信签名和配置，需要去掉#
 url = encodeURIComponent(url.split("#")[0]);
 // 请求后台获取微信签名和配置
 http.common.initConfig({
 url: url
 })
 .then(res => {
 if (res.resultCode == 0) {
 if (type == "share") {
 initWxJs(res, options);
 }
 if (type == "hidden") {
 hiddenShare(res);
 }
 } else {
 }
 })
 .catch(err => {
 });
 }

步骤二：微信初始化分享，标题描述等等

function initWxJs(data, options) {
 let jsApiList = [
 "checkJsApi",
 "onMenuShareAppMessage",
 "hideMenuItems",
 "onMenuShareTimeline",
 "getLocation"
 ];
 wx.config({
 debug: false,
 appId: data.weChatInitConfig.appId,
 timestamp: data.weChatInitConfig.timestamp,
 nonceStr: data.weChatInitConfig.nonceStr,
 signature: data.weChatInitConfig.signature, //SHA1 加密
 jsApiList: jsApiList //使用的API
 });
 //当config初始化完成之后调用 ready 自动执行支付 也可手动执行支付
 wx.ready(function() {
 let jsApiListReady = [
 "onMenuShareAppMessage",
 "hideMenuItems",
 "onMenuShareTimeline",
 "getLocation"
 ];
 //检测当前微信版本是否支持使用某接口
 wx.checkJsApi({
 jsApiList: jsApiListReady, // 需要检测的JS接口列表，所有JS接口列表见附录2,
 success: function(res) {
 // 以键值对的形式返回，可用的api值true，不可用为false
 if (res.checkResult.onMenuShareAppMessage == true) {
 let shareLogo ='http://...';
 wx.onMenuShareAppMessage({
 title: options.title, // 分享标题
 desc: options.desc, // 分享描述
 link: options.link, // 分享链接
 imgUrl: shareLogo, // 分享图标
 type: "link", // 分享类型,music、video或link，不填默认为link
 success: function() {
 // 用户确认分享后执行的回调函数
 // alert('好友分享成功')
 },
 cancel: function() {
 // 用户取消分享后执行的回调函数
 // alert('好友分享失败')
 }
 });
 wx.onMenuShareTimeline({
   title: options.title, // 分享标题
   desc: options.desc, // 分享描述
   link: options.link, // 分享链接
   imgUrl: shareLogo, // 分享图标
   success: function() {
     // 用户确认分享后执行的回调函数
     // alert('朋友圈分享成功')
   },
   cancel: function() {
     // 用户取消分享后执行的回调函数
     // alert('朋友圈分享失败')
   }
  });
 }
 }
 });
 // 增加定位
 /*wx.getLocation({
 success: function(res) {
 let url =
 "http://api.map.baidu.com/geocoder/v2/?output=json&callback=showLocation";
 jsonp(url, {
 ak: "",   // 百度地图ak
 location: res.latitude + "," + res.longitude
 })
 .then(res => {
 // 通过百度反编译，将微信获取到的经纬度，解析成具体地址，行政编码
 })
 .catch(err => {
 // console.log('出错了')
 // console.log(err)
 });
 },
 cancel: function(res) {
 alert("用户拒绝授权获取地理位置");
 }
 });*/
 }
 });
 wx.error(function(err) {
 // console.log('initweixinshare wx.error')
 // console.log(err)
 // alert("系统繁忙，请稍后。。");
 });
}