微信JS-SDK 微信分享接口开发（介绍版）

谁借莪１个温暖的怀抱￠ 2022-06-04 01:08 199阅读 0赞

最近项目中的网页通过微信分享朋友或朋友圈等功能出现了无法显示分享图片等信息，后经过排查发现是微信版本升级导致，采用js-sdk完成分享接口，为了快速实现该功能效果，于是我打算通过前台js进行实现来看看分享效果。

通过查看微信公众平台文档，找到自己所需要的[说明文档][Link 1]，明确开发步骤，说明文档截图如下：

![Center][]

开发步骤：

1、按照说明文档完成步骤1.1.1

![Center 1][]

![Center 2][]

![Center 3][]

2、引入js文件

在分享的页面中添加js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

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

1.  **<****html** xmlns="http://www.w3.org/1999/xhtml"**>**    
2.    **<****head****>**   
3.         
4.       **<****script** src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"**>****</****script****>**  
5.            
6.       **<****script** src="/commonScripts/jquery-1.5.1.min.js"**>****</****script****>**  
7.        
8.         
9.       **<****script** src="/commonScripts/wxShare\_sha1.js"**>****</****script****>**  
10.   
11.       
12.      **<****script** src="/commonScripts/wxShare\_data.js"**>****</****script****>**  
13.   
14.       
15.      **<****script** src="/commonScripts/wxShare.js"**>****</****script****>**  
16.           
17.   **</****head****>**    
18.   **<****body**  id="weixinshare"**>**   
19.     微信分享开发  
20.       **<****img**   
21.         style="width:672px; height:345px; cursor:pointer"   
22.         alt="banner01"   
23.         src="/mobileimg/123.jpg"**>**  
24.   **</****body****>**   
25. **</****html****>**

3、配置wxShare.js

\[javascript\]  [view plain][]  [copy][view plain]

1.   **var** $wx\_account = wxdata.wx\_account, // 自定义数据，见wxShare\_data.js  
2.       $wx\_share = wxdata.wx\_share;   // 自定义数据  ，见wxShare\_data.js  
3.     
4.  //配置微信信息  
5.  wx.config (\{  
6.      debug : **false**,    // true:调试时候弹窗  
7.      appId : $wx\_account\[0\],  // 微信appid  
8.      timestamp : $wx\_account\[1\], // 时间戳  
9.      nonceStr : $wx\_account\[2\],  // 随机字符串  
10.     signature : $wx\_account\[3\], // 签名  
11.     jsApiList : \[  
12.         // 所有要调用的 API 都要加到这个列表中  
13.         'onMenuShareTimeline',       // 分享到朋友圈接口  
14.         'onMenuShareAppMessage',  //  分享到朋友接口  
15.         'onMenuShareQQ',         // 分享到QQ接口  
16.         'onMenuShareWeibo'      // 分享到微博接口  
17.     \]  
18. \});  
19. wx.ready (**function** () \{  
20.     // 微信分享的数据  
21.     **var** shareData = \{  
22.         "imgUrl" : $wx\_share\[0\],    // 分享显示的缩略图地址  
23.         "link" : $wx\_share\[1\],    // 分享地址  
24.         "desc" : $wx\_share\[2\],   // 分享描述  
25.         "title" : $wx\_share\[3\],   // 分享标题  
26.         success : **function** () \{    
27.   
28.                // 分享成功可以做相应的数据处理  
29.   
30.               //alert("分享成功"); \}   
31.            \};   
32.        wx.onMenuShareTimeline (shareData);   
33.        wx.onMenuShareAppMessage (shareData);   
34.        wx.onMenuShareQQ (shareData);   
35.        wx.onMenuShareWeibo (shareData);  
36. \});  
37.   
38.   
39. wx.error(**function**(res)\{   
40.      // config信息验证失败会执行error函数，如签名过期导致验证失败，  
41.     // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，  
42.      //对于SPA可以在这里更新签名。   
43.     alert("好像出错了！！");  
44. \});

4、组装微信的配置信息wxShare\_data.js

\[javascript\]  [view plain][]  [copy][view plain]

1.  **var** wxdata = \{  
2.      wx\_account : **new** Array(4),  
3.      wx\_share : **new** Array(4),  
4.      wx\_myuser : **new** Array("appid","appsecret"),  
5.        
6.      access\_token : "", // 凭证  
7.      token\_expires\_in : "" , // 凭证过期时间 单位：s  
8.      jsapi\_ticket : "", // 凭证  
9.      ticket\_expires\_in : "" , // 凭证过期时间 单位：s  
10.     url : "https://api.weixin.qq.com/cgi-bin/token?grant\_type=client\_credential&appid=" + wxdata.wx\_myuser\[0\] + "&secret=" + wxdata.wx\_myuser\[1\],  
11.       
12.         // 获取access\_token    
13.     // \*注意\* 经过实际开发测试，微信分享不支持跨域请求，因此获取access\_token的请求必须从服务器发起，否则无法获取到access\_token  
14.     get\_access\_token : **function** ()\{  
15.             $.ajax(\{  
16.             type : "GET",  
17.             url :  wxdata.url  
18.             dataType : "jsonp",  // 解决跨域问题，jsonp不支持同步操作  
19.             cache : **false**,  
20.         //  jsonp :'callback',  
21.             success : **function**(msg) \{   
22.             // 获取正常 \{"access\_token":"ACCESS\_TOKEN","expires\_in":7200\}  
23.             // 获取失败 \{"errcode":40013,"errmsg":"invalid appid"\}  
24.                 wxdata.access\_token = msg.access\_token;  // 获取到的交互凭证  需要缓存，存活时间token\_expires\_in  默认为7200s  
25.                 wxdata.token\_expires\_in = msg.expires\_in;  // 过期时间 单位：s  
26.                 **if** (access\_token != "" || access\_token != **null**) \{  
27.                     console.log("get access\_token  success： " + wxdata.access\_token);  
28.                 \} **else** \{  
29.                     console.log("get access\_token  fail " +wxdata.access\_token);  
30.                 \}  
31.             \},  
32.             error : **function**(msg)\{  
33.                 alert("get access\_token error!!  ： ");  
34.             \}  
35.         \});  
36.     \},  
37.       
38.     // 获取jsapi\_ticket  
39.     // \*注意\* 经过实际开发测试，微信分享不支持跨域请求，因此获取jsapi\_ticket的请求必须从服务器发起，否则无法获取到jsapi\_ticket  
40.     get\_jsapi\_ticket : **function**()\{  
41.         $.ajax(\{  
42.             type : "GET",  
43.             url : "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access\_token=" + wxdata.access\_token +"&type=jsapi",  
44.             dataType : "jsonp",  
45.             cache : **false**,  
46.             async : **false**,  
47.             jsonp :'callback',  
48.             success : **function**(msg) \{   
49.             /\*  
50.                 \{  
51.                     "errcode":0, 
52.                     "errmsg":"ok", 
53.                     "ticket":"e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", 
54.                     "expires\_in":7200 
55.                 \}  
56.             \*/  
57.                 **if**(msg.errcode == 0)\{  
58.                     wxdata.jsapi\_ticket = msg.ticket;  // 需要缓存，存活时间ticket\_expires\_in  默认为7200s  
59.                     wxdata.ticket\_expires\_in = msg.expires\_in;  // 过期时间 单位：s  
60.                     console.log("get jsapi\_ticket  success");  
61.                 \} **else** \{  
62.                     console.log("get jsapi\_ticket  fail");  
63.                 \}  
64.             \},  
65.             error : **function**(msg)\{  
66.                 alert("get jsapi\_ticket  error!!! ");  
67.             \}  
68.         \});  
69.     \},  
70.     // 数据签名   
71.     create\_signature : **function**(nocestr,ticket,timestamp,url)\{  
72.         **var** signature = "";  
73.         // 这里参数的顺序要按照 key 值 ASCII 码升序排序  
74.         **var** s = "jsapi\_ticket=" + ticket + "&noncestr=" + nocestr + "×tamp=" + timestamp + "&url=" + url;  
75.         **return** hex\_sha1(s);   
76.     \},  
77.   
78.     // 自定义创建随机串 自定义个数0 < ? < 32   
79.     create\_noncestr : **function** () \{  
80.              **var** str= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";  
81.              **var** val = "";  
82.             **for** (**var** i = 0; i < 16; i++) \{  
83.                  val += str.substr(Math.round((Math.random() \* 10)), 1);  
84.              \}  
85.         **return** val;  
86.     \},  
87.       
88.     // 自定义创建时间戳  
89.     create\_timestamp : **function** () \{  
90.         **return** **new** Date().getSeconds();  
91.     \}  
92.       
93. \}  
94.   
95. //wxdata.get\_access\_token();  // 1  
96. wxdata.access\_token = "B06fRIti5GDmvNLKsV5OkJ4fU1qd3YyyW0cgwenxhqI7XwmpTrpwY6Uc7nNtnumdJvnPJXcACAVPD";  //2  
97.   
98. //wxdata.get\_jsapi\_ticket();  //3  
99. wxdata.jsapi\_ticket =  "XGEs8VD-\_kgoxt8jcijupT7j\_EA-nP07ro\_MmUNDVD0oR8unfqY4C\_YIMXAQvhztlTk8j2A"  //4  
100.   
101. //  ----- 5 开始 ------  
102. **var** timestamp = wxdata.create\_timestamp();   // timestamp  
103. **var** noncestr = wxdata.create\_noncestr();  // noncestr  
104. **var** url = window.location.href;  
105.   
106. wxdata.wx\_account\[0\] = wxdata.wx\_myuser\[0\];  // appid  
107. wxdata.wx\_account\[1\] = timestamp;   // timestamp  
108. wxdata.wx\_account\[2\] = noncestr; // noncestr  
109. wxdata.wx\_account\[3\] = wxdata.create\_signature(noncestr, wxdata.jsapi\_ticket ,timestamp ,url);//signature  
110.   
111. wxdata.wx\_share\[0\] = "http://www.123456.com/img/123.jpg";  // share\_img 分享缩略图图片  
112. wxdata.wx\_share\[1\] = window.location.href;// share\_link  分享页面的url地址，如果地址无效，则分享失败  
113. wxdata.wx\_share\[2\] = "this is share\_desc";// share\_desc  
114. wxdata.wx\_share\[3\] = "this is share\_title";// share\_title  
115. //   --------   5 结束 ----------

