技術(shù)員聯(lián)盟提供win764位系統(tǒng)下載,win10,win7,xp,裝機(jī)純凈版,64位旗艦版,綠色軟件,免費(fèi)軟件下載基地!

當(dāng)前位置:主頁(yè) > 教程 > 服務(wù)器類 >

微信JS SDK接入的幾點(diǎn)注意事項(xiàng)

來(lái)源:技術(shù)員聯(lián)盟┆發(fā)布時(shí)間:2019-10-24 18:03┆點(diǎn)擊:

微信JS SDK接入,主要可以先參考官網(wǎng)說(shuō)明文檔,總結(jié)起來(lái)有幾個(gè)步驟:

1.綁定域名:

先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。
備注:登錄后可在“開(kāi)發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限。

2.引入JS文件:在需要調(diào)用JS接口的頁(yè)面引入如下JS文件,(支持https):,

備注:支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載,這里補(bǔ)充引入jquery.cookie.js,sha1.js,后面需要用

3.獲取access_token,再獲取jsapi_ticket,由于不能頻繁調(diào)用獲取jsapi_ticket的函數(shù),可以保存一份全局的jsapi_ticket,存放在cookie中,如果過(guò)時(shí)了再重新獲??;另外,這兩個(gè)獲取操作建議放到服務(wù)端確保安全性;

