Web前端学习第11章微信开发4 JS-SDK界面

微信JS-SDK是基于微信公共平台为Web开发人员提供的Web开发工具包. 例如，在我们的网页中，我们希望使用JS-SDK可以实现扫描，获取本地相册，位置信息，共享功能等.

我们可以通过以下五个步骤使用JS-SDK.

绑定域名: 我们在第02节: 微信登录中介绍了它，我们需要在公共帐户设置中绑定[JS接口安全域名]. 引入js文件以通过config接口注入权限验证配置. 代码如下所示. 在这里web前端怎么调用接口，需要解释. 生成JS-SDK签名需要jsapi_ticket. 要获取jsapi_ticket，您需要首先获取access_token. 有关特定的采集方法，请参阅本节的下一部分.

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

通过就绪界面处理成功进行验证

1 wx.ready(function(){
2   // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
3 });

通过错误界面进行故障验证

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

以下示例代码显示了如何通过微信共享功能示例代码使用JS-SDK.

可以通过以下两个参数（appid和secret）调用以下接口来获取Access_token. 我们只有在获取了access_token之后才能调用对其他接口的访问web前端怎么调用接口，但是access_token每两个小时刷新一次，因此为了防止access_token无效，建议将access_token单独存储在服务器中并重新获取每两个小时.

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET

获取access_token后，您可以进一步获取jsapi_ticket，界面如下

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

 1 //时间戳
 2 const timestamp = Math.floor(new Date().getTime() / 1000);  
 3 //随机字符串
 4 const nonceStr = Math.random().toString(36).substr(2, 15);
 5 //jsapi_ticket
 6 const jsapi_ticket;  //通过上述接口获取
 7 //当前页面的url
 8 const url;
 9 //拼接成参数对象
10 const params = {
11    jsapi_ticket,
12    timestamp,
13    noncestr,
14    url
15 }
16 //利用上一节的签名算法生成签名
17 const signature = getSign(params)

上一代程序由服务器完成. 通过以上程序，我们获得了时间戳，加密的字符串和签名，然后将JS-SDK的js文件引入首页，地址如下

http://res.wx.qq.com/open/js/jweixin-1.4.0.js

介绍完后，输入JS-SDK的配置链接.

 1 wx.config({
 2    debug: false, 
 3    appId: '{{appid}}', 
 4    timestamp: Number('{{timestamp}}'), 
 5    nonceStr: '{{nonceStr}}', 
 6    signature: '{{signature}}', 
 7    jsApiList: [
 8        "updateAppMessageShareData",
 9        "updateTimelineShareData"
10    ] 
11 });

两个用于共享功能的接口已添加到jsApiList中. 配置完成后，可以调用界面. 代码如下.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shouji/article-274744-1.html