微信公眾號分享朋友圈，朋友詳情，適合新手
阿新 • • 發佈：2019-01-29
大家好，因為我也是新手，所以寫的不好，請見諒；
廢話不多說分享介面的步驟官方文件已經寫的很清楚了
步驟一：繫結域名 先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”，這個域名很關鍵一定要寫好，很多坑都是在這裡
步驟二：引入JS檔案
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js "></script>
所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫（同一個url僅需呼叫一次，對於變化url的SPA的web app步驟三：通過config介面注入許可權驗證配置
可在每次url變化時進行呼叫,目前Android微信客戶端不支援pushState的H5新特性，所以使用pushState來實現web app
的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
//這一步需要要後端處理好資料，然後傳到後端，簽名一定要按規則，不然會出錯，很多錯誤都是簽名的錯
wx.config({ debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。 appId: '', // 必填，公眾號的唯一標識 timestamp: , // 必填，生成簽名的時間戳 nonceStr: '', // 必填，生成簽名的隨機串 signature: '',// 必填，簽名 jsApiList: [] // 必填，需要使用的JS介面列表 });
貼下官方的簽名演算法
簽名演算法
簽名生成規則如下：參與簽名的欄位包括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×tamp=1414587457&url=http://mp.weixin.qq.com?params=value步驟2. 對string1進行sha1簽名，得到signature：
0f9de62fce790f9a083d5c99e95740ceb90c27ed貼下我自己的程式碼，
//（注意這裡的分享的link的域名要和你js域名的域名要一至的）<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js "></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var timestamp = $("#timestamp").val();//時間戳
var nonceStr = $("#noncestr").val();//隨機串
var signature = $("#signature").val();//簽名
console.log(timestamp,nonceStr,signature);
console.log(location.href.split('#')[0]);
wx.config({
debug : true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，
appId : 'wxd61ce8a6baca54b3', // 必填，公眾號的唯一標識
timestamp : timestamp, // 必填，生成簽名的時間戳
nonceStr : nonceStr, // 必填，生成簽名的隨機串
signature : signature,// 必填，簽名，見附錄1
jsApiList : [ 'scanQRCode','onMenuShareAppMessage','onMenuShareTimeline' ]
// 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
wx.ready(function(){
// wx.hideOptionMenu();
wx.onMenuShareTimeline({
title: '這是一個測試的標題--朋友圈分享',
link: 'http://www.minshu.xin/My/index.php/Home/Index/index', //（注意這裡的link的域名要和你js域名的域名要一至的）
imgUrl: 'http://avatar.csdn.net/E/B/6/1_frankcheng5143.jpg',
success: function () {
// 使用者確認分享後執行的回撥函式
alert('分享到朋友圈成功');
},
cancel: function () {
// 使用者取消分享後執行的回撥函式
alert('你沒有分享到朋友圈');
}
});
wx.onMenuShareAppMessage({
title: '這是一個測試的標題--百度',
desc: '這個是要分享內容的一些描述--百度一下，你就知道',
link: 'http://www.minshu.xin/My/index.php/Home/Index/index',
imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
trigger: function (res) {
// 不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
},
success: function (res) {
alert('分享給朋友成功');
},
cancel: function (res) {
alert('你沒有分享給朋友');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
});
});
</script>貼出官方程式碼
獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面
wx.onMenuShareTimeline({
title: '', // 分享標題
link: '', // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖示
success: function () {
// 使用者確認分享後執行的回撥函式
},
cancel: function () {
// 使用者取消分享後執行的回撥函式
}
});
獲取“分享給朋友”按鈕點選狀態及自定義分享內容介面
wx.onMenuShareAppMessage({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖示
type: '', // 分享型別,music、video或link，不填預設為link
dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空
success: function () {
// 使用者確認分享後執行的回撥函式
},
cancel: function () {
// 使用者取消分享後執行的回撥函式
}
});重要的步驟，就是後端處理了
我直接丟出後端程式碼：
function share(){
//獲取access_token
$appid="wxd61ce8a6baca***"; //公眾號id
$secret="97079d860477014476f8078c7***3";
$url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$secret";
//獲取access_token的介面，去換取jsapi_ticek,生成簽名的時候要用到
$access_token=$this->http_request($url);
$data=json_decode($access_token,true);
$access_token=$data["access_token"];
//獲取jsapi_ticket ，需要用到access_token,是生成簽名的一部分
$url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access_token&type=jsapi";
$jsapi=$this->http_request($url); //自定義curl函式，用來請求jsapi_tickrt
$data=json_decode($jsapi,true); ///解json格式
$jsapi_ticket=$data["ticket"]; $data1['jsapi_ticket']=$jsapi_ticket; //引數一定要按順序排好
$noncestr=$this->nonce_str();
$data1['noncestr']=$noncestr;
$time=time();
$data1['timestamp']=$time;
$data1['url']='http://www.minshu.xin/My/index.php/Home/Index/share'; //注意這裡要寫用分享的url
$data1=$this->sign($data1);//拼接簽名，最後要用sha1加密
$this->assign("signature",sha1($data1)); //傳送前端
$this->assign("noncestr",$noncestr);
$this->assign("timestamp",$time);
$this->display();
}//拼接簽名函式public function sign($data){
$stringA = '';
foreach ($data as $key=>$value){
if(!$value) continue;
if($stringA) $stringA .= '&'.$key."=".$value;
else $stringA = $key."=".$value;
}
$stringSignTemp = $stringA;//申請支付後有給予一個商戶賬號和密碼，登陸後自己設定key
return $stringSignTemp;
}//生成隨機字串函式
public function nonce_str(){
$result = '';
$str = 'QWERTYUIOPASDFGHJKLZXVBNMqwertyuioplkjhgfdsamnbvcxz';
for ($i=0;$i<32;$i++){
$result .= $str[rand(0,48)];
}
return $result;
}
//curl自定義函式 function http_request($url,$data = null,$headers=array())
{
$curl = curl_init();
if( count($headers) >= 1 ){
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
}
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
if (!empty($data)){
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
}
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($curl);
curl_close($curl);
return $output;
}
最後就是附上完成截圖：
如果遇到有什麼問題，請留言，希望能幫到大家