需求都是大同小異的手蝎，要做微信分享厂捞，當(dāng)然了授舟，微信內(nèi)部瀏覽器右上角 ‘...’ 點擊就可以分享穗椅，但是往往分享的信息是不盡人意的岩睁，因為自動獲取title凛俱，不能顯示description获雕，還很有可能拿不到圖片世分，這樣的信息分享給我的話聋丝，我就默認(rèn)是小廣告了（手動攤手~~~）索烹。所以自定義分享勢在必行。
1.配置微信JS接口安全域名（參考微信官方文檔 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 JSSDK使用步驟）
微信公眾號配置JS接口安全域名弱睦，并且把ip地址加入白名單百姓。我在測試環(huán)境中，如果不添加白名單况木，獲取的appid直接報錯為非法appid垒拢，導(dǎo)致接下來的步驟根本沒法進行。
2.依次獲取 access_token火惊，jsapi_ticket求类，signature。
獲取這些神奇的東西的步驟實際上是這樣的：
appid & appsecret ====> access_token ====> jsapi_ticket ====> signature
①首先用appid和appsecret獲取access_token屹耐，這里的appid和appsecret是公眾號里可以拿到的尸疆。
②根據(jù)獲取的access_token，請求路徑 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 獲取 jsapi_ticket 。返回值為一段JSON寿弱，參考官方文檔 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 附錄1-JS-SDK使用權(quán)限簽名算法
③進行簽名算法犯眠，signature=sha1(string1)。
簽名 signature = sha1(string1)症革。這里的 string1 是由4部分組成筐咧，分別是
- jsapi_ticket：獲取到的
- timestamp：隨機時間戳
- noncestr：隨機字符串
- url：要分享頁面的路徑，這里需要強調(diào)一下噪矛，這個url的域名量蕊，需要跟公眾號JS接口安全域名一致。
string1 = jsapi_ticket=jsapi_ticket的值&noncestr=noncestr的值×tamp=timestamp的值&url=url的值艇挨。
后臺算法 sha1() 加密字符串 string1 生成簽名 signature 危融。
①②③這些步驟是后臺完成，前端只需要接收后臺傳過來的值即可雷袋。
需要注意的是吉殃，我的業(yè)務(wù)需求是前端獲取本頁面路徑，向后臺發(fā)送頁面路徑楷怒，也就是組成簽名算法中的 url 的值蛋勺，所以看各自需求，寫法不固定鸠删，但是這個值是必需的抱完。由于后臺要求，不可以全局緩存 access_token 刃泡，所以這個功能并沒有做巧娱，也就是說一天請求的 access_token 的次數(shù)上限就是2000。（還真是對自己的產(chǎn)品沒信心哦~~~）烘贴。至于路徑的轉(zhuǎn)義字符禁添，路徑加多個參數(shù)，參數(shù)與參數(shù)之間需要用 '&' 來連接桨踪，但是在我的項目中老翘，直接傳遞 '&' ,到后臺的時候會直接轉(zhuǎn)義為 '&' 導(dǎo)致 url 與當(dāng)前路徑不一致，進而導(dǎo)致 signature 簽名錯誤锻离，所以我直接在前端轉(zhuǎn)義成 '&'铺峭， 其他的任務(wù)交給后臺處理，當(dāng)然這只是一個現(xiàn)象汽纠，這個還是要根據(jù)后臺的情況而定的卫键，我的后臺是 php，不同的后臺會遇到的問題也許不大相同虱朵，慢慢來嘍~~
<!--------微信自定義分享-------->
//先調(diào)用微信js
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
//微信分享
//只能調(diào)用微信內(nèi)部瀏覽器右上角'...' 喚起微信分享莉炉，無法做到自定義按鈕調(diào)用分享接口
var urlstr = window.location.href;
var urlPath = urlstr.replace(/&/g,'%26');
$.ajax({
url: k_host + "/WxGetSignature", //k_host 為本地路徑啤呼，忽略就好，這個實際上就是把需要分享頁面的 url 傳給后臺
data:{
url: urlPath,
},
async: true,
type: 'POST',
cache: false,
dataType: 'json',
success:function(data){
var res = data.data;
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來呢袱，若要查看傳入的參數(shù)官扣，可以在pc端打開，參數(shù)信息會通過log打出羞福，僅在pc端時才會打印惕蹄。
appId: res.appid,
timestamp: res.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.noncestr, // 必填治专，生成簽名的隨機串
signature: res.signature,// 必填卖陵，簽名
jsApiList: [ // 必填，需要使用的JS接口列表
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
wx.ready(function () {
wx.onMenuShareAppMessage({
title: '測試用 title',
desc: '測試用 description',
imgUrl: '分享圖標(biāo)的路徑', // 分享圖標(biāo)
type: '', // 分享類型,music张峰、video或link泪蔫，不填默認(rèn)為link
dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接喘批，默認(rèn)為空
link: urlstr, // 分享鏈接撩荣，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
success : function () {
//分享成功需要執(zhí)行的函數(shù)
},
cancel: function (err) {
// console.log(err);
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
wx.onMenuShareTimeline({
title: '測試用 title',
desc: '測試用 description',
imgUrl: '分享圖標(biāo)的路徑', // 分享圖標(biāo)
type: '', // 分享類型,music、video或link饶深，不填默認(rèn)為link
dataUrl: '', // 如果type是music或video餐曹，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
link: urlstr, // 分享鏈接敌厘，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
success : function () {
//分享成功需要執(zhí)行的函數(shù)
},
cancel: function (err) {
console.log(err);
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
});
wx.error(function(res){
});
},
error:function(request){
alert("連接失敗台猴，請檢查網(wǎng)絡(luò)，稍后再試");
}
});
<!--------微信自定義分享-------->
以上是前端代碼俱两，遇到的問題基本就是 JS 接口安全域名饱狂，添加 IP 到白名單，簽名算法宪彩，其他很順利休讳。本來打算一開始去做成點擊自定義按鈕調(diào)起微信分享，結(jié)果去官方社區(qū)查了以后發(fā)現(xiàn)毯焕，是不可行的衍腥，沒有方法和接口提供給開發(fā)者， 雖然微信自己的 demo 中有這種點擊按鈕纳猫，調(diào)用分享，可是在真機測試中竹捉，并沒有什么毛用芜辕，打debugger發(fā)現(xiàn)代碼根本沒進分享，后來就放棄块差，如果哪位大神有辦法的話侵续，請指點一二倔丈。
所有的調(diào)試都是在微信開發(fā)工具中完成的，不然微信的 debugger 模式是無法開啟的（吐槽一下開發(fā)者工具状蜗，不是那么好用哦~~~）需五。
希望能幫到在微信分享坑中無法自拔的小伙伴們（哭笑不得.gif）~~~
