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

2019-11-19 13:15:19

字體：大中小

來源：轉載

供稿：網友

本文主要是分享自己的開發過程，希望能給部分存在同樣問題的朋友一點點幫助；

最近項目中的網頁通過微信分享朋友或朋友圈等功能出現了無法顯示分享圖片等信息，后經過排查發現是微信版本升級導致，采用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(); // 1wxdata.access_token = "B06fRIti5GDmvNLKsV5OkJ4fU1qd3YyyW0cgwenxhqI7XwmpTrpwY6Uc7nNtnumdJvnPJXcACAVPD"; //2 //wxdata.get_jsapi_ticket(); //3wxdata.jsapi_ticket = "XGEs8VD-_kgoxt8jcijupT7j_EA-nP07ro_MmUNDVD0oR8unfqY4C_YIMXAQvhztlTk8j2A" //4 // ----- 5 開始 ------var timestamp = wxdata.create_timestamp();  // timestampvar noncestr = wxdata.create_noncestr(); // noncestrvar url = window.location.href; wxdata.wx_account[0] = wxdata.wx_myuser[0]; // appidwxdata.wx_account[1] = timestamp;  // timestampwxdata.wx_account[2] = noncestr; // noncestrwxdata.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_descwxdata.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

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

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

成功頁面展示