说明：  
4.1 分享流程：  
用户创建时间戳，随机字符串，当前需要分享的页面的url三个变量，接着将自己的appid和APPsecret作为请求参数获取access\_token，再根据access\_token获取jsapi\_ticket,  然后将获取的jsapi\_ticket，以及自己创建的三个变量进行签名，注意签名过程案按照 key 值 ASCII 码升序排序，具体参加程序，  
  
4.2 请求后的响应程序无法处理 问题  
  
get\_access\_token（）函数中对微信发起获取access\_token的请求，存在跨域问题，设置dataType:"jsonp"无法解决，通过浏览器查看请求发现微信相应的数据并没有包装数据，猜测微信不支持这个请求的跨域，因为ajax程序无法通过程序正常获取access\_token的值，但可以在浏览器调式获取access\_token的值，这个值有7200s，足够去获取jsapi\_ticket ，获取jsapi\_ticket的请求过程存在同样的问题，因此获取access\_token和jsapi\_token必须从服务端后端代码。  
  
这篇文章主要是想用js请求来完成分享的效果属于介绍篇，因而没有开发服务器端请求代码（勿喷），服务器篇代码见后续的应用篇  
  
那么如何正常才能让程序跑起来，正常的分享页面呢？？  
  
在wxShare\_data.js 代码中，首先发起 wxdata.get\_access\_token();  注释②③④⑤代码，将浏览器获取的access\_token，手动的放到②变量处，

