如何使用微信JS-SDK實(shí)際分享功能？

時(shí)間：2023-11-18 20:30:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-11-18 20:30:01 來源：網(wǎng)站運(yùn)營

如何使用微信JS-SDK實(shí)際分享功能？：

前言

現(xiàn)在網(wǎng)上很多關(guān)于js-sdk的文章，一搜到處都是，并且有很多不同的實(shí)現(xiàn)方法，解決方案，但是均已失效，因?yàn)橐郧暗?.0版、1.4版接口都已經(jīng)丟棄了。

現(xiàn)在已經(jīng)進(jìn)入1.6版接口，我們除了要引用jweixin-1.6.0.js之外，還要使用最新的API。

之前的版本是有分享成功、取消分享、分享失敗的回調(diào)函數(shù)的，現(xiàn)在為了防止這個(gè)接口的濫用，已經(jīng)取消了回調(diào)，無法檢測(cè)是否已經(jīng)分享成功了。

新版的分享朋友圈、分享給好友的API是：

'updateAppMessageShareData', //分享到朋友圈'updateTimelineShareData',//分享給朋友

實(shí)現(xiàn)流程

1、先通過后端獲取幾個(gè)參數(shù)：jsapi_ticket、noncestr、timestamp、url，獲取這幾個(gè)參數(shù)的目的就是為了簽名獲得signature。
2、前端要引入官方的1.6版js文件jweixin-1.6.0.js

http://res.wx.qq.com/open/js/jweixin-1.6.0.js3、前端初始化配置，即將后端獲取到的參數(shù)都用到前端上去，并且在jsApiList這個(gè)數(shù)組當(dāng)中添加你要使用的API。

// 初始化配置 wx.config({ debug: true, // 正式上線后成false不在彈出調(diào)試信息 appId: '<?php echo $appid;?>', timestamp: '<?php echo $timestamp;?>', nonceStr: '<?php echo $nonceStr;?>', signature: '<?php echo $signature;?>', jsApiList: [ // 所有要調(diào)用的 API 都要加到這個(gè)列表中 'updateAppMessageShareData', //分享到朋友圈 'updateTimelineShareData',//分享給朋友 ] });4、然后調(diào)用ready函數(shù)來驗(yàn)證是否配置成功

