1. 程式人生 > >TP5 實現微信網頁自定義分享

TP5 實現微信網頁自定義分享

荊軻刺秦王

文章部分借鑑於:https://www.cnblogs.com/sunshineliulu/p/8034286.html

在實際操作中還有一些需要注意的問題:

1.登入微信公眾平臺,設定—公眾號設定—功能設定裡,填寫『JS介面安全域名』。填寫的域名須通過ICP備案的驗證,並將平臺給的txt檔案放到域名指向的web伺服器之下。

注意:在 TP5 框架下,web伺服器根目錄表示的是 TP5 框架的 Public 目錄!

2.整個流程為:

2.1 公眾號的認證

2.2 JS安全域名設定

2.3 將微信公眾平臺給的txt檔案放到網站根目錄下

2.4 獲取到 AppID 和 AppSecret 

3. 下載官方示例程式碼:http://demo.open.weixin.qq.com/jssdk/sample.zip

這個連結是直接下載,瀏覽器會提示安全資訊 不用理會 直接下載即可  解壓出來是這樣的:

本文主要講解 PHP 的部分  而且是放在 TP5框架上的

4. 將解壓的access_token.php、jsapi_ticket.php和jssdk.php放入到 TP5 框架的 extend 目錄下,如下圖:

5. 完成以上步驟後 咱們需要將 Jssdk.php 做一點修改!

5.1 將jssdk.php檔案重新命名為Jssdk.php檔案,設定名稱空間,因為tp路由的關係,需要加上私有屬性path,並在建構函式中設定 $this->path = __DIR__ . DS; 如下圖:

 

5.2 同時將函式 get_php_file 函式返回值中的 $filename 改為 $this->path . $filename ,否則會報錯。如圖:

5.3 在 config.php 檔案中,將先前獲得的AppID和AppSecret配置好。如下圖:

5.4 到這一步 就是基本完成了,現在我們做一個小測試

在application/index/controller下新建Wechat.php檔案,內容如下:

<?php
/**
 * Created by PhpStorm.
 * User: liuyaowei
 * Date: 2018/12/8
 * Time: 15:57
 */
namespace app\index\controller;
use think\Config;
use think\Controller;
use org\wechat\JSSDK;

class Wechat extends Controller{

    //jssdk分享封裝功能
    public function share(){
        $jssdk = new JSSDK(Config::get('WEIXINAPPID'),Config::get('WEIXINAPPSECRET'));
        $res = $jssdk->getSignPackage();
        $appId = $res['appId'];
        $timestamp = $res['timestamp'];
        $nonceStr = $res['nonceStr'];
        $signature = $res['signature'];
        $this->assign(
            array(
                'appId'=>$appId,
                'timestamp'=>$timestamp,
                'nonceStr'=>$nonceStr,
                'signature'=>$signature,
            )
        );
        return $this->fetch('index');
    }

}

以上就是自定義分享需要設定的後臺部分

前端內容如下:

JS 部分

1. 需要引入微信的js檔案:

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2. 呼叫 js 介面 文件,官方技術文件給瞭如下說明:

// 通過config介面注入許可權驗證配置
wx.config({
    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。
    appId: '',   // 必填,公眾號的唯一標識
    timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的隨機串
    signature: '',// 必填,簽名
    jsApiList: [] // 必填,需要使用的JS介面列表
});
// 通過ready介面處理成功驗證
wx.ready(function(){
    // config資訊驗證後會執行ready方法,所有介面呼叫都必須在config介面獲得結果之後,config是一個客戶端的非同步操作,所以如果需要在頁面載入時就呼叫相關介面,則須把相關介面放在ready函式中呼叫來確保正確執行。
    // 對於使用者觸發時才呼叫的介面,則可以直接呼叫,不需要放在ready函式中。
});

