自定義微信分享標(biāo)題及描述的基本流程：
- 首先引入微信jssdk <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>；
- 發(fā)送ajax請(qǐng)求將瀏覽器分享的地址（window.location.href.split("#")[0]）發(fā)送到后臺(tái)獲取公眾號(hào)時(shí)間戳以及簽名等信息并使用微信ready函數(shù)自定義分享標(biāo)題描述以及l(fā)ogo炫刷；
代碼基本上是這樣：
$(function(){
var appId, nonceStr, timestamp, signature;
var _url = encodeURIComponent(location.href.split('#')[0]);
$.ajax({
url: 'http://api.kuailuapp.com/?s=app/Usersauth/jssdk&url=' +_url, // 這里的url地址一般是后端提供的接口地址
dataType: 'json',
type: 'GET',
async: true,
success: function (data) {
if (datas.status == '1') {
appId = datas.data.appId;
nonceStr = datas.data.nonceStr;
timestamp = datas.data.timestamp;
signature = encodeURIComponent(datas.data.signature);
wxShare();
}
},
error: function () {}
});
function wxShare(){
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法橘原，所有接口調(diào)用都必須在config接口獲得結(jié)果之后籍铁，config是一個(gè)客戶端的異步操作趾断，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口拒名，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口芋酌，則可以直接調(diào)用增显，不需要放在ready函數(shù)中。
wx.config({
debug: false, // 開啟調(diào)試模式為true后可以通過alert彈窗將公眾號(hào)簽名等結(jié)果反饋出來
appId: appId, // 必填隔嫡，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: timestamp, // 必填甸怕，生成簽名的時(shí)間戳
nonceStr: nonceStr, // 必填，生成簽名的隨機(jī)串
signature: signature,// 必填腮恩，簽名梢杭，見附錄1
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage",//分享給好友
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone"
]
});
wx.ready(function () {
//分享好友
var shareData = {
title: '分享標(biāo)題',
desc: '分享描述',
dataUrl: '',
type: 'link',
imgUrl: '縮略圖線上地址',
link: location.href.split("#")[0]
};
wx.onMenuShareTimeline(shareData);
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareQQ(shareData);
wx.onMenuShareWeibo(shareData);
wx.onMenuShareQZone(shareData);
});
}
});
注意：
- 傳過去的url地址跟wx.ready函數(shù)中shareData里面要分享的link鏈接要保持一致，否則會(huì)導(dǎo)致簽名非法等問題秸滴；
- 后臺(tái)返回的signature需要進(jìn)行encode編碼武契；
- imgUrl的屬性值不能是絕對(duì)路徑，需要是一個(gè)完整的url地址荡含，否則會(huì)找不到圖片咒唆；
一般情況下，通過上述步驟就能實(shí)現(xiàn)一次分享释液。由于微信在分享出去之后會(huì)給鏈接自動(dòng)加上from以及isappistalled這兩個(gè)參數(shù)全释，證明該鏈接是通過分享過來的，由于這兩個(gè)參數(shù)的影響误债，便會(huì)導(dǎo)致二次分享進(jìn)行時(shí)簽名失效浸船，無法調(diào)用一次分享時(shí)的自定義信息，只能通過微信自帶的分享功能分享出去寝蹈，變成一段空蕩蕩的鏈接和白色縮略圖李命。
ps：
網(wǎng)上看了很多人說url用encodeURIcomponent進(jìn)行轉(zhuǎn)碼就不會(huì)出現(xiàn)這個(gè)問題，但是就像我上面代碼寫的一樣箫老，url是用encodeURIcomponent進(jìn)行轉(zhuǎn)碼過的封字，親測(cè)，二次分享還是會(huì)有問題耍鬓。
由于是因?yàn)槲⑿旁诨卣{(diào)url上自動(dòng)添加了參數(shù)導(dǎo)致的簽名失效阔籽，所以最終的解決辦法是在分享出去的頁面判斷是否有參數(shù)，有則去掉參數(shù)回到五參數(shù)的url：
if(window.location.href.indexOf('from') != -1 || window.location.href.indexOf('isappinstalled') != -1){
// 二次分享url重定向 - 需要截取一次分享后微信自動(dòng)拼接的url參數(shù)&from=singlemessage&isappinstalled=0
window.location.href = window.location.href.split('&')[0]; // 這里的split中的字符串會(huì)變換（?或&）牲蜀，主要看自己的url
}
注意：
- 這里的split中的字符串會(huì)有變換仿耽，主要看自己的url規(guī)則，經(jīng)測(cè)試如果url中已有
?號(hào)各薇，則微信會(huì)通過&來拼接from和isappinstalled參數(shù)项贺，如果url中沒有?號(hào)，微信則通過?號(hào)來拼接from和isappinstalled參數(shù)峭判；
如：短鏈接 -http://abc.com/product_list?from=singlemessage
或：長(zhǎng)鏈接 -http://abc.comindex.php?route=product/product_list&from=singlemessage&isappinstalled=0
網(wǎng)上也有看到有人是這么操作的开缎，說是沒問題。經(jīng)測(cè)試：這種方式使用長(zhǎng)鏈接的方式?jīng)]有問題林螃，使用短鏈接的（短鏈接是后臺(tái)再數(shù)據(jù)庫中進(jìn)行配置的奕删，將長(zhǎng)鏈接換成短鏈接），在微信分享出去后的頁面疗认，會(huì)一直再刷新頁面完残，即不停的執(zhí)行window.location.href = window.location.href.split('&')[0];伏钠。好像是安卓會(huì)ios不會(huì)，不知道是不是兼容性問題谨设，這一點(diǎn)還沒有機(jī)會(huì)進(jìn)行測(cè)試驗(yàn)證熟掂。如果有人遇到還希望可以留言說明。
綜上扎拣，在項(xiàng)目中解決了微信二次分享的問題赴肚。不確定的是這種分式是否有什么潛在的風(fēng)險(xiǎn)，或者有更好的方式二蓝。在網(wǎng)上看到很多比較麻煩的方法誉券，但是感覺也是這個(gè)道理，所以先記錄下來刊愚。
參考：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
https://www.cnblogs.com/lpggo/p/7818491.html
https://www.cnblogs.com/jeanneze/p/6812849.html?utm_source=itdadao&utm_medium=referral
https://www.zhihu.com/question/28462817
