踩坑之路——微信授权&微信分享

一、微信授权

1.1H5微信授权流程

判断是否有openid 如果没有话进行微信接口请求 返回code
把code传给后台接口 获取到openid 授权成功
注意： 返回地址必须是外网地址

1.2 绑定域名

微信测试号域名要与回调地址一致 否则报redirect_uri参数错误

二、 H5微信分享

2.1引入JS文件

通过npm安装微信的js-sdk，或者在index.html页面中直接加script标签来引用，这里采用npm安装，
npm install weixin-js-sdk
在需要分享的页面中引入
import wx from 'weixin-js-sdk’

2.2 java实现js-sdk权限签名算法

此步骤前端需要调取接口获取返回结果如下：

2.3 通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

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

config配置里面的参数appid, timestamp, nonceStr, signature都是要后台接口返回的，前端可以通过axios发送接口请求获取

this.axios.get('/wx/get_signature?url=' + encodeURIComponent(location.href.split('#')[0])).then((res) => {
  wx.config({
    debug: true, // 开启调试模式
    appId: res.data.appId, // 必填，公众号的唯一标识
    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
    signature: res.data.signature,// 必填，签名
    jsApiList: [
      "updateAppMessageShareData",//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      "updateTimelineShareData",//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
      "onMenuShareWeibo",//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    ] // 必填，需要使用的JS接口列表
  })
}).catch((error) => {
  console.log(error)
});
//通过ready接口处理成功验证
wx.ready(function(){
    this.wxShareTimeline();
    this.wxShareAppMessage();// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

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

2.4.实现自定义分享朋友/朋友圈

 wxShareTimeline() {// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
    wx.updateAppMessageShareData({
      title: '世界那么大，我想去看看-微信test', // 分享标题
      desc: '世界那么大，我想去看看-微信test', // 分享描述
      link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'http://www.baidu.com/FpEhdOqBzM8EzgFz3ULByxatSacH', // 分享图标
      success: () => {
      }
    })
  },
  wxShareAppMessage() {//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
    wx.updateTimelineShareData({
      title: '世界那么大，我想去看看-微信test2', // 分享标题
      desc: '世界那么大，我想去看看-微信test2', // 分享描述
      link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: require('./logo.jpg'), // 分享图标(不能赋相对路径，一定要是绝对路径)
      success: () => {
      }
    })
  }

成功后图片展示

2.2iOS分享功能踩坑

vue-router切换的时候操作的都是浏览器的历史记录，iOS会把第一次刚进入时的URL作为真实URL，安卓会把当前URL作为真实URL。所以导致后端在配置好的授权参数获得的config参数和微信sdk获取的参数是不一样的。

⭐解决办法

判断机型：第一个页面放Session一个状态state=1 ios机型进入if判断更改Session值 state=2 并刷新当前页面 此时ios会记录当前页面的url地址 改变Session值是防止重复刷新。具体代码如下：

 beforeCreate(){
    let state = sessionStorage.getItem("state")
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/iPod/i)) {
      if(state==1){
        sessionStorage.setItem("state",2)
        location.reload();
      }
    }
  },