定製微信分享的內容（備忘）

時間 2019-11-08

標籤定製微信分享內容備忘简体版

原文原文鏈接

微信分享的內容，從視覺上看有三個部分：標題、描述、圖片。
若是不使用微信的 jssdk 進行訂製的話，微信會截取一張大概 300*300 而且距離<body> 標籤最近的一張圖片做爲須要的圖片；標題會選取<title></title>中的內容；描述則會是該頁面的 URL。html

聲明：2017年3月29日，微信宣佈未接入 JSSDK 的網站將統一顯示默認縮略圖

因此在某些時候，訂製內容是極爲必要的。
須要作的事情也很簡單
首先須要和微信服務器交互以得到如下字段，這些字段一般由服務端獲取並傳遞給前端：
appId 公衆號的惟一標識
timestamp生成簽名的時間戳
nonceStr生成簽名的隨機串
signature簽名（獲取簽名比獲取其餘字段稍微麻煩一點）前端

獲取了以後，在你的<script></script>標籤中寫以下的代碼git

wx.config({
                debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                appId: yourAppId, // 必填，公衆號的惟一標識
                timestamp: yourtimestamp, // 必填，生成簽名的時間戳
                nonceStr: yournonceStr, // 必填，生成簽名的隨機串
                signature: yoursignature,// 必填，簽名
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo'
                ] // 必填，須要使用的JS接口列表(此處接入了四個用於分享的接口)，全部JS接口列表見官方文檔
            });
            
            window.share_config = {
                "share": {
                    "title" : '',//分享卡片標題
                    "desc" : " ",//摘要,只有發給朋友才顯示摘要。
                    "imgUrl": '',//分享圖，默認當相對路徑處理，因此使用絕對路徑的的話，「http://」協議前綴必須在。
                    "link": window.location.href,//分享出去後的連接，這裏能夠將連接設置爲另外一個頁面。
                    "success":function(){
                        //分享成功後的回調函數
                    },
                    'cancel': function () { 
                        // 用戶取消分享後執行的回調函數
                    }
                }
            };  
            wx.ready(function () {
                wx.onMenuShareAppMessage(share_config.share);//分享給好友
                wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
                wx.onMenuShareQQ(share_config.share);//分享給手機QQ
                wx.onMenuShareWeibo(share_config.share);//分享給微博
            });

把以上代碼寫進去就 ok 啦，github

參考文章：
官方文檔:http://mp.weixin.qq.com/wiki/...
http://meiminjun.github.io/20...
http://chitanda.me/2015/06/19...api