微信JS-SDK 微信分享介面開發（介紹版）
阿新 • • 發佈：2019-01-07
本文主要是分享自己的開發過程，希望能給部分存在同樣問題的朋友一點點幫助；
最近專案中的網頁通過微信分享朋友或朋友圈等功能出現了無法顯示分享圖片等資訊，後經過排查發現是微信版本升級導致，採用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 xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 必須引入的檔案--> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="/commonScripts/jquery-1.5.1.min.js"></script> <!-- sha1加密js檔案--> <script src="/commonScripts/wxShare_sha1.js"></script> <!-- 組裝微信配置資訊js檔案--> <script src="/commonScripts/wxShare_data.js"></script> <!-- 微信分享時呼叫對應的介面js檔案--> <script src="/commonScripts/wxShare.js"></script> </head> <body id="weixinshare"> 微信分享開發 <img style="width:672px; height:345px; cursor:pointer" alt="banner01" src="/mobileimg/123.jpg"> </body> </html>
3、配置wxShare.js
var $wx_account = wxdata.wx_account, // 自定義資料，見wxShare_data.js $wx_share = wxdata.wx_share; // 自定義資料 ，見wxShare_data.js //配置微信資訊 wx.config ({ debug : false, // true:除錯時候彈窗 appId : $wx_account[0], // 微信appid timestamp : $wx_account[1], // 時間戳 nonceStr : $wx_account[2], // 隨機字串 signature : $wx_account[3], // 簽名 jsApiList : [ // 所有要呼叫的 API 都要加到這個列表中 'onMenuShareTimeline', // 分享到朋友圈介面 'onMenuShareAppMessage', // 分享到朋友介面 'onMenuShareQQ', // 分享到QQ介面 'onMenuShareWeibo' // 分享到微博介面 ] }); wx.ready (function () { // 微信分享的資料 var shareData = { "imgUrl" : $wx_share[0], // 分享顯示的縮圖地址 "link" : $wx_share[1], // 分享地址 "desc" : $wx_share[2], // 分享描述 "title" : $wx_share[3], // 分享標題 success : function () { // 分享成功可以做相應的資料處理 //alert("分享成功"); } }; wx.onMenuShareTimeline (shareData); wx.onMenuShareAppMessage (shareData); wx.onMenuShareQQ (shareData); wx.onMenuShareWeibo (shareData); }); wx.error(function(res){ // config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗， // 具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視， //對於SPA可以在這裡更新簽名。 alert("好像出錯了！！"); });
4、組裝微信的配置資訊wxShare_data.js
var wxdata = {
wx_account : new Array(4),
wx_share : new Array(4),
wx_myuser : new Array("appid","appsecret"),
access_token : "", // 憑證
token_expires_in : "" , // 憑證過期時間 單位：s
jsapi_ticket : "", // 憑證
ticket_expires_in : "" , // 憑證過期時間 單位：s
url : "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + wxdata.wx_myuser[0] + "&secret=" + wxdata.wx_myuser[1],
// 獲取access_token
// *注意* 經過實際開發測試，微信分享不支援跨域請求，因此獲取access_token的請求必須從伺服器發起，否則無法獲取到access_token
get_access_token : function (){
$.ajax({
type : "GET",
url : wxdata.url
dataType : "jsonp", // 解決跨域問題，jsonp不支援同步操作
cache : false,
// jsonp :'callback',
success : function(msg) {
// 獲取正常 {"access_token":"ACCESS_TOKEN","expires_in":7200}
// 獲取失敗 {"errcode":40013,"errmsg":"invalid appid"}
wxdata.access_token = msg.access_token; // 獲取到的互動憑證 需要快取，存活時間token_expires_in 預設為7200s
wxdata.token_expires_in = msg.expires_in; // 過期時間 單位：s
if (access_token != "" || access_token != null) {
console.log("get access_token success： " + wxdata.access_token);
} else {
console.log("get access_token fail " +wxdata.access_token);
}
},
error : function(msg){
alert("get access_token error!! ： ");
}
});
},
// 獲取jsapi_ticket
// *注意* 經過實際開發測試，微信分享不支援跨域請求，因此獲取jsapi_ticket的請求必須從伺服器發起，否則無法獲取到jsapi_ticket
get_jsapi_ticket : function(){
$.ajax({
type : "GET",
url : "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + wxdata.access_token +"&type=jsapi",
dataType : "jsonp",
cache : false,
async : false,
jsonp :'callback',
success : function(msg) {
/*
{
"errcode":0,
"errmsg":"ok",
"ticket":"e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}
*/
if(msg.errcode == 0){
wxdata.jsapi_ticket = msg.ticket; // 需要快取，存活時間ticket_expires_in 預設為7200s
wxdata.ticket_expires_in = msg.expires_in; // 過期時間 單位：s
console.log("get jsapi_ticket success");
} else {
console.log("get jsapi_ticket fail");
}
},
error : function(msg){
alert("get jsapi_ticket error!!! ");
}
});
},
// 資料簽名
create_signature : function(nocestr,ticket,timestamp,url){
var signature = "";
// 這裡引數的順序要按照 key 值 ASCII 碼升序排序
var s = "jsapi_ticket=" + ticket + "&noncestr=" + nocestr + "×tamp=" + timestamp + "&url=" + url;
return hex_sha1(s);
},
// 自定義建立隨機串 自定義個數0 < ? < 32
create_noncestr : function () {
var str= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var val = "";
for (var i = 0; i < 16; i++) {
val += str.substr(Math.round((Math.random() * 10)), 1);
}
return val;
},
// 自定義建立時間戳
create_timestamp : function () {
return new Date().getSeconds();
}
}
//wxdata.get_access_token(); // 1
wxdata.access_token = "B06fRIti5GDmvNLKsV5OkJ4fU1qd3YyyW0cgwenxhqI7XwmpTrpwY6Uc7nNtnumdJvnPJXcACAVPD"; //2
//wxdata.get_jsapi_ticket(); //3
wxdata.jsapi_ticket = "XGEs8VD-_kgoxt8jcijupT7j_EA-nP07ro_MmUNDVD0oR8unfqY4C_YIMXAQvhztlTk8j2A" //4
// ----- 5 開始 ------
var timestamp = wxdata.create_timestamp(); // timestamp
var noncestr = wxdata.create_noncestr(); // noncestr
var url = window.location.href;
wxdata.wx_account[0] = wxdata.wx_myuser[0]; // appid
wxdata.wx_account[1] = timestamp; // timestamp
wxdata.wx_account[2] = noncestr; // noncestr
wxdata.wx_account[3] = wxdata.create_signature(noncestr, wxdata.jsapi_ticket ,timestamp ,url);//signature
wxdata.wx_share[0] = "http://www.123456.com/img/123.jpg"; // share_img 分享縮圖圖片
wxdata.wx_share[1] = window.location.href;// share_link 分享頁面的url地址，如果地址無效，則分享失敗
wxdata.wx_share[2] = "this is share_desc";// share_desc
wxdata.wx_share[3] = "this is share_title";// share_title
// -------- 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
6、此時頁面可以正常執行並完成微信分享了，
成功頁面展示
微信分享給朋友
至此完成想要的驗證效果，接下來就可以在伺服器帶開發程式碼了！！！期待完整版微信分享
想記錄下自己開發過程，本人第一次寫部落格，錯誤之處還請指出共同探討，勿噴！！！ 謝謝