wx.ready(function () { //實(shí)例化API }})信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看。

wx.error(function(res){ // config alert(res);}); 5、實(shí)例化API

//分享到朋友圈wx.updateTimelineShareData({ title: '', // 分享標(biāo)題 link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 imgUrl: '', // 分享圖標(biāo) success: function (res) { //分享成功 }})wx.updateAppMessageShareData({ title: '', // 分享標(biāo)題 desc: '', // 分享描述 link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 imgUrl: '', // 分享圖標(biāo) success: function (res) { //分享成功 }})

代碼

<?php// 聲明頁面headerheader("Content-type:charset=utf-8");// 聲明APPID、APPSECRET$appid = "填寫你的APPID";$appsecret = "填寫你的APPSECRET";// 獲取access_token和jsapi_ticketfunction getToken(){ $file = file_get_contents("access_token.json",true);//讀取access_token.json里面的數(shù)據(jù) $result = json_decode($file,true);//判斷access_token是否在有效期內(nèi)，如果在有效期則獲取緩存的access_token//如果過期了則請(qǐng)求接口生成新的access_token并且緩存access_token.jsonif (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_tokenfunction 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_ticketfunction getTicket(){ $file = file_get_contents("jsapi_ticket.json",true);//讀取jsapi_ticket.json里面的數(shù)據(jù) $result = json_decode($file,true);//判斷jsapi_ticket是否在有效期內(nèi)，如果在有效期則獲取緩存的jsapi_ticket//如果過期了則請(qǐng)求接口生成新的jsapi_ticket并且緩存jsapi_ticket.jsonif (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_tokenfunction 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();// 動(dòng)態(tài)獲取URL$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";// 生成時(shí)間戳$timestamp = time();// 生成nonceStr$createNonceStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";str_shuffle($createNonceStr);$nonceStr = substr(str_shuffle($createNonceStr),0,16);// 按照 key 值 ASCII 碼升序排序$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$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>這兩個(gè)API權(quán)限</h3> <h3>請(qǐng)點(diǎn)擊右上角[···]體驗(yàn)</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不在彈出調(diào)試信息 appId: '<?php echo $appid;?>', timestamp: '<?php echo $timestamp;?>', nonceStr: '<?php echo $nonceStr;?>', signature: '<?php echo $signature;?>', jsApiList: [ // 所有要調(diào)用的 API 都要加到這個(gè)列表中 'updateAppMessageShareData', //分享到朋友圈 'updateTimelineShareData',//分享給朋友 ] }); // 配置完成后會(huì)調(diào)用ready函數(shù) wx.ready(function (res) { //分享到朋友圈 wx.updateTimelineShareData({ title: '調(diào)用成功！分享到朋友圈！', // 分享標(biāo)題 link: 'http://www.liketube.cn/res/share.php', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 imgUrl: 'http://www.liketube.cn/res/1.jpg', // 分享圖標(biāo) success: function (res) { // 分享成功 } }) wx.updateAppMessageShareData({ title: '調(diào)用成功！分享給好友！', // 分享標(biāo)題 desc: '微信JSSDK1.6新版分享接口成功調(diào)用！', // 分享描述 link: 'http://www.liketube.cn/res/share.php', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 imgUrl: 'http://www.liketube.cn/res/1.jpg', // 分享圖標(biāo) success: function (res) { // 分享成功 } }) }); //錯(cuò)誤返回信息 wx.error(function(res){ // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。 alert(res); }); </script>

代碼說明

1、在使用這個(gè)代碼之前，請(qǐng)把您的域名添加到已認(rèn)證的公眾號(hào)的JS安全域名當(dāng)中，具體到文件夾，例如你的程序代碼在page文件夾，那么JS安全域名為http://www.xxx.com/page

2、wx.config，debug: true打開可以看到調(diào)試信息，如果返回config:ok則代表成功。如果返回其他的，請(qǐng)?jiān)陂_發(fā)者工具根據(jù)錯(cuò)誤碼進(jìn)行調(diào)試?？聪聢D，三連彈。

意思是我們的配置信息OK、分享朋友圈API也OK、分享給好友API也OK。

這是在開發(fā)的時(shí)候應(yīng)該開啟的dubug，如果都OK，到時(shí)候上線使用，直接debug: false就不會(huì)彈出來了！

3、因?yàn)樯婕暗缴蒩ccess_token和jsapi_ticket，并且這兩個(gè)東西每天請(qǐng)求量有限，并且這兩個(gè)東西有效期為2小時(shí)，所以這兩個(gè)東西我都是緩存到服務(wù)器的，所以會(huì)在服務(wù)器生成access_token.json、jsapi_ticket.json這兩個(gè)文件，每次訪問頁面，都會(huì)訪問這兩個(gè)文件，判斷是否超時(shí)，如果超時(shí)，則重新獲取并且緩存，如果還沒超時(shí)，那就直接調(diào)用緩存。

分享朋友圈

分享給好友

應(yīng)用

如果你的博客、論壇、以及自建頁面、網(wǎng)站、活動(dòng)頁面等沒有自帶這方面的功能，你只需要把上面代碼配置到你網(wǎng)站的頁面上，就能輕松實(shí)現(xiàn)微信分享了！高檔很多呢！

注意事項(xiàng)

1、如果用測(cè)試號(hào)，需關(guān)注測(cè)試號(hào)并且僅限關(guān)注測(cè)試號(hào)的微信才有效果，并且需要設(shè)置JS安全域名
2、如果用認(rèn)證訂閱號(hào)、服務(wù)號(hào)，需配置JS安全域名以及IP白名單，具體配置請(qǐng)?jiān)诠娞?hào)查看。
3、如果你的域名強(qiáng)制開啟https，那么源碼中涉及到的http鏈接需要改成https
4、本程序在php5.6的環(huán)境下編寫，如果你的php版本較高，請(qǐng)降低版本再調(diào)試