起源：最近公司在做招募廣告的html5頁面，然后做出來后，產品提出一個問題，需要分享出去的鏈接是卡片形式，內容也要自己定義，這下就難到我了，因為是第一次遇到這種需求，果斷百度，然而，我就像大家一樣，看都看不懂，一大堆什么微信jssdk官方文檔，看得我眼花繚亂，博客上面的也大多都是php形式的解釋，也不知道怎么導入進來，然而接着去了解這個卡片分享，發現官方的分享卡片，是眾多在微信生態中傳播的html5靜態頁面的一個重點。所以我解決了這個問題之后，就來寫這個博客，希望能幫助一些初步了解這個微信自定義分享鏈接的園友。
產品需要做的：
1.微信認證過的公眾號:必須是經過認證的，沒有認證的或者認證過期的都不可以；
2.經過備案的域名：必須是備案過的，不然是無法使用的；
3.綁定域名：首先你需要將需要分享的網址的域名綁定到微信公眾平台上面，具體操作：先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”；
注：博主這次開發中，就遇到了第三點問題，我代碼都寫好了，后台也做好了，但是就是分享出去不是卡片形式
遇到 config:invalid url domain
后來發現是產品忘記綁定域名，設置白名單了。。。(域名不要加http://)
好，后來這個問題解決了，但是還是分享不成功，又進行一次排查，因為要在手機端上線才能看到效果，就一直上線一直改，改到下午5點，后來發現是產品appid給錯了，我TM......
后台需要做的：
1.后台服務器：前台頁面需要后台服務器傳過來一些配置參數，比如appId、timestamp、nonceStr、signature這幾個參數都是后台從微信公眾平台獲取到的， 需要后台進行配合；
2.獲取access_token：利用公共號APPID、APPSECRET從微信服務器獲取對應的access_token，這里是后台開發小伙伴的范圍不多做解釋；
后台需要傳的參數格式：
前端你需要做的：
1.引入js文件 ：在分享的頁面需要引入一個微信官方的js文件；
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
2.通過ajax獲取參數 :通過后台給你的接口，取到那些必要的參數，然后你需要把當前分享的頁面的url傳到后台去，必須動態的獲取當前頁面，而且一定要對url進行編碼，要不然會不起作用；
3.因為重復上線你手機需要清理緩存，這又是一個麻煩事，手機打開：
debugx5.qq.com
然后滑到底部，有四個清理緩存的選擇框，選擇清理就好，不會影響別的地方的緩存，無需擔心；
好，到這里就貼代碼了，代碼里面都特意詳細的進行了注釋：
$(function() {
//對url進行編碼
var localUrl = encodeURIComponent(location.href.split('#')[0]);
//url傳到后台格式
var Url = "URL=" +localUrl;
//這幾個參數都是后台從微信公眾平台獲取到的
var nonceStr, signature, timestamp, appId, shareUrl;
$.ajax({
//后台獲取參數接口
url: "https://www.xxxxxxx.cn/user/xxxxxxxx/",
beforeSend: function(xhr) {
xhr.setRequestHeader("Token", getCookie("token"));
},
type: 'get',
data: Url,
success: function(data) {
//得到參數
var appId = JSON.parse(data).appId;
var nonceStr = JSON.parse(data).nonceStr;
var signature = JSON.parse(data).signature;
var timestamp = JSON.parse(data).timestamp;
var shareUrl = JSON.parse(data).url;
//通過微信config接口注入配置
wx.config({
debug: false, // 默認為false 為true的時候是調試模式，會打印出日志
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
//配置自定義分享內容
window.share_config = {
'share': {
'imgUrl': 'https://www.xxxxxx.cn/cecerecruit/img/%E6%B5%8B%E6%B5%8B%E6%8B%9B%E5%8B%9F.png', // 這里是需要展示的圖標
'desc': '120秒，48項天賦解析，90分鍾專家咨詢解讀，深度剖析您的天賦人生。成為測測科技合伙人，尊享至多11項專屬超值禮遇。', // 這是分享展示的摘要
'title': '90%的人都認可測測科技天賦智能測評|合伙人現正招募中', // 這是分享展示卡片的標題
'link': shareUrl, // 這里是分享的網址
'success': function(rr) {
//console.log('成功' + JSON.stringify(rr))
},
'cancel': function(tt) {
//console.log('失敗' + JSON.stringify(tt));
}
}
};
wx.ready(function() {
wx.onMenuShareAppMessage(share_config.share); // 微信好友
wx.onMenuShareTimeline(share_config.share); // 微信朋友圈
wx.onMenuShareQQ(share_config.share); // QQ
});
},
error: function(err) {
},
});
})
提醒：手機端還在測試階段，建議把debug改成true;然后博主做到這里，打包發給后台上線，然后驚喜的跳出config:OK;哇，那個驚喜若狂，然后果斷分享一下去測試，然后如圖：
大功告成。
總結：以后做這種事一定要耐心，發現問題要一步步去測試，只不過希望不要出現appid給錯這種粗心大意的事了，最后，有問題留言，共同加油，共同進步