功能說明:在微信浏覽器分享出去的内容,需要自定義分享的内容,拿到分享的标題内容和圖檔,get到展示的要點
問題彙總:
-
下載下傳js-sdk,我用的php版本,找到php檔案夾即可。
重要:url要即時的擷取,是以在js用ajax請求php傳回的配置資訊的時候,要傳一個參數目前的url(也可以再傳一個加密參數,防止有人更改資訊,也可以用于php端驗證,保證安全性)
- 其他直接用js-sdk包php檔案夾裡的内容即可,要保證伺服器端access_token.php和jsapi_ticket.php檔案有可寫入的權限
- 把伺服器的IP加入微信的白名單中
- 設定微信公衆平台 => js接口安全域名
- js端 主要是拿到wx.config配置,和需要用到的JsApiList清單
//引入微信提供的公用js
<script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
$.ajax(){
wx.config ({ })
wx.ready(function(){ })
wx.error (function(){ })
}
同級放置不容易出錯,
wx.config({
debug: false, // 開啟調試模式,調用的所有api的傳回值會在用戶端alert出來,若要檢視傳入的參數,可以在pc端打開,參數資訊會通過log打出,僅在pc端時才會列印。上線之後一定改成false
appId: data.appId, // 必填,公衆号的唯一辨別
timestamp: data.timestamp, // 必填,生成簽名的時間戳
nonceStr: data.nonceStr, // 必填,生成簽名的随機串
signature: data.signature,// 必填,簽名,見附錄1
jsApiList: ['openLocation','getLocation','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填,需要使用的JS接口清單,所有JS接口清單見附錄2
});
wx.error(function(res){
console.log(res); //配置出錯(需要檢查是哪裡的問題)或者url沒有在安全域中(測試的話,這個錯誤可以忽略)
});
wx.ready(function(){
// config資訊驗證後會執行ready方法,所有接口調用都必須在config接口獲得結果之後,config是一個用戶端的異步操作,是以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確定正确執行。對于使用者觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。
});
// 分享事件必須放在這裡
wx.onMenuShareAppMessage({
title: '這是一個測試的标題',
desc: '這個是分享奧朋友圈的描述資訊',
link: 'http://www.baidu.com',
imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
trigger: function (res) {
// 不要嘗試在trigger中使用ajax異步請求修改本次分享的内容,因為用戶端分享操作是一個同步操作,這時候使用ajax的回包會還沒有傳回
// alert('使用者點選發送給朋友');
},
success: function (res) {
alert('分享成功');
},
cancel: function (res) {
alert('你沒有分享');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
//alert('已注冊擷取“發送給朋友”狀态事件');
// 微信分享到朋友圈
wx.onMenuShareTimeline({
title: shareTitle, // 分享标題
link: Url, // 分享連結
imgUrl: imgUrl, // 分享圖示
success: function () {
// 使用者确認分享後執行的回調函數
},
cancel: function () {
// 使用者取消分享後執行的回調函數
}
});
// 微信分享到QQ
wx.onMenuShareQQ({
title: shareTitle, // 分享标題
desc: descContent, // 分享描述
link: Url, // 分享連結
imgUrl: imgUrl, // 分享圖示
success: function () {
// 使用者确認分享後執行的回調函數
},
cancel: function () {
// 使用者取消分享後執行的回調函數
}
});
// 分享到騰訊微網誌
wx.onMenuShareWeibo({
title: shareTitle, // 分享标題
desc: descContent, // 分享描述
link: Url, // 分享連結
imgUrl: imgUrl, // 分享圖示
success: function () {
// 使用者确認分享後執行的回調函數
},
cancel: function () {
// 使用者取消分享後執行的回調函數
}
});
// 分享到QQ空間
wx.onMenuShareQZone({
title: shareTitle, // 分享标題
desc: descContent, // 分享描述
link: Url, // 分享連結
imgUrl: imgUrl, // 分享圖示
success: function () {
// 使用者确認分享後執行的回調函數
},
cancel: function () {
// 使用者取消分享後執行的回調函數
}
});
6. php端的代碼
public function getConfig(){
require_once dirname(__FILE__).'/weixin/jssdk.php';
$arr = Yii::$app->request->get();
$arr = json_decode($arr,true);
if($arr['url'] && md5($arr['url']) == $arr['token']){
$jssdk = new JSSDK("appId", "appKey");
$signPackage = $jssdk->GetSignPackage($arr['url']);//動态擷取的url
return $signPackage;
}
return false;