淺談微信JS-SDK 微信分享接口開發(fā)(介紹版)
本文主要是分享自己的開發(fā)過程,希望能給部分存在同樣問題的朋友一點(diǎn)點(diǎn)幫助;
最近項目中的網(wǎng)頁通過微信分享朋友或朋友圈等功能出現(xiàn)了無法顯示分享圖片等信息,后經(jīng)過排查發(fā)現(xiàn)是微信版本升級導(dǎo)致,采用js-sdk完成分享接口,為了快速實(shí)現(xiàn)該功能效果,于是我打算通過前臺js進(jìn)行實(shí)現(xiàn)來看看分享效果。
通過查看微信公眾平臺文檔,找到自己所需要的說明文檔,明確開發(fā)步驟,說明文檔截圖如下:
開發(fā)步驟:
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> <!-- 微信分享時調(diào)用對應(yīng)的接口js文件--> <script src="/commonScripts/wxShare.js"></script> </head> <body id="weixinshare"> 微信分享開發(fā) <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, // 自定義數(shù)據(jù),見wxShare_data.js $wx_share = wxdata.wx_share; // 自定義數(shù)據(jù) ,見wxShare_data.js //配置微信信息 wx.config ({ debug : false, // true:調(diào)試時候彈窗 appId : $wx_account[0], // 微信appid timestamp : $wx_account[1], // 時間戳 nonceStr : $wx_account[2], // 隨機(jī)字符串 signature : $wx_account[3], // 簽名 jsApiList : [ // 所有要調(diào)用的 API 都要加到這個列表中 'onMenuShareTimeline', // 分享到朋友圈接口 'onMenuShareAppMessage', // 分享到朋友接口 'onMenuShareQQ', // 分享到QQ接口 'onMenuShareWeibo' // 分享到微博接口 ] }); wx.ready (function () { // 微信分享的數(shù)據(jù) var shareData = { "imgUrl" : $wx_share[0], // 分享顯示的縮略圖地址 "link" : $wx_share[1], // 分享地址 "desc" : $wx_share[2], // 分享描述 "title" : $wx_share[3], // 分享標(biāo)題 success : function () { // 分享成功可以做相應(yīng)的數(shù)據(jù)處理 //alert("分享成功"); } }; wx.onMenuShareTimeline (shareData); wx.onMenuShareAppMessage (shareData); wx.onMenuShareQQ (shareData); wx.onMenuShareWeibo (shareData); }); wx.error(function(res){ // config信息驗證失敗會執(zhí)行error函數(shù),如簽名過期導(dǎo)致驗證失敗, // 具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數(shù)中查看, //對于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 // *注意* 經(jīng)過實(shí)際開發(fā)測試,微信分享不支持跨域請求,因此獲取access_token的請求必須從服務(wù)器發(fā)起,否則無法獲取到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 默認(rèn)為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 // *注意* 經(jīng)過實(shí)際開發(fā)測試,微信分享不支持跨域請求,因此獲取jsapi_ticket的請求必須從服務(wù)器發(fā)起,否則無法獲取到j(luò)sapi_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 默認(rèn)為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!!! "); } }); }, // 數(shù)據(jù)簽名 create_signature : function(nocestr,ticket,timestamp,url){ var signature = ""; // 這里參數(shù)的順序要按照 key 值 ASCII 碼升序排序 var s = "jsapi_ticket=" + ticket + "&noncestr=" + nocestr + "×tamp=" + timestamp + "&url=" + url; return hex_sha1(s); }, // 自定義創(chuàng)建隨機(jī)串 自定義個數(shù)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; }, // 自定義創(chuàng)建時間戳 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 結(jié)束 ----------
說明:
4.1 分享流程:
用戶創(chuàng)建時間戳,隨機(jī)字符串,當(dāng)前需要分享的頁面的url三個變量,接著將自己的appid和APPsecret作為請求參數(shù)獲取access_token,再根據(jù)access_token獲取jsapi_ticket, 然后將獲取的jsapi_ticket,以及自己創(chuàng)建的三個變量進(jìn)行簽名,注意簽名過程案按照 key 值 ASCII 碼升序排序,具體參加程序,
4.2 請求后的響應(yīng)程序無法處理 問題
get_access_token()函數(shù)中對微信發(fā)起獲取access_token的請求,存在跨域問題,設(shè)置dataType:"jsonp"無法解決,通過瀏覽器查看請求發(fā)現(xiàn)微信相應(yīng)的數(shù)據(jù)并沒有包裝數(shù)據(jù),猜測微信不支持這個請求的跨域,因為ajax程序無法通過程序正常獲取access_token的值,但可以在瀏覽器調(diào)式獲取access_token的值,這個值有7200s,足夠去獲取jsapi_ticket ,獲取jsapi_ticket的請求過程存在同樣的問題,因此獲取access_token和jsapi_token必須從服務(wù)端后端代碼。
這篇文章主要是想用js請求來完成分享的效果屬于介紹篇,因而沒有開發(fā)服務(wù)器端請求代碼(勿噴),服務(wù)器篇代碼見后續(xù)的應(yīng)用篇
那么如何正常才能讓程序跑起來,正常的分享頁面呢??
在wxShare_data.js 代碼中,首先發(fā)起 wxdata.get_access_token(); 注釋②③④⑤代碼,將瀏覽器獲取的access_token,手動的放到②變量處,
手動完成了access_token的賦值后,注釋①,打開②③,開始 wxdata.get_jsapi_ticket(); 注釋④⑤處代碼
同樣的操作 從瀏覽器獲取 jsapi_ticket值將其賦值給④處變量,注釋①③,打開②④⑤處代碼,最終代碼見wxShare_data.js
5、wxShare_sha1.js
對數(shù)據(jù)進(jìn)行簽名 sha1.js下載
6、此時頁面可以正常運(yùn)行并完成微信分享了,
成功頁面展示
微信分享給朋友
至此完成想要的驗證效果,接下來就可以在服務(wù)器帶開發(fā)代碼了!?。∑诖暾嫖⑿欧窒?/p>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
了解在JavaScript中將值轉(zhuǎn)換為字符串的5種方法
這篇文章主要介紹了在JavaScript中將值轉(zhuǎn)換為字符串的5種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,下面小編就和大家一起來學(xué)習(xí)下吧2019-06-06自動完成的搜索框javascript實(shí)現(xiàn)
這篇文章主要介紹了自動完成的搜索框javascript實(shí)現(xiàn)代碼,感興趣的小伙伴們可以參考一下2016-02-02JavaScript實(shí)現(xiàn)淺拷貝與深拷貝的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)淺拷貝與深拷貝的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript淺拷貝與深拷貝的定義與使用方法,需要的朋友可以參考下2018-07-07小程序使用scroll-view實(shí)現(xiàn)一個滑動列表功能
scroll-view可實(shí)現(xiàn)一個可滾動的視圖區(qū)域,下面這篇文章主要給大家介紹了關(guān)于小程序使用scroll-view實(shí)現(xiàn)一個滑動列表功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08JS 驗證密碼 不能為空,必須含有數(shù)字、字母、特殊字符,長度在8-12位
這篇文章主要介紹了JS 驗證密碼 不能為空,必須含有數(shù)字、字母、特殊字符,長度在8-12位的相關(guān)資料,需要的朋友可以參考下2017-06-06