【Vue】Vue微信JS-SDK分享（系列二）

Vue中使用微信JS-SDK，配置分享

这是微信系列的第二篇，这里讲会讲到微信SDK分享的运用（分享都会了，其他的API不就一通百通了吗）

微信JS-SDK说明文档
微信官方 js-sdk—npm安装

1：微信公众平台配置好域名

2：项目引入微信js-sdk

这里我需要用到微信js-sdk的.js文件，导入方式：

1. 下载js文件,在vue中引入
2. CDN引入
3. npm安装依赖

这里我就直接npm install weixin-js-sdk安装了依赖了,然后在需要的地方引入（也可以弄成mixin）

3：config接口注入权限验证配置

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

注意！：config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后

4：ready接口处理成功验证

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

5：error接口处理失败验证

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

6：组合前面讲到的3个方法，创建要用sdk.js，配置好

import wx from 'weixin-js-sdk'			//微信sdk依赖
import http from '../lib/featch'		// 封装的axios
const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo']
										//要用到微信API
										
function getJSSDK(url, dataForWeixin) {
  http.get('/OAutho/JsSdkConfig?url=' + encodeURIComponent(url)).then(res => {
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: 'wx9d399xxxxxxxxx14', // 必填，公众号的唯一标识
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.noncestr, // 必填，生成签名的随机串
      signature: res.data.signature, // 必填，签名
      jsApiList: jsApiList // 必填，需要使用的JS接口列表
    })
    wx.ready(function () {
      wx.onMenuShareAppMessage({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) { },
        success: function success(res) {
          console.log('已分享');
        },
        cancel: function cancel(res) {
          console.log('已取消');
        },
        fail: function fail(res) {
          alert(JSON.stringify(res));
        }
      });
      // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
      wx.onMenuShareTimeline({
        title: dataForWeixin.title,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {
          // alert('用户点击分享到朋友圈');
        },
        success: function success(res) {
          //alert('已分享');
        },
        cancel: function cancel(res) {
          //alert('已取消');
        },
        fail: function fail(res) {
          alert(JSON.stringify(res));
        }
      });
	// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
      wx.onMenuShareQQ({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {
          //alert('用户点击分享到QQ');
        },
        complete: function complete(res) {
          alert(JSON.stringify(res));
        },
        success: function success(res) {
          //alert('已分享');
        },
        cancel: function cancel(res) {
          //alert('已取消');
        },
        fail: function fail(res) {
          //alert(JSON.stringify(res));
        }
      });
      // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
      wx.onMenuShareWeibo({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {
          //alert('用户点击分享到微博');
        },
        complete: function complete(res) {
          // alert(JSON.stringify(res));
        },
        success: function success(res) {
          //alert('已分享');
        },
        cancel: function cancel(res) {
          // alert('已取消');
        },
        fail: function fail(res) {
        // alert(JSON.stringify(res));
        }
      });
    })
    wx.error(function (res) {
      alert("微信验证失败");
    });
  })
}
export default {
  // 获取JSSDK
  getJSSDK: getJSSDK
}

7：在需要分享的地方

import sdk from '../../assets/sdk/sdk' //引入sdk.js
var url = window.location.href.split('#')[0]
var obj = {
  title: this.userInfo.UserName,		//分享标题
  desc: '个人资料',						//分享内容
  linkurl: location.protocol+"//"+location.host+'/dist/#/show?id=' + this.userInfo.Id,//分享链接
  img: this.userInfo.Photo,				//分享内容显示的图片
}
sdk.getJSSDK(url, obj) 					//传入sdk.js需要的参数

注意：这里传入的URL为当前的地址，传给后台获取签名，因为这里是vue，所以地址要去掉#后面的东西，微信不会识别#后面的内容

注意：确认签名算法：

• 确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工 具进行校验。
• 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
• 确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认)，包括’http(s)😕/‘部分，以及’？‘后面的GET参数部分,但不包括’#'hash后面的部分。
• 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
• 确保一定缓存access_token和jsapi_ticket。
• 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent，后台decodeURIComponent解码），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

8：最后测试分享功能

↓↓↓

↓↓

↓

其他相关微信系列

【Vue】Vue微信授权（系列一）
【微信SDK分享】二次分享失效问题