用微信打開一個網頁,選擇右上角的“發送給朋友”后,收到的消息是這樣的:
而為了推廣效果,我們更希望能自定義標題、描述和圖片,效果如下圖:
下面介紹下怎樣來實現這個功能
方案實現
方法1:使用飛哥工具箱
1、進入官網鏈接
http://www.fgcq39.cn
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="
+
"深圳"
));
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
">
好了,先寫這些,有不明白的可以關注私信我