2. 程式人生 > >h5 微信分享朋友和朋友圈

h5 微信分享朋友和朋友圈

阿新 • • 發佈：2017-09-21
lose reat 加載 -1 微信 host ces menus html

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

一、微信JS-SDK

1. 獲得Access Token

access token的獲得方法在前面有介紹，詳情見 微信公眾平臺開發(26) 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));
          }
        });
技術分享

三、實現效果

彈出請求獲取頁面

技術分享

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

技術分享 技術分享

h5 微信分享朋友和朋友圈

相關推薦

Android 實現微信分享好友和朋友圈

1.在微信開放平臺 建立移動應用，並通過稽核，這裡要注意的是應用簽名要一致，（下載官網上的APK,輸入包名就可以生成了） 2.具體用法可以看官網的文件，這裡只總結使用過程遇到的問題和解決方法 3. 參照這個用法分享是可以的，但是如果你的圖片大於32kb就不

h5 微信分享朋友和朋友圈

lose reat 加載 -1 微信 host ces menus html 生成JS-SDK權限驗證簽名 實現發送給朋友和分享到朋友圈時內容參數自定義 一、微信JS-SDK 1. 獲得Access Token access token的獲得方法在前面有介紹，詳情見

微信分享內容給朋友、朋友圈、QQ、QQ空間等

示例網頁 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta

H5微信分享介面開發JS-SDK PHP［附原始碼］

背景        H5開發中幾乎所有專案都要用到自定義分享，見過的分享介面有php引入和ajax呼叫兩種，使用不方便且對程式碼環境有要求。故共享一版可通過javascript檔案引入方式來實現自定義分享的介面（這是15年底做的介面，一直在使用，如果有更簡單便捷的方法歡迎交流

用 WeixinJSBridge.invoke函式實現微信分享標題和文案

一. 分享html <html> <head> <meta charset='utf-8'> <script type='text/javascript' src='1.js'></script> </he

Android微信登陸和微信分享，和登陸分享的回撥處理

首先是微信登陸。 直接上程式碼 在點選登陸時候   public class LandActivity extends Activity { private Button land; private LinearLayout skip; priv

微信分享圖片和標題不展示

步驟一：繫結域名 先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。 備註：登入後可在“開發者中

微信分享—ios和安卓機制居然不一樣！

 實際專案中，在做微信分享追蹤的時候，遇到了一個百思不得其解的問題。 在加入了使用者分享追蹤功能之後，頁面已經載入完成的情況下，安卓分享功能沒有任何問題，ios卻總是分享失敗。 關於ios和安卓裝置的差別 專案需求是，我們需要對使用者的分享行為做追蹤，對使用者從哪個人分享的連結進來的做記錄。所以每個

Vux+Cordova打包的安卓App實現微信分享朋友和朋友圈

知識儲備 Cordova Plugin ShareSDK 外掛 什麼是Cordova Plugin ShareSDK Cordova Plugin ShareSDK封裝了ShareSDK的android和ios平臺的分享功能。在hybird app開發中可以方便的完成分享功能。如:ion

微信分享朋友圈分享程式碼自定義標題、說明、圖示和分享連結

最近在做手機網站在分享到微信時，通過微信內建瀏覽器訪問頁面分享後，希望可以自定義小圖示（imgUrl）和分享連結（lineLink），下面下微信內建瀏覽器分享功能的JS程式碼，希望對大家有所幫助。 JS程式碼如下：        var imgUrl = "http://www.gdibn.com/m/im

微信“分享到朋友圈”介面— wx.onMenuShareTimeline() 和 onMenuShareAppMessage — 分享給朋友介面

微信“分享到朋友圈”介面—— wx.onMenuShareTimeline()  注意事項： 1. 圖片大小要大於300pix才能顯示； 2. 這個方法必須先config成功，然後再wx.ready裡才能呼叫。直接放到$(function(){})裡執行，實踐證明是不行的。

微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

wx.config({ debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。 appId: '@Model.appId', // 必填，公眾號的唯一

關於微信分享朋友圈、分享給朋友、隱藏“傳播類”和“保護類”按鈕

1、引入微信官方的js檔案，將該js檔案放到最前面引入：<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 2、初始化微信所需引數： 2.1 注意：wx.con

Android之微信開放平臺實現分享（分享好友和朋友圈）

開發中分享操作往往經常遇到，而且還是一些比較大型一定的平臺，如微信，QQ，微博等。寫這篇部落格主要是把微信的的分享和相關操作表達一下，分享可以包含：文字，視訊，音樂，圖片等分享。分享可以有 分享給好友，群，朋友圈等。效果如下圖：（注意：功能根據自己的需要選擇就可以了）    

TP5 微信分享朋友圈介面顯示自定義圖片和標題

在tp5框架下對接微信分享朋友圈介面，並顯示圖片和標題。準備步驟：1，先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。2，獲取公眾號對應的 appid 和 appsecret。3.公眾號取得認證。不羅嗦，直接上程式碼：1，js 程式碼，在需要分享

H5+微信朋友、朋友圈分享

component tor tools ogr content isp sys pro putextra import {showToast} from ‘./index‘; //上面函數只是簡單的封裝了uni.showToast方法，只是顯示toast作用而已，大家

微信公眾平臺網頁開發實戰--1.微信分享一個網頁到朋友圈

微信開發 html5 jssdk 實戰 網頁開發 對微信的JSSDK進行封裝一下，創建一份類似的文件結構，增加index.html與shareApi.js文件，結構如圖3.3所示。 圖3.3 3.2節文件結構另外，提醒讀者一下，wxJSSDK.js文件的JSSDK環境配置中，需要

php實現微信分享朋友圈

public private abcd ushare name preview set PE char class JSSDK { private $appId; private $appSecret; public function __construct($a

iOS 微信分享到朋友圈

最近要加微信朋友圈分享的功能，上官網下檔案，照著文件搭環境，但是總有錯誤，於是百度部落格來看，發現和官方文件一樣，解決不了自己的問題，現在問題解決了，分享出來希望對大家有幫助。 1.首先要向微信註冊你的應用程式IDhttps://open.weixin.qq.com/cgi-bin/frame?

簡單粗暴教你在VUE中引入微信SDK 呼叫微信分享、朋友圈分享、QQ分享......

寫在前面： 剛做了一個微信端的網頁，用到了微信分享，在網上看了好多的資料，發現好多文件都寫得雲裡霧裡，讓人看的頭疼。通過對很多大佬文章的綜合整理，才完成了微信分享的部分。所以我想著自己寫一篇文章，能讓看到我這篇文章的親們能夠清楚的明白在vue上怎麼使用微信分享SDK，能夠按照