微信分享流程

### 目的

将网页分享给好友或者分享到朋友圈，在发送给好友时，展示出来的消息是一段很丑的网址，没有缩略图和简介，显示的链接可能会使用户觉得网站不安全遂不愿意点开，会影响文章的二次传播效果，为此我们需要在项目中接入JS-SDK，接入后即可自定义分享名称简介和缩略图

JS-SDK介绍

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

JSSDK使用步骤

步骤一：绑定域名

将自己的项目域名添加到微信公众号中，并设置为安全域名,设置JS接口安全域名后，公众号开发者可在该域名下调用微信开放的JS接口
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res2.wx.qq.com/open/js/jweixin-1.2.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载
在墨天轮项目中，是在nuxt.config.js的script模块下配置

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用

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

appId:在公众号后台找，也可以后端返回

jsApiList:使用的接口

    var jsApiList = [
      'onMenuShareAppMessage', // 分享到朋友 | 分享到QQ
      'onMenuShareTimeline', // 分享到朋友圈 | 分享到QQ空间
      'onMenuShareWeibo' // 分享到腾讯微博
    ]
    //目前微信分享可分享到微信好友，朋友圈及腾讯微博

微信提供的接口

自定义“分享给朋友”及“分享到QQ”按钮的分享内容

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

自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容

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

获取“分享到腾讯微博”按钮点状态及自定义分享内容接口

wx.onMenuShareWeibo({
  title: '', // 分享标题
  desc: '', // 分享描述
  link: '', // 分享链接
  imgUrl: '', // 分享图标
  success: function () {
  // 用户确认分享后执行的回调函数
  },
  cancel: function () {
  // 用户取消分享后执行的回调函数
  }
});

步骤四：通过ready接口处理成功验证

wx.ready(()=>{
  let data = {
    title: options.title || '墨天轮服务平台',
    desc: options.desc || '',
    imgUrl: options.img || '',
    link: encodeURI(window.location.href.split('#')[0])  
    //如果路由没有开启history模式，去除域名#后多余的部分
  }
  wx.onMenuShareTimeline(data)
  wx.onMenuShareAppMessage(data)
  wx.onMenuShareWeibo(data)
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
    //config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
    //则须把相关接口放在ready函数中调用来确保正确执行。
    //对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

步骤五：通过error接口处理失败验证

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

项目实际使用

定义微信分享方法

export function initWxShare (obj) {
  let pageUrl = isIos() ? obj.iosUrl.split('#')[0] : window.location.href.split('#')[0]
  //安卓是当前页面的href，ios是第一次进入页面时的href
  getWxShareStatusApi({ url: pageUrl }).then(res => {
    if (res.status === 200) {
      let options = res.data
      options.title = obj.title
      options.img = obj.img
      options.desc = obj.desc
      wxShare.shareToWechat(options)
    }
  })
}

注意事项

如果页面是采用的Vue Router的history模式的路由的话，在某些情况下，会出现iOS设备上分享失效的问题。假设我们都通过http://modb.pro.com进入，然后跳转到路由为/share的页面需要用到js-sdk，那么实际js-sdk进行签名校验时所获取当前页面url在ios和安卓是不同的，在安卓上没有问题，js-sdk校验的url就是当前页面的ur，即lhttp://modb.pro.com/share而在iOS上，js-sdk校验的url是我们刚进入页面时候的url，即http://modb.pro.com，然而后端那边签名用的是当前页面的url，这就导致iOS上，签名校验不成功。

解决方法

记录当前页面URL，在页面组件创建完成后，ios获取记录的url进行签名，android获取当前路由
router.js

  if (isIos()) {
    store.commit('setWechatSignUrl', window.location.href)
  }

store/index.js

setWechatSignUrl (state, wechatSignUrl) {
  // IOS仅记录第一次进入页面时的URL, IOS微信切换路由实际URL不变，只能使用第一进入页面的URL进行签名
  if (isIos() && state.wechatSignUrl !== '') return
  state.wechatSignUrl = wechatSignUrl
},

具体页面使用

最后在你想使用微信分享的页面调用函数传入自定义的标题，简介，缩略图即可

initShare () {
  let _obj = {
    iosUrl: this.getWechatSignUrl,
    title: '墨天轮-问答',
    img: 'https://oss-emcsprod-public.oss-cn-beijing.aliyuncs.com/image/wxShare/wxShareImg.png',
    desc: '开放、互助的数据库提问平台。在遇到任何数据库疑难杂症都可在墨天轮上提问，平台认证的技术专家免费在线解答。'
  }
  initWxShare(_obj)
},