微信分享接口配置和调用

以你之姓@ 2022-06-04 01:09 423阅读 0赞

####  ####

#### 步骤一：绑定域名 ####

先登录[微信公众平台][Link 1]进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

#### 步骤二：引入JS文件 ####

在需要调用JS接口的页面引入如下JS文件，（支持https）：[http://res.wx.qq.com/open/js/jweixin-1.0.0.js][http_res.wx.qq.com_open_js_jweixin-1.0.0.js]

请注意，如果你的页面启用了https，务必引入 [https://res.wx.qq.com/open/js/jweixin-1.0.0.js][https_res.wx.qq.com_open_js_jweixin-1.0.0.js] ，否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

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

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

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

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

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

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

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

**步骤六：具体接口调用，调用之前要获取接口调用凭据，具体如下**：

1.配置文件 application-common.properties 配置一些接口常量信息

**\[html\]**  [view plain][]   [copy][view plain]

1.  \#\\u5FAE\\u4FE1AppID  
2.  AppID=wx0a5aabbccddees  
3.    
4.  \#\\u5FAE\\u4FE1AppSecret  
5.  AppSecret=f1ec0d65d104589ds0opke907dslsjeln09

2.工具类ConfigHelper，读取配置文件：

**\[java\]**  [view plain][]   [copy][view plain]

1.  **package** com.hengxin.qianee.commons;  
2.    
3.  **import** java.util.ResourceBundle;  
4.    
5.  /\*\* 
6.   \* 读取配置文件 
7.   \* @author hzg 
8.   \* 
9.   \*/  
10. **public** **class** ConfigHelper \{  
11.     **private** **static** Object lock = **new** Object();  
12.     **private** **static** ConfigHelper config = **null**;  
13.     **private** **static** ResourceBundle rb = **null**;  
14.       
15.     **private** ConfigHelper(String configFileName) \{  
16.         rb = ResourceBundle.getBundle(configFileName);  
17.     \}  
18.       
19.     **public** **static** ConfigHelper getInstance(String configFileName) \{  
20.         **synchronized**(lock) \{  
21.             **if**(**null** == config) \{  
22.                 config = **new** ConfigHelper(configFileName);  
23.             \}  
24.         \}  
25.         **return** (config);  
26.     \}  
27.       
28.     **public** String getValue(String key) \{  
29.         **return** (rb.getString(key));  
30.     \}  
31.       
32. \}

3.获取签名信息

**\[java\]**  [view plain][]   [copy][view plain]

1.  **package** com.hengxin.qianee.talent.wechat.utils;  
2.    
3.  **import** java.io.BufferedReader;  
4.  **import** java.io.IOException;  
5.  **import** java.io.InputStreamReader;  
6.  **import** java.io.UnsupportedEncodingException;  
7.  **import** java.util.Date;  
8.  **import** java.util.HashMap;  
9.  **import** java.util.Map;  
10. **import** java.util.UUID;  
11.   
12. **import** javax.servlet.http.HttpServletRequest;  
13.   
14. **import** org.apache.http.HttpEntity;  
15. **import** org.apache.http.HttpResponse;  
16. **import** org.apache.http.HttpStatus;  
17. **import** org.apache.http.client.HttpClient;  
18. **import** org.apache.http.client.methods.HttpGet;  
19. **import** org.springframework.beans.factory.annotation.Autowired;  
20.   
21. **import** com.alibaba.fastjson.JSON;  
22. **import** com.alibaba.fastjson.JSONObject;  
23. **import** com.hengxin.qianee.cache.impl.MyCache;  
24. **import** com.hengxin.qianee.commons.ConfigHelper;  
25. **import** com.hengxin.qianee.service.thirdparty.pay.llpay.conn.CustomHttpClient;  
26.   
27. **public** **class** WechatSignUtil \{  
28.       
29.     @Autowired  
30.     MyCache cache;  
31.   
32.       
33.     **public** **static** JSONObject sendGetRequest(String url)\{  
34.         HttpClient httpClient = CustomHttpClient.GetHttpClient();  
35.         HttpGet get = **new** HttpGet(url);  
36.         get.setHeader("Content-Type",  
37.                 "application/x-www-form-urlencoded;charset=utf-8");  
38.         BufferedReader br = **null**;  
39.           
40.         **try** \{  
41.             // 发送请求，接收响应  
42.             HttpResponse resp = httpClient.execute(get);  
43.             **int** ret = resp.getStatusLine().getStatusCode();  
44.             **if**(ret == HttpStatus.SC\_OK)\{  
45.                 // 响应分析  
46.                 HttpEntity entity = resp.getEntity();  
47.                 br = **new** BufferedReader(**new** InputStreamReader(  
48.                         entity.getContent(), "UTF-8"));  
49.                 StringBuffer responseString = **new** StringBuffer();  
50.                 String str = br.readLine();  
51.                 **while** (str != **null**) \{  
52.                     responseString.append(str);  
53.                     str = br.readLine();  
54.                 \}  
55.                 **return** JSON.parseObject(responseString.toString());  
56.             \}  
57.         \}**catch**(Exception e)\{  
58.             e.printStackTrace();  
59.         \}**finally** \{  
60.             **if** (br != **null**) \{  
61.                 **try** \{  
62.                     br.close();  
63.                 \} **catch** (IOException e) \{  
64.                     // do nothing  
65.                 \}  
66.             \}  
67.         \}  
68.         **return** **new** JSONObject();  
69.     \}  
70.       
71.     /\*\* 
72.      \* 获取签名信息 
73.      \* @return 返回签名等 
74.      \*/  
75.     **public** Map<String,String> getWechatSign(HttpServletRequest request,MyCache cache) **throws** UnsupportedEncodingException\{  
76.         String appid = ConfigHelper.getInstance("config").getValue("AppID");  
77.         String appSecret = ConfigHelper.getInstance("config").getValue("AppSecret");  
78.         String url\_Template\_GetAccessToken ="https://api.weixin.qq.com/cgi-bin/token?grant\_type=client\_credential&appid=%s&secret=%s";  
79.         String url\_Template\_GetAccessTicket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access\_token=%s&type=jsapi";  
80.           
81.         String accessToken = cache.getString("wechatAccessToken");  
82.         **if**(accessToken == **null**)\{  
83.             //获取token  
84.             String url\_GetAccessToken = String.format(url\_Template\_GetAccessToken, appid,appSecret);  
85.             JSONObject accessTokenMap = WechatSignUtil.sendGetRequest(url\_GetAccessToken);  
86.             accessToken = accessTokenMap.getString("access\_token");  
87.             cache.setString("wechatAccessToken", 6000, accessToken);  
88.         \}  
89.           
90.         String accessTicket = cache.getString("wechatAccessTicket");  
91.         **if**(accessTicket == **null**)\{  
92.             //获取ticket  
93.             String url\_GetAccessTicket = String.format(url\_Template\_GetAccessTicket, accessToken);  
94.             JSONObject url\_GetAccessTicketMap = WechatSignUtil.sendGetRequest(url\_GetAccessTicket);  
95.             accessTicket = url\_GetAccessTicketMap.getString("ticket");  
96.             cache.setString("wechatAccessTicket", 6000, accessTicket);  
97.         \}  
98.           
99.         // 时间戳  
100.         Long timeStamp = **new** Date().getTime()/1000;  
101.           
102.         String url = request.getRequestURL().toString();  
103.           
104.         //随机字串  
105.         String noncestr = UUID.randomUUID().toString();  
106.           
107.         //签名  
108.         String signature = getSignature(noncestr,accessTicket,url,timeStamp);  
109.           
110.         Map<String,String> result = **new** HashMap<String,String>();  
111.         result.put("appId", appid);  
112.         result.put("timestamp", timeStamp.toString());  
113.         result.put("nonceStr", noncestr);  
114.         result.put("signature", signature);  
115.           
116.         **return** result;  
117.     \}  
118.       
119.     /\*\* 
120.      \* 生成签名 
121.      \* @param nonceStr 随机字串 
122.      \* @param jsapi\_ticket 票据 
123.      \* @param url  
124.      \* @param timestamp 时间戳 
125.      \* @return 
126.      \*/  
127.     **private** String getSignature(String nonceStr,String jsapi\_ticket,String url,Long timestamp)\{  
128.         String template = "jsapi\_ticket=%s&noncestr=%s×tamp=%s&url=%s";  
129.         String result = String.format(template, jsapi\_ticket,nonceStr,timestamp,url);  
130.           
131.         **return** org.apache.commons.codec.digest.DigestUtils.shaHex(result);  
132.     \}  
133. \}

总结：先配置好域名，先根据appid和appSecret拼成的串发送请求获取到一个JSONObject对象，通过该对象调用getString("access\_token")方法取到token；

根据token拼成的url发送一个http get请求得到JSONObject对象，通过调用该对象的.getString("ticket")方法得到ticket

根据时间戳、随机串、当然访问的url和ticket生产签名，也就是接口调用的凭据。最后jsp页面调用如下：

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****script** type="text/javascript"  
2.      src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"**>****</****script****>**  
3.  **<****style** type="text/css"**>**  
4.    
5.  **</****style****>**  
6.  **<****script** type="text/javascript"**>**  
7.      wx.config(\{  
8.          debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
9.          appId : "$\{appId\}", // 必填，公众号的唯一标识  
10.         timestamp : "$\{timestamp\}", // 必填，生成签名的时间戳  
11.         nonceStr : "$\{nonceStr\}", // 必填，生成签名的随机串  
12.         signature : "$\{signature\}",// 必填，签名，见附录1  
13.         jsApiList : \[ 'onMenuShareTimeline', 'onMenuShareAppMessage',  
14.                 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' \]  
15.     \});  
16.     var obj = \{  
17.         title : '标题',  
18.         desc : '欢迎关注！',  
19.         link : 'http://m.test.com',  
20.         imgUrl : 'https://qianee-official.oss-cn-beijing.aliyuncs.com/data/2016-05-21%2Fe382d374-f3c5-45bb-b8cedlsjelnge',  
21.     \};  
22.     wx.ready(function()\{  
23.         wx.onMenuShareAppMessage(obj);  
24.       
25.         // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口  
26.         wx.onMenuShareTimeline(obj);  
27.           
28.         // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口  
29.         wx.onMenuShareQQ(obj);  
30.           
31.         // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口  
32.         wx.onMenuShareWeibo(obj);  
33.     \});  
34.

[Link 1]: http://mp.weixin.qq.com/
[http_res.wx.qq.com_open_js_jweixin-1.0.0.js]: http://res.wx.qq.com/open/js/jweixin-1.0.0.js
[https_res.wx.qq.com_open_js_jweixin-1.0.0.js]: https://res.wx.qq.com/open/js/jweixin-1.0.0.js
[view plain]: http://blog.csdn.net/wangjuan_01/article/details/51919551#