手动完成了access\_token的赋值后，注释 ① ，打开 ②③ ，开始  wxdata.get\_jsapi\_ticket();    注释 ④⑤ 处代码

同样的操作 从浏览器获取 jsapi\_ticket值将其赋值给 ④ 处变量，注释 ①③ ，打开 ②④⑤ 处代码，最终代码见wxShare\_data.js

5、wxShare\_sha1.js[  
][Link 2]

对数据进行签名[  sha1.js下载][Link 2]

6、此时页面可以正常运行并完成微信分享了，

成功页面展示

![Center 4][]

微信分享给朋友

![Center 5][]

至此完成想要的验证效果，接下来就可以在服务器带开发代码了！！！期待完整版微信分享

想记录下自己开发过程，本人第一次写博客，错误之处还请指出共同探讨，勿喷！！！ 谢谢

[Link 1]: https://mp.weixin.qq.com/wiki?ptlang=2052&source&ADUIN=1476832398&ADSESSION=1495169164&ADTAG=CLIENT.QQ.5515_.0&ADPUBNO=26657%EF%BC%9B
[Center]: /images/20220604/9361139aadba40e5b981da48a2040b9c.png
[Center 1]: /images/20220604/f9dbd23b95b74773a2f789a6eacb545e.png
[Center 2]: /images/20220604/f16c36ab09794d4a8bd0b97bff554ffe.png
[Center 3]: /images/20220604/8afbd107b147417e998778071ebef8a8.png
[view plain]: http://blog.csdn.net/u013713832/article/details/72778692?locationNum=5&fps=1#
[Link 2]: http://download.csdn.net/detail/chuanyu/8819109
[Center 4]: /images/20220604/372c3c1d7e734a7c8a9e5b1c93980fc6.png
[Center 5]: /images/20220604/ed3f1c443d4d42a981bcdaf10d5eb4b5.png