如何正确的在项目中接入微信JS-SDK

微信JS-SDK的功能

若是你点进来，那么我相信你应该知道微信的JS-SDK能够用来作什么了。微信的官方文档描述以下。

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

经过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时能够直接使用微信分享、扫一扫等微信特有的能力，为微信用户提供更优质的网页体验。

经过使用微信的JS-SDK，你可让你网页在微信内调用拍照、语音、支付、位置、扫一扫这些只能在微信内使用的功能。进过下面的步骤，一步一步的配置，就可让你正确的在项目中引入微信的JS-SDK。

引入微信的JS文件

微信的javascript文件的连接是： res.wx.qq.com/open/js/jwe…

可是只支持使用 AMD/CMD 标准模块加载方法加载。因而我就在npm的官网上找到了发布后的js-sdk，支持CommonJS的引入方式。npm的地址在 这里。能够在你的项目中使用以下命令安装。

npm install weixin-js-sdk
复制代码

安装好后可使用一下两种方式进行引入。

/* 使用CommonJs规范引入 */
const wx = require('weixin-js-sdk');

/* 使用ES6模块引入 */
import wx from 'weixin-js-sdk';
复制代码

为wx.config实现权限签名算法

若是你按照大部分的教程来，他们会让你使用wx.config注入，获取权限。可是使用wx.config的前提是你必需要先实现权限签名算法。而权限签名算法的关键就是jsapi_ticket。关于jsapi_ticketm，官方的描述以下。

生成签名以前必须先了解一下jsapi_ticket，jsapi_ticket是企业号号用于调用微信JS接口的临时票据。正常状况下，jsapi_ticket的有效期为7200秒，经过access_token来获取。因为获取jsapi_ticket的api调用次数很是有限，频繁刷新jsapi_ticket会致使api调用受限，影响自身业务，开发者必须在本身的服务全局缓存jsapi_ticket。

大概什么意思呢，看官方文档可能有点懵。大概意思就是：你想用个人sdk？能够，我给你个2个小时有效期的调用凭证。这个凭证我天天发给你的次数有限，因此你要保存好，否则到时候再想要凭证，没门。

这是通（很）俗（皮）的解释。下面来点正常的解释。想要获取jsapi_ticket，你就须要向下面这个url:qyapi.weixin.qq.com/cgi-bin/get… 发送HttpGET请求。这个url是企业号的请求地址，若是你是我的，则须要请求：api.weixin.qq.com/cgi-bin/tic… 这个地址，须要带上两个参数，access_token和type，若是你是获取jsapi_ticket，那么type就是固定的，值为jsapi。就能够在返回里面拿到ticket。而且你须要在服务器端缓存返回拿到的ticket。这个ticket就是上面通俗解释里的凭证，有效期两个小时，此后前端全部须要用到ticket的地方，后端须要去判断，若是ticket仍然没有过时，就从缓存中取出返回给前端，若是失效，就再发一个GET接口，获取后再存入缓存而且返回给前端。若是请求正常的话，会返回下列数据。

{
    'errcode': 0,
    'errmsg': 'ok',
    'ticket': 'bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA',
    'expires_in': 7200,
}
复制代码

拿到了jsapi_ticket以后，咱们就能够开始进行权限签名算法了。算法的流程以下。

这个逻辑须要在后端实现。为何会在下文给出。将须要用到js-sdk页面的url、以及jsapi_ticket、noncestr（随机字符串）、timestamp（当前的时间戳）进行字典序 排序，而后使用URL键值对的格式 （即 key1=value1&key2=value2…）拼接成字符串string。而后将这个string使用sha1加密，获得的结果就是signature了。而后将signature、timestamp、nonceStr返回给前端，wx.config须要用到这些数据。而后将它们用这里须要特别注意一下，官方的注意文档以下。

注意事项

1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

2. 签名用的url必须是调用JS接口页面的完整URL。

3. 出于安全考虑，开发者必须在服务器端实现签名的逻辑。

这里的官方文档其实也没有那么官方，其实就是告诉咱们，实现上述签名逻辑必须在服务器，以及noncestr和timestamp必需要和在服务器端签名所使用的一致，还有就是调用微信js-sdk的页面的url必需要跟服务端签名所使用的url一致。全部在服务端能够直接从请求的header里面的referer获取。

你把接口作好以后，只要可以正确的返回signature、nonceStr、timestamp（有后端的更好，直接找他们要接口就行了），就能够愉快的进行下一步了。

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

官方的描述以下。

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

在进行了正确的微信javascript文件引入后（看上面）在页面中调用以下代码就能够注入权限验证配置。下面是官方给的样例代码。

wx.config({
    debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
    appId: '', // 必填，企业号的惟一标识，此处填写企业号corpid
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，须要使用的JS接口列表，全部JS接口列表见附录2
});
复制代码

下面我给一个样例数据。

// data就是上一步说的后端返回的那些数据，包含signature、nonceStr、timestamp
const data = await getJsSDK();

wx.config({
    debug: true,
    appId: '你的appId',
    timestamp: data.timestamp,
    nonceStr: data.nonceStr,
    signature: data.signature,
    jsApiList: [
      'onMenuShareTimeline', // 分享到朋友圈
      'onMenuShareAppMessage', // 分享给朋友
      'onMenuShareQQ',// 分享到QQ
      'onMenuShareWeibo',// 分享到腾讯微博
      'onMenuShareQZone',// 分享到QQ空间
    ]
});
复制代码

注入后的生命周期函数

在调用config后会有两个结果，成（这）功（是）和（废）失（话）败。能够经过微信提供的两个接口来进行事件回调。

wx.ready(function(){
    // config信息验证后会执行ready方法，全部接口调用都必须在config接口得到结果以后，config是一个客户端的异步操做，因此若是须要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够直接调用，不须要放在ready函数中。
});

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

调用分享接口

在ready()中调用具体的分享接口。如分享到朋友圈、好友、QQ空间。代码以下。我把接口的全部的钩子函数都给了出来。其实经常使用的就只有的success和cancel。根据你我的的需求而定。

wx.ready(function(){
  /* 分享到朋友圈 */
  wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享连接，该连接域名必须与当前企业的可信域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    },
    trigger: function () {
      // 监听Menu中的按钮点击时触发的方法
    },
    complete: function () {
      // 接口调用完成时执行的回调函数，不管成功或失败都会执行
    },
    fail: function () {
      // 接口调用失败时执行的回调函数
    },
  });
});
复制代码

微信官方文档在这给了一个特别的提醒。

注意：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，由于客户端分享操做是一个同步操做，这时候使用ajax的回包会尚未返回。

大概意思就是，不要尝试在钩子函数中动态的修改title啊link啊的值，由于分享是同步的操做，ajax的值返回回来的时候分享的操做已经结束了。比起这个，要注意的是link字段，它的域名必需要跟微信后台配置的JS安全域域名一致，不然分享会失败。到这为止，微信js-sdk的接入就完成了。还有问题能够直接留言或者联系我。

写在后面

最后还须要注意一点的是，若是页面的url发生了变化，在新的url下调用js-sdk必定要再调用一次签名接口，用新的url再进行一次签名，不然会调用不成功。

微信官方文档地址在 这里

欢迎光临 我的博客