微信自定義分享連接信息（標題，圖片和內容）的實現教程

網頁分享到微信要怎麼才能自定義標題，內容和圖片呢？

需求概述

微信中能夠直接轉發網頁連接，用戶在微信內置瀏覽器中打開後能夠經過微信瀏覽器中右上角進行分享到朋友，朋友圈，QQ等。但直接這樣分享的話，用戶看到的只是一條連接，沒有任何的圖文內容。

以下圖，圖1是別人分享給個人連接效果，圖2是我分享給別人的效果。兩種方案的用戶體驗我想都不用我多說了，一眼就能看的出來.

 

方案實現

方法1：使用快兔工具箱

一、進入官網連接

http://www.w1card.cn

二、需準備材料

準備連接+自定義的標題+自定義的內容+logo

三、製做微信圖文連接

 

方法2：對接快兔工具箱接口

一、需準備材料

① 分享標題+描述+logo

② 本身的分享域名

③ 對接接口自動生成

 

方法3：對接SDK 

微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。可參考微信JS-SDK說明文檔。

具體步驟：

一、準備一個備案的域名和空間，綁定域名到該空間去。

二、登陸微信公衆平臺，進入「公衆號設置」的功能設置裏面填寫js接口安全域名，這個要填寫的是你微信瀏覽器要打開的域名地址，不能添加IP地址。

三、引入js文件，在須要調用js接口的頁面接入JS文件。

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

　　

四、經過config接口注入權限並驗證配置（這一步算是整個步驟中最關鍵的一步，必須正確的配置信息才能夠進行調用JS-SDK。）

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
});

　　

詳細接入代碼   

+ (currentLink.indexOf("?") > -1 ? ("&u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}") : ("?u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}"));
           shareLink = shareLink  + (shareLink.indexOf("?") > -1 ? ("&city=" + "深圳") : ("?city=" + "深圳"));
    var shareImgUrl = "${IMGPATH!}/images/banner2.png";
    var shareGid = "";

	wx.ready(function () {
    	//分享給朋友
        wx.onMenuShareAppMessage({
        	title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
       			shared(shareLink, "friend", shareGid);
       	    },
           	fail: function (res) {
             	alert(JSON.stringify(res));
           	}
        });
    	//分享到朋友圈
        wx.onMenuShareTimeline({
        	title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
       			shared(shareLink, "Timeline", shareGid);
       	    },
           	fail: function (res) {
             	alert(JSON.stringify(res));
           	}
        });
      	//分享到QQ
        wx.onMenuShareQQ({
        	title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
       			shared(shareLink, "QQ", shareGid);
       	    },
           	fail: function (res) {
             	alert(JSON.stringify(res));
           	}
        });
      	//分享到騰訊QQ
        wx.onMenuShareWeibo({
        	title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
       			shared(shareLink, "Weibo", shareGid);
       	    },
           	fail: function (res) {
             	alert(JSON.stringify(res));
           	}
        });
      	//分享到QZone
        wx.onMenuShareQZone({
        	title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
       			shared(shareLink, "QZone", shareGid);
       	    },
           	fail: function (res) {
             	alert(JSON.stringify(res));
           	}
        });
    });

    function shared(url, type, gid){
    	var rUrl = basePath + "/share/add?type=" + type + "&url=" + encodeURI(url);
    	if(!!gid) {
    		rUrl += "&gid=" + gid;
    	}
    	$.ajax({
            type: "GET",
            url: rUrl,
            dataType: "json",
            success: function(rs){
            	//alert("分享成功");
            }
    	});
    }
   " _ue_custom_node_="true">