【微信網(wǎng)頁開發(fā)】關(guān)于微信JSSDK，如何自定義微信網(wǎng)頁的分享內(nèi)容

時間：2023-05-31 01:21:01 | 來源：網(wǎng)站運營

時間：2023-05-31 01:21:01 來源：網(wǎng)站運營

【微信網(wǎng)頁開發(fā)】關(guān)于微信JSSDK，如何自定義微信網(wǎng)頁的分享內(nèi)容：這個教程一直想做，但對于小白來說理解可能有些困難，但轉(zhuǎn)念一想，我TM管小白干什么？







技術(shù)教程當然寫給技術(shù)人員的，網(wǎng)上對于微信jssdk的教程一直不少，想起當年自己看著那些教程都寫不出來，所以還是寫一個簡單直白的，留給自己也留給大家吧。




我們把jssdk接口的能力簡單理解，就是通過后臺的一些簽名參數(shù)，使得你的前端網(wǎng)頁獲取微信對網(wǎng)頁開放的一些能力！




大到微信網(wǎng)頁的登錄功能（認證服務號才能有此權(quán)限），小到自定義網(wǎng)頁分享的標題、封面、簡介與網(wǎng)址（認證號才能有此權(quán)限），都需要通過微信的jssdk接口獲取，還有一些其他功能，大家可以自己去翻閱官方文檔，為了節(jié)約大家時間，這里我們直接說你如何獲取此能力。




首先你先確定你要調(diào)用此接口的域名，并將域名添加到你認證公眾號的后臺js授權(quán)域名中。




然后我們在服務器后端，新建一個文件叫做jssdk.php，對，php文件，其他語言的自己去研究吧，







然后打開這個文件我們開始復制粘貼

在php文件中創(chuàng)建一個php類，叫jssdk

順便科普一下，php的類就是由多個函數(shù)（方法）所組成的一個方法群，集成在類中是為了以后方便調(diào)用，就像是js的插件。




接下來在這個類中填寫方法吧~首先創(chuàng)建三個私有屬性與一個入口函數(shù)

//私有屬性 private $appId; private $appSecret; private $s_url; //入口函數(shù) public function __construct($appId, $appSecret,$s_url) { $this->appId = $appId; $this->appSecret = $appSecret; $this->s_url = $s_url; }接受來自網(wǎng)頁的公眾號參數(shù)等




接下來是獲取用戶的access_token，這個大家都很了解了，小程序開發(fā)中經(jīng)常用到

private function getAccessToken() { // access_token 應該全局存儲與更新，以下代碼以寫入到文件中做示例 $data = json_decode(file_get_contents("access_token.json")); if ($data->expire_time < time()) { // 如果是企業(yè)號用以下URL獲取access_token // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret"; $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret"; $res = json_decode($this->httpGet($url)); $access_token = $res->access_token; if ($access_token) { $data->expire_time = time() + 7000; $data->access_token = $access_token; $fp = fopen("access_token.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } else { $access_token = $data->access_token; } return $access_token; } private function httpGet($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 500); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($curl, CURLOPT_URL, $url); $res = curl_exec($curl); curl_close($curl); return $res; }這里注意有一個access_token.json文件，是用來存儲獲取到的access_token參數(shù)的，一般在php中，這個參數(shù)可以存儲在php的session中，也可以存在數(shù)據(jù)庫中，但我們這是個單文件，沒寫框架也沒寫整套程序，所以我就簡單的存在一個文件中了，所以你需要在你的jssdk.php同級目錄，新建一個access_token.json空白文件。




httpGet方法就不說了，通用的請求函數(shù)。







看官方文檔，參與簽名的字段包含一個隨機字符串，所以我們再添加一個獲取隨機字符串的函數(shù)

private function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; }這里我們基礎(chǔ)方法也就寫完了，接下來是兩個核心方法，首先按照官方的說法我們通過剛才的access_token去微信服務器獲取jsapi_ticket

