微信JS-SDK 微信分享接口開發（介紹版）

原創 360编码 2020-02-22 01:03

最近項目中的網頁通過微信分享朋友或朋友圈等功能出現了無法顯示分享圖片等信息，後經過排查發現是微信版本升級導致，採用js-sdk完成分享接口，爲了快速實現該功能效果，於是我打算通過前臺js進行實現來看看分享效果。


通過查看微信公衆平臺文檔，找到自己所需要的說明文檔，明確開發步驟，說明文檔截圖如下：


開發步驟：

1、按照說明文檔完成步驟1.1.1 





2、引入js文件

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

[html] view plain copy
  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.      <!-- sha1加密js文件-->  
  9.      <script src="/commonScripts/wxShare_sha1.js"></script>  
  10.   
  11.     <!-- 組裝微信配置信息js文件-->  
  12.      <script src="/commonScripts/wxShare_data.js"></script>  
  13.   
  14.     <!-- 微信分享時調用對應的接口js文件-->  
  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
  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
  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

對數據進行簽名  sha1.js下載


6、此時頁面可以正常運行並完成微信分享了，

成功頁面展示

微信分享給朋友

至此完成想要的驗證效果，接下來就可以在服務器帶開發代碼了！！！期待完整版微信分享

想記錄下自己開發過程，本人第一次寫博客，錯誤之處還請指出共同探討，勿噴！！！ 謝謝

360編碼
發佈了58 篇原創文章 · 獲贊 45 · 訪問量 29萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

ECMAScript引用類型之Array類型

HitoKing 2020-02-24 07:29:00

百度地圖API，用戶拒絕獲取地理位置getStatus()還是等於BMAP_STATUS_SUCCESS

360编码 2020-02-22 01:03:32

JavaScript--常用代碼小技巧

HitoKing 2018-09-03 11:41:24

Underscore源碼解析

HitoKing 2018-09-03 11:41:21

ECMAScript引用類型之Array類型

HitoKing 2020-02-24 07:29:00

百度地圖API，用戶拒絕獲取地理位置getStatus()還是等於BMAP_STATUS_SUCCESS

360编码 2020-02-22 01:03:32

JavaScript、ES5和ES6的介紹和區別

360编码 2019-04-10 21:24:43

微信分享接口配置和調用

360编码 2018-09-03 19:17:43

微信分享接口開發

360编码 2018-09-03 19:17:42

CSS樣式--盒模型（四）

HitoKing 2018-09-03 11:41:24

瀏覽器對話框

HitoKing 2018-09-03 11:41:24

JavaScript with語句的理解

HitoKing 2018-09-03 11:41:23

CSS樣式--前端佈局（五）

HitoKing 2018-09-03 11:41:21

BOM對象之navigator對象

HitoKing 2018-09-03 11:41:21

JSON對象

HitoKing 2018-09-03 11:41:21