2. 程式人生 > >微信公眾平臺開發----分享到朋友圈和傳送給好友

微信公眾平臺開發----分享到朋友圈和傳送給好友

阿新 • • 發佈：2019-02-11
為了自我學習和交流PHP（jquery,linux,lamp,shell,javascript,伺服器）等一系列的知識，希望光臨本部落格的人可以進來交流。尋求共同發展。搭建平臺。本人部落格也有許多的技術文件，希望可以為你提供一些幫助。

在這篇微信公眾平臺開發教程中，我們將介紹如何在網頁中實現傳送給朋友和分享到朋友圈時內容引數自定義的功能。

本文分為以下二個部分：

  1. 生成JS-SDK許可權驗證簽名
  2. 實現傳送給朋友和分享到朋友圈時內容引數自定義

《微信公眾平臺開發最佳實踐》一書中10.5節“傳送給朋友與分享到朋友圈”因微信介面變更已經失效，以使用新介面的本教程為準！

一、微信JS-SDK

1. 獲得Access Token

2. 獲取jsapi_ticket

生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號用於呼叫微信JS介面的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由於獲取jsapi_ticket的api呼叫次數非常有限，頻繁重新整理jsapi_ticket會導致api呼叫受限，影響自身業務，開發者必須在自己的服務全域性快取jsapi_ticket 。

參考以下文件獲取access_token（有效期7200秒，開發者必須在自己的服務全域性快取access_token）：
用第一步拿到的access_token 採用http GET方式請求獲得jsapi_ticket（有效期7200秒，開發者必須在自己的服務全域性快取jsapi_ticket），介面地址如下

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回如下JSON：

複製程式碼 
{
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in":7200
}
複製程式碼

獲得jsapi_ticket之後，就可以生成JS-SDK許可權驗證的簽名了。

3. 簽名演算法實現

簽名生成規則如下：參與簽名的欄位包括noncestr（隨機字串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分） 。對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1。這裡需要注意的是所有引數名均為小寫字元。對string1作sha1加密，欄位名和欄位值都採用原始值，不進行URL 轉義。

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

步驟1. 對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步驟2. 對string1進行sha1簽名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

完整程式碼如下

複製程式碼 
<?php
class JSSDK {
  private $appId;
  private $appSecret;

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

  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(file_get_contents("jsapi_ticket.json"));
    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;
        $fp = fopen("jsapi_ticket.json", "w");
        fwrite($fp, json_encode($data));
        fclose($fp);
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }

    return $ticket;
  }

  private function getAccessToken() {
    // access_token 應該全域性儲存與更新，以下程式碼以寫入到檔案中做示例
    $data = json_decode(file_get_contents("access_token.json"));
    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;
        $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;
  }
}
複製程式碼

二、傳送給朋友和分享到朋友圈引數自定義

1. 繫結域名

先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。

2. 獲取簽名包

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>

3. 引入JS檔案

在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）：

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

4.通過config介面注入許可權驗證配置

所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫。

複製程式碼 
<script>
    wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            // 所有要呼叫的 API 都要加到這個列表中
            'checkJsApi',
            'openLocation',
            'getLocation',
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
          ]
    });
</script>
複製程式碼

5. 通過ready介面處理成功驗證

地理位置需要在頁面載入時就呼叫，需要把相關介面放在ready函式中呼叫來確保正確執行

wx.ready(function () {
});

5.1 通過checkJsApi判斷當前客戶端版本是否支援分享引數自定義

複製程式碼 
        wx.checkJsApi({
            jsApiList: [
                'getLocation',
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ],
            success: function (res) {
                alert(JSON.stringify(res));
            }
        });
複製程式碼

5.2 使用陣列定義分享內容引數

$news = array("Title" =>"微信公眾平臺開發實踐", "Description"=>"本書共分10章，案例程式採用廣泛流行的PHP、MySQL、XML、CSS、JavaScript、HTML5等程式語言及資料庫實現。", "PicUrl" =>'http://images.cnitblog.com/i/340216/201404/301756448922305.jpg', "Url" =>'http://www.cnblogs.com/txw1958/p/weixin-development-best-practice.html');