private function getJsApiTicket() { // jsapi_ticket 應該全局存儲與更新，以下代碼以寫入到文件中做示例 $data = json_decode(file_get_contents("jsapi_ticket.json")); if ($data->expire_time < time()) { $accessToken = $this->getAccessToken(); // 如果是企業(yè)號用以下 URL 獲取 ticket // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken"; $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken"; $res = json_decode($this->httpGet($url)); $ticket = $res->ticket; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; $fp = fopen("jsapi_ticket.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } else { $ticket = $data->jsapi_ticket; } return $ticket; }對，根據(jù)上面的寫法，我們需要再新建一個名為jsapi_ticket.json的空白文件，用來存儲jsapi_ticket




接下來我們寫最后一個方法，將這些簽名所用到的字段整合起來

public function getSignPackage() { $jsapiTicket = $this->getJsApiTicket(); // 注意 URL 一定要動態(tài)獲取，不能 hardcode. $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; $url = $this->s_url; $timestamp = time(); $nonceStr = $this->createNonceStr(); // 這里參數(shù)的順序要按照 key 值 ASCII 碼升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; }好了，是不是很懵啊，沒關(guān)系，看看官方文檔就可以了，這些字段就是我們前端頁面調(diào)用jssdk接口所需的驗簽字段了，接下來還有一個問題，這些方法都是php的，但前端網(wǎng)頁只能支持js腳本語言，通過js調(diào)用php的類好像行不通啊。




這里我們用一個省力的方法，其實前端js中只是需要我們最后的字段結(jié)果，誰調(diào)用這個類還真無所謂，就比如你結(jié)婚是因為想要個孩子，但孩子是誰的呢你也無......




算了，方法就是我們在這個php文件的頂部，自己調(diào)用這個類的方法，然后獲取到最后的結(jié)果并輸出，這樣js一旦來請求文件，我們直接把結(jié)果給它就OK拉~

$url = $_POST['url'];$jssdk = new JSSDK("你的appid", "你的appSecret",$url);$signPackage = $jssdk -> getSignPackage();echo json_encode($signPackage);這里的appid和appSecret你也可以不寫死，讓js傳過來，都是一樣的

OK了，后端教程到這里也就結(jié)束了，最后截圖一部分大家對比對比文件，寫的和我一樣就可以使用了~







然后你只需要在前端js中post請求一下這個文件，就拿到簽名了，之后調(diào)用jssdk的方法就ok！




前端調(diào)用代碼我這里直接貼一下吧，累了，懶得講解了！

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> console.log(111) /**獲取配置*/ function getConfig(){ $.post("你的域名/jssdk.php", { url: window.location.href, method: "ticket"}, function(data){ console.log(data) config = eval('('+data+')'); wx.config({ debug: false, appId: config.appId, timestamp: config.timestamp, nonceStr: config.nonceStr, signature: config.signature, jsApiList: [ // 所有要調(diào)用的 API 都要加到這個列表中 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard' ] }); wx.ready(function () { var shareData = { title: '自定義分享標題', desc: '自定義分享描述', link: '自定義分享鏈接', imgUrl: '自定義分享封面圖' }; wx.onMenuShareAppMessage({ title: '自定義分享標題！', // 分享標題 desc: '自定義分享描述', // 分享描述 link: '自定義分享鏈接', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: '自定義分享封面圖', // 分享圖標 type: '', // 分享類型,music、video或link，不填默認為link dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空 success: function () { // alert("成功") } }); wx.onMenuShareAppMessage(shareData);//分享給好友 wx.onMenuShareTimeline(shareData);//分享到朋友圈 wx.onMenuShareQQ(shareData);//分享給手機QQ wx.onMenuShareWeibo(shareData);//分享騰訊微博 wx.onMenuShareQZone(shareData);//分享到QQ空間 }); }); } </script>最后上文中的這些文件我也都打包了，獲取的話可以在原文底部獲取