1. 程式人生 > 實用技巧 >微信分享幷包裝連結自定義分享功能(標題,圖片,內容,連結自定義分享)

微信分享幷包裝連結自定義分享功能(標題,圖片,內容,連結自定義分享)

用微信開啟一個網頁,選擇右上角的“傳送給朋友”後,收到的訊息是這樣的:

而為了推廣效果,我們更希望能自定義標題、描述和圖片,效果如下圖:

下面介紹下怎樣來實現這個功能

方案實現

方法1:使用飛哥工具箱

1、進入官網連結

http://www.fgcq39.cn/index/index.html

2、需準備材料

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

3、製作微信圖文連結

方法2:對接飛哥工具箱介面

1、需準備材料

① 分享標題+描述+logo

② 自己的分享域名

③ 對接介面自動生成

方法3:對接SDK

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

具體步驟:

1、準備一個備案的域名和空間,繫結域名到該空間去。以及一個認證過的公眾號,

2、登入微信公眾平臺,進入“公眾號設定”的功能設定裡面填寫js介面安全域名,這個要填寫的是你微信瀏覽器要開啟的域名地址,不能新增IP地址。

3、引入js檔案,在需要呼叫js介面的頁面接入JS檔案。

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

  

4、通過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">

  

+ (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="+"深圳")); varshareImgUrl ="${IMGPATH!}/images/banner2.png"; varshareGid =""; 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)); } }); }); functionshared(url, type, gid){ varrUrl = 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"> 好了,先寫這些,有不明白的可以關注私信我