调用微信JS-SDK配置签名

时间 2019-11-10

标签调用微信 sdk 配置签名栏目 JavaScript 繁體版

原文原文链接

先后端进行分开开发：html

1：后端实现获取前端

　　+++接口凭证：access_token （公众号的全局惟一接口调用凭据）ajax

　　　　** GET 获取：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET算法

　　+++接口票据：jsapi_ticket （ JS-SDK 配置签名票据）json

　　　　** GET获取：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi后端

2：进行字典URL键值对的格式排序（即key1=value1&key2=value2…）拼接成字符串api

（微信配置签名以）微信

详情：#附录1-JS-SDK使用权限签名算法 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 微信开发

后端实现了签名配置，前端调用后端提供的接口便可app

注意：打开是在本身服务号配置好的域名形式打开：如 http://buy.shopline.com//html/index.html

在微信开发工具或是微信上，打开便会提示配置具体是否成功信息！

config:ok即表示完成配置，就能够调用 JS-SDK了，实现本身具体的想要的JS-SDK提供的接口！

//index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta http-equiv="pragma" content="no-cache">
 6     <meta http-equiv="cache-control" content="no-cache">
 7     <meta http-equiv="expires" content="0">
 8     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
 9     <title>例子</title>
10     <link rel="icon" href="../images/public/favicon.ico" type="image/x-icon">
11 </head>
12 <body>
13 
14 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
15 <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
16 <script>
17 
18     //配置 wx.config
19     //这一步配置成功的
20 
21     $.ajax({
22         url: '/config',
23         type: 'GET',
24         //必须进行 url 编码
25         ////////////////////
26         data: {
27             url: location.href.split('#')[0]//@todo 重要：后台须要获取签名使用
28         },
29         dataType: 'json',
30         success: function (res) {
31             wx.config({
32                 beta: true,
33                 debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
34                 appId: res.appid, // 必填，公众号的惟一标识 wx4943f6480a79a436
35                 timestamp: res.timestamp, // 必填，生成签名的时间戳
36                 nonceStr: res.nonceStr, // 必填，生成签名的随机串
37                 signature: res.signature,// 必填，签名，见附录1
38                 jsApiList: ['chooseInvoice', 'chooseCard'] // 必填，须要使用的JS接口列表，全部JS接口列表见附录2
39             });
40         }
41     });
42 
43 
44     wx.ready(function () {
45         //此处配置完成，根据本身需求进行接口是否配置完成调用
46         //wx.ready 如 document.ready
47 
48 
49     });
50 
51 
52 </script>
53 </body>
54 </html>

只要这一步，成功了！下面干正事......