4.拼接noncestr(隨機(jī)字符串), 有效的jsapi_ticket, timestamp(時(shí)間戳), url(當(dāng)前網(wǎng)頁(yè)的URL,不包含#及其后面部分),對(duì)所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序(字典序)后,使用URL鍵值對(duì)的格式(即key1=value1&key2=value2…)拼接成字符串string1。這里需要注意的是所有參數(shù)名均為小寫(xiě)字符。

5.sha1加密生成簽名signature;

6.配置wx.config,wx.ready,wx.error等方法,其中wx.ready是配置成功之后的回調(diào),建議其他方法如微信分享wx.onMenuShareTimeline,wx.onMenuShareAppMessage之類都放到ready里面,以達(dá)到同步執(zhí)行的目的;

服務(wù)端接口:

//access_token是公眾號(hào)的全局唯一票據(jù) public function getTokenForJS() { $appid = "不告訴你"; $secret = "不告訴你"; $url = "https://api.weixin.qq.com/cgi-bin/token?appid=".$appid."&secret=".$secret."&grant_type=client_credential"; $result = http_request($url); echo $result;exit; } //獲取ticket public function getTicket(){ $access_token = I("get.access_token"); $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi"; //$this->ajaxJSON($url); $result = http_request($url); echo $result;exit; } function http_request($url, $data = null) { $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); if (!empty($data)) { curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, $data); } curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); $info = curl_exec($curl); curl_close($curl); return $info; }

前端js:

function setWechatJS() { // var temp = "jsapi_ticket=kgt8ON7yVITDhtdwci0qeRukvrGB1QLAfzCcybh4a_VMg6rgB4OhdsD4O2ruRI0OUPG5VfpKlYYWXcyEeChbBw&noncestr=4df32E3jY6YneEPNfGfs×tamp=1498120656&url=http://m.galaxy-immi.com/country/"; // alert( hex_sha1(temp)); return false; //生成隨機(jī)字符串 var randomString = function(len) { len = len || 32; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默認(rèn)去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/ var maxPos = $chars.length; var pwd = ''; for (var i = 0; i < len; i++) { pwd += $chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; }; var showShareSetting = function () { console.log("title="+title+",description="+description+",link="+url+",imgUrl="+imgUrl); }; //wx配置參數(shù) var jsapi_ticket = $.cookie('jsapi_ticket'); var hello2 = 'hello222'; console.log("jsapi_ticket="+jsapi_ticket); var wxConfig = function () { //alert('ddd='+jsapi_ticket); //獲取當(dāng)前url,不含#以及之后的部分 var timestamp = new Date().getTime(); //生成簽名的時(shí)間戳(當(dāng)前時(shí)間) var noncestr = randomString(20); var signature = ''; //簽名 var url = window.location.href; var index = url.indexOf('#'); if(index !== -1 ) { url = url.slice(0,index); } var temp = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url; signature = hex_sha1(temp); console.log("signature="+signature); wx.config({ debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。 appId: 'wx0875a197e0e5bcd7', // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp: timestamp, // 必填,生成簽名的時(shí)間戳 nonceStr: noncestr, // 必填,生成簽名的隨機(jī)串 signature: signature,// 必填,簽名,見(jiàn)附錄1 jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] // 必填,需要使用的JS接口列表,所有JS接口列表見(jiàn)附錄2 }); wx.ready(function () { //配置成功之后回調(diào) console.log("微信JS SDK配置成功!"); //實(shí)例化title\imgUrl title = $('title').html(); //默認(rèn)取title description = $("meta[name='description']").attr('content'); //判斷當(dāng)前頁(yè)面類型取縮略圖 $("body img").each(function(index,element){ var width = $(element).width(); var height = $(element).height(); var Src = $(element).attr("src"); if(width>200 && height>200){//去頁(yè)面中第一張寬高都大于200的圖片 imgUrl = Src; //console.log(Src); return false; }else{//未在頁(yè)面中取到合適的圖片就選取銀河的logo圖 imgUrl = MyPic+"/H5/img/icon.png"; } }); showShareSetting(); //分享到朋友圈 wx.onMenuShareTimeline({ title: title, // 分享標(biāo)題 link: url, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 imgUrl: imgUrl, // 分享圖標(biāo) success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) showShareSetting(); }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) } }); //分享給朋友 wx.onMenuShareAppMessage({ title: title, // 分享標(biāo)題 desc: description, // 分享描述 link: url, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 imgUrl: imgUrl, // 分享圖標(biāo) type: '', // 分享類型,music、video或link,不填默認(rèn)為link dataUrl: '', // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空 success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) showShareSetting(); }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) } }); //分享到QQ wx.onMenuShareQQ({ title: title, // 分享標(biāo)題 desc: description, // 分享描述 link: url, // 分享鏈接 imgUrl: imgUrl, // 分享圖標(biāo) success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) showShareSetting(); }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) } }); //分享到QQ空間 wx.onMenuShareQZone({ title: title, // 分享標(biāo)題 desc: description, // 分享描述 link: url, // 分享鏈接 imgUrl: imgUrl, // 分享圖標(biāo) success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) showShareSetting(); }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) } }); }); wx.error(function(res){ console.log("微信JS SDK配置錯(cuò)誤!"); // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù),如簽名過(guò)期導(dǎo)致驗(yàn)證失敗,具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看,也可以在返回的res參數(shù)中查看,對(duì)于SPA可以在這里更新簽名。 }); }; //待分享生成的標(biāo)題、鏈接、縮略圖 var title,url,imgUrl,description; //本地cookie查找不到緩存再去請(qǐng)求網(wǎng)絡(luò) if(typeof (jsapi_ticket) == 'undefined' || jsapi_ticket == ''){ //alert('aaa='+jsapi_ticket); //以下步驟分別獲取全局access_token、jsapi_ticket、signature $.get(MyUrl+"getTokenForJS",function (data) { var access_token = data['access_token']; //獲取全局access_token,以及7200秒之后刷新的問(wèn)題 //先出cookie中取,如果沒(méi)有, $.get(MyUrl+"getTicket?access_token="+access_token,function(data){ jsapi_ticket = data['ticket']; //保存當(dāng)前jsapi_ticket var date = new Date(); date.setTime(date.getTime()+7200*1000);//只能這么寫(xiě),10表示10秒鐘 //?替換成分鐘數(shù)如果為60分鐘則為 60 * 60 *1000 $.cookie('jsapi_ticket',jsapi_ticket,{expires:date,path:'http://www.3lian.com/'}); //有效期7200秒 console.log("jsapi_ticket="+jsapi_ticket); //alert('ccc='+jsapi_ticket); wxConfig(); },'json'); },'json'); }else { //alert('bbb='+jsapi_ticket); wxConfig(); } }