5.3. 實現JS分享功能

複製程式碼 
wx.onMenuShareAppMessage({
          title: '<?php echo $news['Title'];?>',
          desc: '<?php echo $news['Description'];?>',
          link: '<?php echo $news['Url'];?>',
          imgUrl: '<?php echo $news['PicUrl'];?>',
          trigger: function (res) {
            // 不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
            // alert('使用者點擊發送給朋友');
          },
          success: function (res) {
            // alert('已分享');
          },
          cancel: function (res) {
            // alert('已取消');
          },
          fail: function (res) {
            // alert(JSON.stringify(res));
          }
        });

        wx.onMenuShareTimeline({
          title: '<?php echo $news['Title'];?>',
          link: '<?php echo $news['Url'];?>',
          imgUrl: '<?php echo $news['PicUrl'];?>',
          trigger: function (res) {
            // 不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
            // alert('使用者點選分享到朋友圈');
          },
          success: function (res) {
            // alert('已分享');
          },
          cancel: function (res) {
            // alert('已取消');
          },
          fail: function (res) {
            // alert(JSON.stringify(res));
          }
        });
複製程式碼

三、實現效果

彈出請求獲取頁面

分享時的外掛顯示方倍工作室的 微信公眾平臺開發最佳實踐

  


相關推薦

微信公眾平臺開發----分享到朋友圈和傳送給好友

為了自我學習和交流PHP（jquery,linux,lamp,shell,javascript,伺服器）等一系列的知識，希望光臨本部落格的人可以進來交流。尋求共同發展。搭建平臺。本人部落格也有許多的技術文件，希望可以為你提供一些幫助。 在這篇微信公眾平臺開發教程中，我

微信公眾平臺開發-分享介面的實現

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http

第九篇 ：微信公眾平臺開發實戰Java版之如何實現自定義分享內容

第一部分：微信JS-SDK介紹 微信JS-SDK是微信公眾平臺面向網頁開發者提供的基於微信內的網頁開發工具包。 通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信使用者提供更優質的網頁

微信公眾平臺開發[2] —— 微信端分享功能

