一個PHP文件實現JS-SDK新版微信分享朋友圈,分享給好友功能

前言

如今網上不少關於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&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>這兩個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則表明成功。若是返回其餘的,請在開發者工具根據錯誤碼進行調試。看下圖,三連彈。

微信圖片_20200215224847.jpg

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

這是在開發的時候應該開啓的dubug,若是都OK,到時候上線使用,直接debug: false就不會彈出來了!

三、由於涉及到生成access_token和jsapi_ticket,而且這兩個東西天天請求量有限,而且這兩個東西有效期爲2小時,因此這兩個東西我都是緩存到服務器的,因此會在服務器生成access_token.json、jsapi_ticket.json這兩個文件,每次訪問頁面,都會訪問這兩個文件,判斷是否超時,若是超時,則從新獲取而且緩存,若是還沒超時,那就直接調用緩存。

分享朋友圈

微信圖片_20200215225333.jpg

分享給好友

微信圖片_20200215225404.jpg

體驗一把

微信截圖_20200215225537.png

做者

Author:TANKING
Date:2020-2-15
Web:www.likeyunba.comWeChat:face6009

相關文章
相關標籤/搜索