如今網上不少關於js-sdk的文章,一搜處處都是,而且有不少不一樣的實現方法,解決方案,可是均已失效,由於之前的1.0版、1.4版接口都已經丟棄了。javascript
如今已經進入1.6版接口,咱們除了要引用jweixin-1.6.0.js以外,還要使用最新的API。php
以前的版本是有分享成功、取消分享、分享失敗的回調函數的,如今爲了防止這個接口的濫用,已經取消了回調,沒法檢測是否已經分享成功了。html
新版的分享朋友圈、分享給好友的API是:前端
'updateAppMessageShareData', //分享到朋友圈 'updateTimelineShareData',//分享給朋友
一、先經過後端獲取幾個參數:jsapi_ticket、noncestr、timestamp、url,獲取這幾個參數的目的就是爲了簽名得到signature。
二、前端要引入官方的1.6版js文件jweixin-1.6.0.jsjava
http://res.wx.qq.com/open/js/jweixin-1.6.0.js
三、前端初始化配置,即將後端獲取到的參數都用到前端上去,而且在jsApiList這個數組當中添加你要使用的API。json
// 初始化配置 wx.config({ debug: true, // 正式上線後成false不在彈出調試信息 appId: '<?php echo $appid;?>', timestamp: '<?php echo $timestamp;?>', nonceStr: '<?php echo $nonceStr;?>', signature: '<?php echo $signature;?>', jsApiList: [ // 全部要調用的 API 都要加到這個列表中 'updateAppMessageShareData', //分享到朋友圈 'updateTimelineShareData',//分享給朋友 ] });
四、而後調用ready函數來驗證是否配置成功後端
wx.ready(function () { //實例化API } })
信息驗證失敗會執行error函數,如簽名過時致使驗證失敗,具體錯誤信息能夠打開config的debug模式查看,也能夠在返回的res參數中查看。api
wx.error(function(res){ // config alert(res); });
五、實例化API數組
//分享到朋友圈 wx.updateTimelineShareData({ title: '', // 分享標題 link: '', // 分享連接,該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致 imgUrl: '', // 分享圖標 success: function (res) { //分享成功 } }) wx.updateAppMessageShareData({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享連接,該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致 imgUrl: '', // 分享圖標 success: function (res) { //分享成功 } })
<?php // 聲明頁面header header("Content-type:charset=utf-8"); // 聲明APPID、APPSECRET $appid = "填寫你的APPID"; $appsecret = "填寫你的APPSECRET"; // 獲取access_token和jsapi_ticket function getToken(){ $file = file_get_contents("access_token.json",true);//讀取access_token.json裏面的數據 $result = json_decode($file,true); //判斷access_token是否在有效期內,若是在有效期則獲取緩存的access_token //若是過時了則請求接口生成新的access_token而且緩存access_token.json if (time() > $result['expires']){ $data = array(); $data['access_token'] = getNewToken(); $data['expires'] = time()+7000; $jsonStr = json_encode($data); $fp = fopen("access_token.json", "w"); fwrite($fp, $jsonStr); fclose($fp); return $data['access_token']; }else{ return $result['access_token']; } } //獲取新的access_token function getNewToken($appid,$appsecret){ global $appid; global $appsecret; $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret.""; $access_token_Arr = file_get_contents($url); $token_jsonarr = json_decode($access_token_Arr, true); return $token_jsonarr["access_token"]; } $access_token = getToken(); //緩存jsapi_ticket function getTicket(){ $file = file_get_contents("jsapi_ticket.json",true);//讀取jsapi_ticket.json裏面的數據 $result = json_decode($file,true); //判斷jsapi_ticket是否在有效期內,若是在有效期則獲取緩存的jsapi_ticket //若是過時了則請求接口生成新的jsapi_ticket而且緩存jsapi_ticket.json if (time() > $result['expires']){ $data = array(); $data['jsapi_ticket'] = getNewTicket(); $data['expires'] = time()+7000; $jsonStr = json_encode($data); $fp = fopen("jsapi_ticket.json", "w"); fwrite($fp, $jsonStr); fclose($fp); return $data['jsapi_ticket']; }else{ return $result['jsapi_ticket']; } } //獲取新的access_token function getNewTicket($appid,$appsecret){ global $appid; global $appsecret; $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=".getToken().""; $jsapi_ticket_Arr = file_get_contents($url); $ticket_jsonarr = json_decode($jsapi_ticket_Arr, true); return $ticket_jsonarr["ticket"]; } $jsapiTicket = getTicket(); // 動態獲取URL $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // 生成時間戳 $timestamp = time(); // 生成nonceStr $createNonceStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; str_shuffle($createNonceStr); $nonceStr = substr(str_shuffle($createNonceStr),0,16); // 按照 key 值 ASCII 碼升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; // 按順序排列按sha1加密生成字符串 $signature = sha1($string); ?> <!DOCTYPE html> <html lang="zh_cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>要分享的index模板頁面</title> </head> <body> <h3>已得到updateAppMessageShareData</h3> <h3>已得到updateTimelineShareData</h3> <h3>這兩個API權限</h3> <h3>請點擊右上角[···]體驗</h3> </body> </html> <!-- 引入微信分享js--> <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script type="text/javascript"> // 初始化配置 wx.config({ debug: true, // 正式上線後改爲false不在彈出調試信息 appId: '<?php echo $appid;?>', timestamp: '<?php echo $timestamp;?>', nonceStr: '<?php echo $nonceStr;?>', signature: '<?php echo $signature;?>', jsApiList: [ // 全部要調用的 API 都要加到這個列表中 'updateAppMessageShareData', //分享到朋友圈 'updateTimelineShareData',//分享給朋友 ] }); // 配置完成後會調用ready函數 wx.ready(function (res) { //分享到朋友圈 wx.updateTimelineShareData({ title: '調用成功!分享到朋友圈!', // 分享標題 link: 'http://www.liketube.cn/res/share.php', // 分享連接,該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致 imgUrl: 'http://www.liketube.cn/res/1.jpg', // 分享圖標 success: function (res) { // 分享成功 } }) wx.updateAppMessageShareData({ title: '調用成功!分享給好友!', // 分享標題 desc: '微信JSSDK1.6新版分享接口成功調用!', // 分享描述 link: 'http://www.liketube.cn/res/share.php', // 分享連接,該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致 imgUrl: 'http://www.liketube.cn/res/1.jpg', // 分享圖標 success: function (res) { // 分享成功 } }) }); //錯誤返回信息 wx.error(function(res){ // config信息驗證失敗會執行error函數,如簽名過時致使驗證失敗,具體錯誤信息能夠打開config的debug模式查看,也能夠在返回的res參數中查看,對於SPA能夠在這裏更新簽名。 alert(res); }); </script>
一、在使用這個代碼以前,請把您的域名添加到已認證的公衆號的JS安全域名當中,具體到文件夾,例如你的程序代碼在page文件夾,那麼JS安全域名爲www.xxx.com/page緩存
二、wx.config,debug: true打開能夠看到調試信息,若是返回config:ok則表明成功。若是返回其餘的,請在開發者工具根據錯誤碼進行調試。看下圖,三連彈。
意思是咱們的配置信息OK、分享朋友圈API也OK、分享給好友API也OK。
這是在開發的時候應該開啓的dubug,若是都OK,到時候上線使用,直接debug: false就不會彈出來了!
三、由於涉及到生成access_token和jsapi_ticket,而且這兩個東西天天請求量有限,而且這兩個東西有效期爲2小時,因此這兩個東西我都是緩存到服務器的,因此會在服務器生成access_token.json、jsapi_ticket.json這兩個文件,每次訪問頁面,都會訪問這兩個文件,判斷是否超時,若是超時,則從新獲取而且緩存,若是還沒超時,那就直接調用緩存。
Author:TANKING
Date:2020-2-15
Web:www.likeyunba.comWeChat:face6009