微信h5頁面分享之多個(gè)頁面一個(gè)公眾號(hào)

我想先放個(gè)圖，因?yàn)檫@句話讓我陷入了深深的沉思……


image.png

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

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

  • 直播h5頁面的分享功能
  • 多個(gè)直播
  • 一個(gè)公眾號(hào)

二、實(shí)現(xiàn)步驟

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

步驟一：綁定域名

先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限。

步驟二：引入JS文件

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

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

備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載

步驟三：通過config接口注入權(quán)限驗(yàn)證配置

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

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
  appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: , // 必填，生成簽名的時(shí)間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  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, // 分享標(biāo)題
        desc: tent.sharetitle2, // 分享描述
        link: url, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
        imgUrl: tent.sharesrc, // 分享圖標(biāo)
        success: function () {
            // 設(shè)置成功
            console.log('成功')
            resolve();
        },
        fail:function(e){
                const msg = e.errMsg || "未知錯(cuò)誤";
                cAlert(msg);
            reject(new Error(msg));
        }
    })
    wx.updateAppMessageShareData({ 
      title: tent.sharetitle, // 分享標(biāo)題
      desc: tent.sharetitle2, // 分享描述
      link: url, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
      imgUrl: tent.sharesrc, // 分享圖標(biāo)
      success: function () {
            // 設(shè)置成功  
            resolve();
      },
      fail:function(e){
        const msg = e.errMsg || "未知錯(cuò)誤";
        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;
        // 轉(zhuǎn)換成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 ,  '請(qǐng)求成功！');
        OutTools::outJsonP($res);
    }

四、問題及總結(jié)

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

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


image.png

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


image.png
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容