我想先放個圖，因為這句話讓我陷入了深深的沉思……

image.png

我只想說剛剛開始讀還讀的通，再讀幾遍就有點迷茫了。。

一、功能項目環(huán)境

• 直播h5頁面的分享功能
• 多個直播
• 一個公眾號

二、實現(xiàn)步驟

基本步驟在官方文檔中，還算是人能讀通的，我就直接復制過來了

步驟一：綁定域名

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發(fā)者中心”查看對應的接口權限。

步驟二：引入JS文件

在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需進一步提升服務穩(wěn)定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

備注：支持使用 AMD/CMD 標準模塊加載方法加載

步驟三：通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現(xiàn)web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

三、代碼

前端

let url = location.href.split('#')[0];
let link = encodeURIComponent(url);
$.ajax({
    type: "GET",
    url: 'https://h5-saic.matrixpr.net/know/token/get-sign-str1',
    dataType: "jsonp",
    jsonp: 'callback',
    data: {
        url: link,
        type: '02'
    },
    success: function(res) {
        wx.config({
            debug: false,
            appId: res.data.appId,
            timestamp: res.data.timestamp,
            nonceStr: res.data.noncestr,
            signature: res.data.signature,
            jsApiList:['updateTimelineShareData','updateAppMessageShareData']
    });
wx.ready(() => {
    //wx.hideOptionMenu();
    wx.updateTimelineShareData({
        title: tent.sharetitle, // 分享標題
        desc: tent.sharetitle2, // 分享描述
        link: url, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: tent.sharesrc, // 分享圖標
        success: function () {
            // 設置成功
            console.log('成功')
            resolve();
        },
        fail:function(e){
                const msg = e.errMsg || "未知錯誤";
                cAlert(msg);
            reject(new Error(msg));
        }
    })
    wx.updateAppMessageShareData({ 
      title: tent.sharetitle, // 分享標題
      desc: tent.sharetitle2, // 分享描述
      link: url, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
      imgUrl: tent.sharesrc, // 分享圖標
      success: function () {
            // 設置成功  
            resolve();
      },
      fail:function(e){
        const msg = e.errMsg || "未知錯誤";
        cAlert(msg);
        reject(new Error(msg));
     }
  })
})
},
error: function(xhr, status, error) {
    console.log("獲取微信參數(shù)失敗==" + error);
}
});

PHP

public function actionGetSignStr(){
        header("Access-Control-Allow-Origin: *");
        $url  = (\Yii::$app->request->get('url'));
        $type  = (\Yii::$app->request->get('type'));
        if (empty($url)) {
            OutTools::outJsonP(OutTools::error(Constants::PARAM_LOSE, '缺少必要參數(shù)！'));
        }
        $url = urldecode($url);
        $redis = Yii::$app->redis;
        $key = 'matrix_main_kyle'.$type;
        if ( $redis->get($key) ) {
            $ticket = $redis->get($key);
        } else {
            $access_token = $this->getTokenCuigsnqaphep11( 'matrix_main',$type );
            //var_dump($access_token);die;
            //$curlUrl = 'https://qyapi.weixin.qq.com/cgi-bin/ticket/get?access_token='.$access_token.'&type=agent_config';
            //$curlUrl = 'https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token='.$access_token;
            $curlUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$access_token.'&type=jsapi';
            $res = HttpTools::http_get($curlUrl);
            $r = json_decode($res,true);

            if($r['errcode'] == 0){
                $ticket = $r['ticket'];
                $expires_in = $r['expires_in'];
                $redis->set($key, $ticket);
                $redis->expire($key, $expires_in);
            }else{
                OutTools::outJsonP(OutTools::error(Constants::PARAM_LOSE, '獲取失??！'));
            }
        }
        $noncestr = $this->generateNonce();
        $timestamp = time();
        //$url = 'https://h5-saic.matrixpr.net/sgm_zhihu_store/html9999';
        //$url = 'http://192.168.89.110:8080/';
        $jsapi_ticket='jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url='.$url;
        // 轉換成key=val&串
//        $params = [
//            'ticket' => $ticket,
//            'noncestr' => $noncestr,
//            'timestamp' => $timestamp,
//            'url' => $url,
//        ];
        //$jsapi_ticket = self::createLinkString ( $params, true, false );
        $signature = sha1($jsapi_ticket);

        $str = [
            'ticket' => $ticket,
            'noncestr' => $noncestr,
            'timestamp' => $timestamp,
            'signature' => $signature,
            'jsapi_ticket' => $jsapi_ticket,
            'url' => $url,
            'appId' => 'wxcca46bafxxxxxx'
        ];
        $res = OutTools::success( $str ,  '請求成功！');
        OutTools::outJsonP($res);
    }

四、問題及總結

經(jīng)過上述步驟可以知道，首先需要接收前端傳來的url，這個url最好在前端進行encodeURIComponent(url)，然后在后端再進行解碼urldecode($url)。接著根據(jù)appid和appsecret獲取access_token，再用access_token來獲取ticket,接著用ticket和其他一些參數(shù)生成簽名signature，最后將這些參數(shù)一并傳回給前端。

那么問題來了，我們再看文章剛開始我放的那個圖，如果是同一個公眾號，也就是只有一個appid和密鑰的話，這里生成的一些參數(shù)還可以配置成功嗎？
那個圖中文檔上說如果url變化的話需要在每次變化的時候調(diào)用。什么叫每次變化的時候調(diào)用，我不同直播h5頁面路徑本來就是不同啊。網(wǎng)上說的是在前端vue的路由中進行配置注入。

image.png

vue我不太懂，如果是不同項目下的呢？那我就用個蠢蠢的方法，直接在前端調(diào)用接口，這個接口，我在后端復制完全一樣的來，命名為2，3，4....，這樣是不是也可以說在url變化的時候調(diào)用？我調(diào)用不同接口。。?？?，一開始我也不知道能不能行，神奇的是居然還真可以。。
我之前還試了一下不同access_token調(diào)用ticket，由于這兩個參數(shù)都有有效期，結果獲取到的ticket居然一樣，然后配置失敗。
接著我重新獲取一個ticket，配置還是失敗。
所以我就直接復制不同的接口，前端不同項目調(diào)用不同接口就行了。

image.png

image.png