實際專案中的程式碼如下:

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    var title = 'this is the share title';
    var imgUrl = 'this is the share imgUrl make it can use browser for open';
    var link = 'http://www.domain.com';
    var desc = 'this is a share description';

    wx.config({
        debug: false,//開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。
        appId: '{$appId}', // 必填,公眾號的唯一標識
        timestamp: '{$timestamp}', // 必填,生成簽名的時間戳
        nonceStr: '{$nonceStr}', //必填, 生成簽名的隨機串
        signature: '{$signature}', //必填,簽名
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] //必填, JS介面列表,這裡只填寫了分享需要的介面
    })
    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: title,
            link: link,
            desc:desc,
            imgUrl: imgUrl,
            success: function() {
                // 使用者確認分享後執行的回撥函式
            },
            cancel: function() {
                // 使用者取消分享後執行的回撥函式
            }
        });
        wx.onMenuShareAppMessage({
            title: title, // 分享標題
            desc: desc, // 分享描述
            link: link, // 分享連結
            imgUrl: imgUrl, // 分享圖示
            type: 'link', // 分享型別,music、video或link,不填預設為link
            dataUrl: '', // 如果type是music或video,則要提供資料鏈接,預設為空
            success: function() {
                // 使用者確認分享後執行的回撥函式
            },
            cancel: function() {
                // 使用者取消分享後執行的回撥函式
            }
        });
    })
</script>

控制器中的程式碼:

private function wxShare(){
        $jssdk = new JSSDK(Config::get('WEIXINAPPID'),Config::get('WEIXINAPPSECRET'));
        $res = $jssdk->getSignPackage();
        $appId = $res['appId'];
        $timestamp = $res['timestamp'];
        $nonceStr = $res['nonceStr'];
        $signature = $res['signature'];
        return $this->assign(
            array(
                'appId'=>$appId,
                'timestamp'=>$timestamp,
                'nonceStr'=>$nonceStr,
                'signature'=>$signature,
            )
        );
    }

將分享設為一個單獨方法 然後在其他 function 裡呼叫就可以了:

$this->wxShare();

還有一點,如果你出現這種情況:

這個時候 將 

curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);

curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);

這兩行的第三個引數改為 false 就可以了

具體程式碼:

private function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    // 為保證第三方伺服器與微信伺服器之間資料傳輸的安全性,所有微信介面採用https方式呼叫,必須使用下面2行程式碼開啟ssl安全校驗。
    // 如果在部署過程中程式碼在此處驗證失敗,請到 http://curl.haxx.se/ca/cacert.pem 下載新的證書判別檔案。
    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;
  }

最後附上 整個 Jssdk 的程式碼:

<?php

namespace org\wechat;

class Jssdk {
  private $appId;
  private $appSecret;
  private $path;

  public function __construct($appId, $appSecret) {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
    $this->path = __DIR__ . DS;
  }

  public function getSignPackage() {
    $jsapiTicket = $this->getJsApiTicket();

    // 注意 URL 一定要動態獲取,不能 hardcode.
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

    $timestamp = time();
    $nonceStr = $this->createNonceStr();

    // 這裡引數的順序要按照 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; 
  }

  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;
  }

  private function getJsApiTicket() {
    // jsapi_ticket 應該全域性儲存與更新,以下程式碼以寫入到檔案中做示例
    $data = json_decode($this->get_php_file("jsapi_ticket.php"));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      // 如果是企業號用以下 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;
        $this->set_php_file("jsapi_ticket.php", json_encode($data));
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }

    return $ticket;
  }

  private function getAccessToken() {
    // access_token 應該全域性儲存與更新,以下程式碼以寫入到檔案中做示例
    $data = json_decode($this->get_php_file("access_token.php"));
    if ($data->expire_time < time()) {
      // 如果是企業號用以下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;
        $this->set_php_file("access_token.php", json_encode($data));
      }
    } 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);
    // 為保證第三方伺服器與微信伺服器之間資料傳輸的安全性,所有微信介面採用https方式呼叫,必須使用下面2行程式碼開啟ssl安全校驗。
    // 如果在部署過程中程式碼在此處驗證失敗,請到 http://curl.haxx.se/ca/cacert.pem 下載新的證書判別檔案。
    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;
  }

  private function get_php_file($filename) {

    return trim(substr(file_get_contents($this->path . $filename), 15));

  }

  private function set_php_file($filename, $content) {
    $fp = fopen($filename, "w");
    fwrite($fp, "<?php exit();?>" . $content);
    fclose($fp);
  }
}

以上就是整個 TP5 自定義微信網頁分享的程式碼了,因為我的專案每個頁面的分享內容都是一樣,而且我的分享內容是在 html 裡面設定的,大家在寫的時候可以改為自定義的設定的。