我想先放個(gè)圖百新，因?yàn)檫@句話讓我陷入了深深的沉思……
我只想說(shuō)剛剛開始讀還讀的通饭望，再讀幾遍就有點(diǎn)迷茫了。厌漂。
一斟珊、功能項(xiàng)目環(huán)境
- 直播h5頁(yè)面的分享功能
- 多個(gè)直播
- 一個(gè)公眾號(hào)
二囤踩、實(shí)現(xiàn)步驟
基本步驟在官方文檔中，還算是人能讀通的综慎，我就直接復(fù)制過(guò)來(lái)了
步驟一：綁定域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”怔锌。
備注：登錄后可在“開發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限变过。
步驟二：引入JS文件
在需要調(diào)用JS接口的頁(yè)面引入如下JS文件媚狰，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問(wèn)時(shí)类嗤，可改訪問(wèn)：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）辨宠。
備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
步驟三：通過(guò)config接口注入權(quán)限驗(yàn)證配置
所有需要使用JS-SDK的頁(yè)面必須先注入配置信息嗤形，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性笔咽，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗霹期，此問(wèn)題會(huì)在Android6.2中修復(fù)）历造。
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)船庇，若要查看傳入的參數(shù)溢十，可以在pc端打開张弛，參數(shù)信息會(huì)通過(guò)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)前頁(yè)面對(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)前頁(yè)面對(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.'×tamp='.$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);
}
四呕童、問(wèn)題及總結(jié)
經(jīng)過(guò)上述步驟可以知道夺饲，首先需要接收前端傳來(lái)的
url，這個(gè)url最好在前端進(jìn)行encodeURIComponent(url)擂找，然后在后端再進(jìn)行解碼urldecode($url)浩销。接著根據(jù)appid和appsecret獲取access_token，再用access_token來(lái)獲取ticket,接著用ticket和其他一些參數(shù)生成簽名signature塘雳，最后將這些參數(shù)一并傳回給前端普筹。
那么問(wèn)題來(lái)了斑芜，我們?cè)倏次恼聞傞_始我放的那個(gè)圖，如果是同一個(gè)公眾號(hào)，也就是只有一個(gè)appid和密鑰的話醇王，這里生成的一些參數(shù)還可以配置成功嗎崭添？
那個(gè)圖中文檔上說(shuō)如果url變化的話需要在每次變化的時(shí)候調(diào)用。什么叫每次變化的時(shí)候調(diào)用棘伴，我不同直播h5頁(yè)面路徑本來(lái)就是不同啊屁置。網(wǎng)上說(shuō)的是在前端vue的路由中進(jìn)行配置注入蓝角。
vue我不太懂，如果是不同項(xiàng)目下的呢揪阶？那我就用個(gè)蠢蠢的方法鲁僚，直接在前端調(diào)用接口，這個(gè)接口劝评，我在后端復(fù)制完全一樣的來(lái)倦淀，命名為2，3姻成，4....愿棋，這樣是不是也可以說(shuō)在url變化的時(shí)候調(diào)用糠雨？我調(diào)用不同接口。琅攘。松邪。靠剧辐，一開始我也不知道能不能行荧关，神奇的是居然還真可以褂傀。。
我之前還試了一下不同access_token調(diào)用ticket檀轨，由于這兩個(gè)參數(shù)都有有效期，結(jié)果獲取到的ticket居然一樣卫枝，然后配置失敗讹挎。
接著我重新獲取一個(gè)ticket筒溃，配置還是失敗怜奖。
所以我就直接復(fù)制不同的接口，前端不同項(xiàng)目調(diào)用不同接口就行了迁央。