<?php class JSSDK { private $appId; private $appSecret; public function __construct($appId, $appSecret) { $this->appId = $appId; $this

微信公眾平臺開發之萬能表單

平臺 體驗 src .net 等等 art net 獎勵 功能 微信公眾平臺開發之萬能表單是為了方便我們得到用戶的信息。我們能夠在後臺設置不論什麽須要用戶填寫的信息，比方：電話，姓名，性別，工作等等信息，當然我們也能夠設置一定的獎勵，僅僅要完好這些信息就能夠得到一定

【微信公眾平臺開發】利用百度接口，制作一鍵導航功能

顯示 12px font -c cati blog ltr vertica 拾取 微信開發中，非常多商家用戶都要求點詳細地址。能在百度或者soso地圖上面顯示自己的地址。 而這種功能。利用百度api接口地圖標點功能就能夠非常easy實現。 1.功能說明例如以下：

微信公眾平臺開發之留言板

tracking time 方法 ref font img 建議 south data- 微信公眾平臺開發之留言板是方便用戶互相之間交流的最好方法。關註微信公號的用戶之間是不能進行對話的。為了方便用戶之間的交流留言板起到了非常大的作用。當用戶進入留言板後能夠在上面留

微信公眾平臺開發，那些走過的坑

內置瀏覽器 點滴 播放 中一 ffmpeg 時間 想要 文件 設計 最近接手了一個微信公眾平臺的項目，歷時兩個月，基本完工，終於有時間可以總結一下這過程當中遇到的點點滴滴。 1、關於微信的內置瀏覽器 開始以為，微信內置瀏覽器是一個瀏覽器，對於安卓機和蘋果機都是一樣的，後來發

微信公眾平臺開發——為何不能在網頁調用微信jsapi？

什麽 ket 平臺 使用 scrip ken 進行 兩個 pro 說到這問題，相信大部分程序員老手都會輕蔑一笑，當然是跨域導致的啊！但是為了一些小白，我覺得還是很有必要再說一次的。 首先介紹什麽是跨域，由於瀏覽器的同源策略，出於防範跨站腳本的攻擊，禁止客戶端腳本（ 主要是J

微信公眾平臺開發教程（三） 基礎框架搭建

開發 images wxs user 設計實現 bytes trre 來源 app 上一章，我們已經初步講解了微信公眾賬號開發的基本原理，今天我們來探索設計實現。 首先我們設計了模塊層次圖，當然圖中只是給出一種實現方式，不局限於此。具體見下圖。 主要功能介紹如下： 1）請求

微信公眾平臺開發教程（一） 微信公眾賬號註冊流程

身份證 logs 政府 提交 註意 bsp 訪問服務器 定義 htm 具體的操作步驟 1、註冊公眾賬號 註冊地址：http://mp.weixin.qq.com/ 1）首先需要郵箱註冊： 2）郵箱激活。郵箱將會收到激活郵件，點擊激活鏈接即可。 3）需要登記個人信息。這裏需

微信公眾平臺開發教程（八）Session處理

class 如果 obj returns name ref car opera 信用 在微信窗口，輸入的信息有限，我們需要將一些信息分多次請求。 比如：在進行用戶綁定時，我們需要輸入用戶的相關信息，比如：用戶名、密碼，或者姓名、電話號碼，服務端驗證通過，即可將系統用戶與微信

微信公眾平臺開發教程（十） 訂閱號與服務號的區別

接口文檔 lpad 手機 全部 oauth2.0 spa 上傳 ima lsp 為了消除大家對訂閱號與服務號的疑問，特總結如下： 功能點 介紹 訂閱號 服務號 註冊 註冊賬號 個人信息 個人信息和企業相關信息 展示 在

微信公眾平臺開發教程（二） 基本原理及消息接口

username 普通用戶 縮放 地理位置 cfb 位置 註意 獲得 基本 一、基本原理 在開始做之前，大家可能對這個很感興趣，但是又比較茫然。是不是很復雜？很難學啊？ 其實恰恰相反，很簡單。為了打消大家的顧慮，先簡單介紹了微信公眾平臺的基本原理。 微信服務器就相當於一個轉

微信公眾平臺開發教程（五）自定義菜單

打開鏈接 delete toolbar 推送 優化 pcl reader 接口查詢 robot 應大家強烈要求，將自定義菜單功能課程提前。 一、概述： 如果只有輸入框，可能太簡單，感覺像命令行。自定義菜單，給我們提供了很大的靈活性，更符合用戶的操作習慣。在一個小小的微信對話

Java微信公眾平臺開發之OAuth2.0網頁授權

col nts har 順序 pan getcount iba unionid syn 根據官方文檔點擊查看在微信公眾號請求用戶網頁授權之前，開發者需要先到公眾平臺官網中的“開發 - 接口權限 - 網頁服務 - 網頁帳號 - 網頁授權獲取用戶基本信息”的配置選項中，修改授權

java微信公眾平臺開發

http style 消息發送 req gets 信號 多說 接收消息 servle 微信公眾平臺的開發，總體說來也是簡單的，就是先大概看下微信公眾平臺接口文檔。 請先大概瀏覽一下API手冊，我們會發現，推送給微信服務器的數據有兩種：xml的形式，和json的形式. 那麽

PHP實現微信公眾平臺開發—基礎篇

微信公眾平臺開發—利用OAuth2.0獲取微信用戶基本信息

arch getjson code back acc unicom toc gets down 1、首先在某微信平臺下配置OAuth2.0授權回調頁面： 2、通過appid構造url獲取微信回傳code值（appid可在微信平臺下找到） 1）、微信不彈出授權頁面ur

微信公眾平臺開發問題小結

安全 空白 color 用戶登錄 公眾平臺開發 相同 空白頁 微信 request Q：用戶網頁授權成功，添加後臺會員表信息後，手動刪除會員信息，網頁版微信用戶登錄失敗(手機版OK)，顯示空白頁。打開分享鏈接提示“已停止訪問該網頁”？ A：網頁版微信用戶退出微信，重新登錄再