js實現(xiàn)微信分享代碼
更新時間：2020年10月11日 15:56:43 投稿：lijiao
這篇文章主要介紹了js實現(xiàn)微信分享朋友鏈接顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
通常自己做的一個頁面想通過微信像朋友分享時，展示的標(biāo)題和描述都是不是自己想要的，自己查了一些資料，原來是通過js來進(jìn)行控制
展示效果如下：
標(biāo)題、描述、還有分享的圖片都是有js來控制的。
js代碼如下
<script>
var dataForWeixin = {
appId: "",
MsgImg: "Christmas/201012189457639.gif",//顯示圖片
TLImg: "Christmas/201012189457639.gif",//顯示圖片
url: "Christmas/6.html?stra=!u738B!u4F1F",//跳轉(zhuǎn)地址
title: "將我的思念和祝福送給您,頤養(yǎng)源祝大家圣誕快樂",//標(biāo)題內(nèi)容
desc: "將我的思念和祝福送給您,頤養(yǎng)源祝大家圣誕快樂",//描述內(nèi)容
fakeid: "",
callback: function () { }
};
(function () {
var onBridgeReady = function () {
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
WeixinJSBridge.invoke('sendAppMessage', {
"appid": dataForWeixin.appId,
"img_url": dataForWeixin.MsgImg,
"img_width": "120",
"img_height": "120",
"link": dataForWeixin.url,
"desc": dataForWeixin.desc,
"title": dataForWeixin.title
}, function (res) { (dataForWeixin.callback)(); });
});
WeixinJSBridge.on('menu:share:timeline', function (argv) {
(dataForWeixin.callback)();
WeixinJSBridge.invoke('shareTimeline', {
"img_url": dataForWeixin.TLImg,
"img_width": "120",
"img_height": "120",
"link": dataForWeixin.url,
"desc": dataForWeixin.desc,
"title": dataForWeixin.title
}, function (res) { });
});
WeixinJSBridge.on('menu:share:weibo', function (argv) {
WeixinJSBridge.invoke('shareWeibo', {
"content": dataForWeixin.title,
"url": dataForWeixin.url
}, function (res) { (dataForWeixin.callback)(); });
});
WeixinJSBridge.on('menu:share:facebook', function (argv) {
(dataForWeixin.callback)();
WeixinJSBridge.invoke('shareFB', {
"img_url": dataForWeixin.TLImg,
"img_width": "120",
"img_height": "120",
"link": dataForWeixin.url,
"desc": dataForWeixin.desc,
"title": dataForWeixin.title
}, function (res) { });
});
};
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
})();
</script>
另一個微信分享js代碼：
/**!
* 微信內(nèi)置瀏覽器的Javascript API，功能包括：
*
* 1、分享到微信朋友圈
* 2、分享給微信好友
* 3、分享到騰訊微博
* 4、新的分享接口，包含朋友圈、好友、微博的分享（for iOS）
* 5、隱藏/顯示右上角的菜單入口
* 6、隱藏/顯示底部瀏覽器工具欄
* 7、獲取當(dāng)前的網(wǎng)絡(luò)狀態(tài)
* 8、調(diào)起微信客戶端的圖片播放組件
* 9、關(guān)閉公眾平臺Web頁面
*/
var WeixinApi = (function () {
"use strict";
/**
* 分享到微信朋友圈
* @param {Object} data 待分享的信息
* @p-config {String} appId 公眾平臺的appId（服務(wù)號可用）
* @p-config {String} imgUrl 圖片地址
* @p-config {String} link 鏈接地址
* @p-config {String} desc 描述
* @p-config {String} title 分享的標(biāo)題
*
* @param {Object} callbacks 相關(guān)回調(diào)方法
* @p-config {Boolean} async ready方法是否需要異步執(zhí)行，默認(rèn)false
* @p-config {Function} ready(argv) 就緒狀態(tài)
* @p-config {Function} dataLoaded(data) 數(shù)據(jù)加載完成后調(diào)用，async為true時有用，也可以為空
* @p-config {Function} cancel(resp) 取消
* @p-config {Function} fail(resp) 失敗
* @p-config {Function} confirm(resp) 成功
* @p-config {Function} all(resp) 無論成功失敗都會執(zhí)行的回調(diào)
*/
function weixinShareTimeline(data, callbacks) {
callbacks = callbacks || {};
var shareTimeline = function (theData) {
WeixinJSBridge.invoke('shareTimeline', {
"appid":theData.appId ? theData.appId : '',
"img_url":theData.imgUrl,
"link":theData.link,
"desc":theData.title,
"title":theData.desc, // 注意這里要分享出去的內(nèi)容是desc
"img_width":"640",
"img_height":"640"
}, function (resp) {
switch (resp.err_msg) {
// share_timeline:cancel 用戶取消
case 'share_timeline:cancel':
callbacks.cancel && callbacks.cancel(resp);
break;
// share_timeline:confirm 發(fā)送成功
case 'share_timeline:confirm':
case 'share_timeline:ok':
callbacks.confirm && callbacks.confirm(resp);
break;
// share_timeline:fail 發(fā)送失敗
case 'share_timeline:fail':
default:
callbacks.fail && callbacks.fail(resp);
break;
}
// 無論成功失敗都會執(zhí)行的回調(diào)
callbacks.all && callbacks.all(resp);
});
};
WeixinJSBridge.on('menu:share:timeline', function (argv) {
if (callbacks.async && callbacks.ready) {
window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
window["_wx_loadedCb_"] = new Function();
}
callbacks.dataLoaded = function (newData) {
window["_wx_loadedCb_"](newData);
shareTimeline(newData);
};
// 然后就緒
callbacks.ready && callbacks.ready(argv);
} else {
// 就緒狀態(tài)
callbacks.ready && callbacks.ready(argv);
shareTimeline(data);
}
});
}
/**
* 發(fā)送給微信上的好友
* @param {Object} data 待分享的信息
* @p-config {String} appId 公眾平臺的appId（服務(wù)號可用）
* @p-config {String} imgUrl 圖片地址
* @p-config {String} link 鏈接地址
* @p-config {String} desc 描述
* @p-config {String} title 分享的標(biāo)題
*
* @param {Object} callbacks 相關(guān)回調(diào)方法
* @p-config {Boolean} async ready方法是否需要異步執(zhí)行，默認(rèn)false
* @p-config {Function} ready(argv) 就緒狀態(tài)
* @p-config {Function} dataLoaded(data) 數(shù)據(jù)加載完成后調(diào)用，async為true時有用，也可以為空
* @p-config {Function} cancel(resp) 取消
* @p-config {Function} fail(resp) 失敗
* @p-config {Function} confirm(resp) 成功
* @p-config {Function} all(resp) 無論成功失敗都會執(zhí)行的回調(diào)
*/
function weixinSendAppMessage(data, callbacks) {
callbacks = callbacks || {};
var sendAppMessage = function (theData) {
WeixinJSBridge.invoke('sendAppMessage', {
"appid":theData.appId ? theData.appId : '',
"img_url":theData.imgUrl,
"link":theData.link,
"desc":theData.desc,
"title":theData.title,
"img_width":"640",
"img_height":"640"
}, function (resp) {
switch (resp.err_msg) {
// send_app_msg:cancel 用戶取消
case 'send_app_msg:cancel':
callbacks.cancel && callbacks.cancel(resp);
break;
// send_app_msg:confirm 發(fā)送成功
case 'send_app_msg:confirm':
case 'send_app_msg:ok':
callbacks.confirm && callbacks.confirm(resp);
break;
// send_app_msg:fail 發(fā)送失敗
case 'send_app_msg:fail':
default:
callbacks.fail && callbacks.fail(resp);
break;
}
// 無論成功失敗都會執(zhí)行的回調(diào)
callbacks.all && callbacks.all(resp);
});
};
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
if (callbacks.async && callbacks.ready) {
window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
window["_wx_loadedCb_"] = new Function();
}
callbacks.dataLoaded = function (newData) {
window["_wx_loadedCb_"](newData);
sendAppMessage(newData);
};
// 然后就緒
callbacks.ready && callbacks.ready(argv);
} else {
// 就緒狀態(tài)
callbacks.ready && callbacks.ready(argv);
sendAppMessage(data);
}
});
}
/**
* 分享到騰訊微博
* @param {Object} data 待分享的信息
* @p-config {String} link 鏈接地址
* @p-config {String} desc 描述
*
* @param {Object} callbacks 相關(guān)回調(diào)方法
* @p-config {Boolean} async ready方法是否需要異步執(zhí)行，默認(rèn)false
* @p-config {Function} ready(argv) 就緒狀態(tài)
* @p-config {Function} dataLoaded(data) 數(shù)據(jù)加載完成后調(diào)用，async為true時有用，也可以為空
* @p-config {Function} cancel(resp) 取消
* @p-config {Function} fail(resp) 失敗
* @p-config {Function} confirm(resp) 成功
* @p-config {Function} all(resp) 無論成功失敗都會執(zhí)行的回調(diào)
*/
function weixinShareWeibo(data, callbacks) {
callbacks = callbacks || {};
var shareWeibo = function (theData) {
WeixinJSBridge.invoke('shareWeibo', {
"content":theData.desc,
"url":theData.link
}, function (resp) {
switch (resp.err_msg) {
// share_weibo:cancel 用戶取消
case 'share_weibo:cancel':
callbacks.cancel && callbacks.cancel(resp);
break;
// share_weibo:confirm 發(fā)送成功
case 'share_weibo:confirm':
case 'share_weibo:ok':
callbacks.confirm && callbacks.confirm(resp);
break;
// share_weibo:fail 發(fā)送失敗
case 'share_weibo:fail':
default:
callbacks.fail && callbacks.fail(resp);
break;
}
// 無論成功失敗都會執(zhí)行的回調(diào)
callbacks.all && callbacks.all(resp);
});
};
WeixinJSBridge.on('menu:share:weibo', function (argv) {
if (callbacks.async && callbacks.ready) {
window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
window["_wx_loadedCb_"] = new Function();
}
callbacks.dataLoaded = function (newData) {
window["_wx_loadedCb_"](newData);
shareWeibo(newData);
};
// 然后就緒
callbacks.ready && callbacks.ready(argv);
} else {
// 就緒狀態(tài)
callbacks.ready && callbacks.ready(argv);
shareWeibo(data);
}
});
}
/**
* 新的分享接口
* @param {Object} data 待分享的信息
* @p-config {String} appId 公眾平臺的appId（服務(wù)號可用）
* @p-config {String} imgUrl 圖片地址
* @p-config {String} link 鏈接地址
* @p-config {String} desc 描述
* @p-config {String} title 分享的標(biāo)題
*
* @param {Object} callbacks 相關(guān)回調(diào)方法
* @p-config {Boolean} async ready方法是否需要異步執(zhí)行，默認(rèn)false
* @p-config {Function} ready(argv,shareTo) 就緒狀態(tài)
* @p-config {Function} dataLoaded(data) 數(shù)據(jù)加載完成后調(diào)用，async為true時有用，也可以為空
* @p-config {Function} cancel(resp,shareTo) 取消
* @p-config {Function} fail(resp,shareTo) 失敗
* @p-config {Function} confirm(resp,shareTo) 成功
* @p-config {Function} all(resp,shareTo) 無論成功失敗都會執(zhí)行的回調(diào)
*/
function weixinGeneralShare(data, callbacks) {
callbacks = callbacks || {};
var generalShare = function (general,theData) {
// 如果是分享到朋友圈，則需要把title和desc交換一下
if(general.shareTo == 'timeline') {
var title = theData.title;
theData.title = theData.desc || title;
theData.desc = title;
}
// 分享出去
general.generalShare({
"appid":theData.appId ? theData.appId : '',
"img_url":theData.imgUrl,
"link":theData.link,
"desc":theData.desc,
"title":theData.title,
"img_width":"640",
"img_height":"640"
}, function (resp) {
switch (resp.err_msg) {
// general_share:cancel 用戶取消
case 'general_share:cancel':
callbacks.cancel && callbacks.cancel(resp ,general.shareTo);
break;
// general_share:confirm 發(fā)送成功
case 'general_share:confirm':
case 'general_share:ok':
callbacks.confirm && callbacks.confirm(resp ,general.shareTo);
break;
// general_share:fail 發(fā)送失敗
case 'general_share:fail':
default:
callbacks.fail && callbacks.fail(resp ,general.shareTo);
break;
}
// 無論成功失敗都會執(zhí)行的回調(diào)
callbacks.all && callbacks.all(resp ,general.shareTo);
});
};
WeixinJSBridge.on('menu:general:share', function (general) {
if (callbacks.async && callbacks.ready) {
window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
window["_wx_loadedCb_"] = new Function();
}
callbacks.dataLoaded = function (newData) {
window["_wx_loadedCb_"](newData);
generalShare(general,newData);
};
// 然后就緒
callbacks.ready && callbacks.ready(general,general.shareTo);
} else {
// 就緒狀態(tài)
callbacks.ready && callbacks.ready(general,general.shareTo);
generalShare(general,data);
}
});
}
/**
* 加關(guān)注（此功能只是暫時先加上，不過因為權(quán)限限制問題，不能用，如果你的站點是部署在*.qq.com下，也許可行）
* @param {String} appWeixinId 微信公眾號ID
* @param {Object} callbacks 回調(diào)方法
* @p-config {Function} fail(resp) 失敗
* @p-config {Function} confirm(resp) 成功
*/
function addContact(appWeixinId,callbacks){
callbacks = callbacks || {};
WeixinJSBridge.invoke("addContact", {
webtype: "1",
username: appWeixinId
}, function (resp) {
var success = !resp.err_msg || "add_contact:ok" == resp.err_msg || "add_contact:added" == resp.err_msg;
if(success) {
callbacks.success && callbacks.success(resp);
}else{
callbacks.fail && callbacks.fail(resp);
}
})
}
/**
* 調(diào)起微信Native的圖片播放組件。
* 這里必須對參數(shù)進(jìn)行強(qiáng)檢測，如果參數(shù)不合法，直接會導(dǎo)致微信客戶端crash
*
* @param {String} curSrc 當(dāng)前播放的圖片地址
* @param {Array} srcList 圖片地址列表
*/
function imagePreview(curSrc,srcList) {
if(!curSrc || !srcList || srcList.length == 0) {
return;
}
WeixinJSBridge.invoke('imagePreview', {
'current' : curSrc,
'urls' : srcList
});
}
/**
* 顯示網(wǎng)頁右上角的按鈕
*/
function showOptionMenu() {
WeixinJSBridge.call('showOptionMenu');
}
/**
* 隱藏網(wǎng)頁右上角的按鈕
*/
function hideOptionMenu() {
WeixinJSBridge.call('hideOptionMenu');
}
/**
* 顯示底部工具欄
*/
function showToolbar() {
WeixinJSBridge.call('showToolbar');
}
/**
* 隱藏底部工具欄
*/
function hideToolbar() {
WeixinJSBridge.call('hideToolbar');
}
/**
* 返回如下幾種類型：
*
* network_type:wifi wifi網(wǎng)絡(luò)
* network_type:edge 非wifi,包含3G/2G
* network_type:fail 網(wǎng)絡(luò)斷開連接
* network_type:wwan 2g或者3g
*
* 使用方法：
* WeixinApi.getNetworkType(function(networkType){
*
* });
*
* @param callback
*/
function getNetworkType(callback) {
if (callback && typeof callback == 'function') {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
// 在這里拿到e.err_msg，這里面就包含了所有的網(wǎng)絡(luò)類型
callback(e.err_msg);
});
}
}
/**
* 關(guān)閉當(dāng)前微信公眾平臺頁面
*/
function closeWindow() {
WeixinJSBridge.call("closeWindow");
}
/**
* 當(dāng)頁面加載完畢后執(zhí)行，使用方法：
* WeixinApi.ready(function(Api){
* // 從這里只用Api即是WeixinApi
* });
* @param readyCallback
*/
function wxJsBridgeReady(readyCallback) {
if (readyCallback && typeof readyCallback == 'function') {
var Api = this;
var wxReadyFunc = function () {
readyCallback(Api);
};
if (typeof window.WeixinJSBridge == "undefined"){
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', wxReadyFunc, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', wxReadyFunc);
document.attachEvent('onWeixinJSBridgeReady', wxReadyFunc);
}
}else{
wxReadyFunc();
}
}
}
return {
version :"2.0",
ready :wxJsBridgeReady,
shareToTimeline :weixinShareTimeline,
shareToWeibo :weixinShareWeibo,
shareToFriend :weixinSendAppMessage,
generalShare :weixinGeneralShare,
addContact :addContact,
showOptionMenu :showOptionMenu,
hideOptionMenu :hideOptionMenu,
showToolbar :showToolbar,
hideToolbar :hideToolbar,
getNetworkType :getNetworkType,
imagePreview :imagePreview,
closeWindow :closeWindow
};
})();
本文已被整理到了《JavaScript微信開發(fā)技巧匯總》，歡迎大家學(xué)習(xí)閱讀。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是微信分享js代碼，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
用js來刷新當(dāng)前頁面保留參數(shù)的具體實現(xiàn)
本文為大家詳細(xì)介紹下如何使用js來刷新當(dāng)前頁面保留參數(shù)，下面有個不錯的實現(xiàn)大家可以看看2013-12-12
這篇文章主要介紹了JS封裝的選項卡TAB切換效果,結(jié)合實例形式分析了javascript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性實現(xiàn)tab切換的相關(guān)技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了js獲取會話框prompt的返回值的方法,通過一個簡單的密碼判斷實例分析了js獲取會話框prompt返回值的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
一文讀懂JS中的var/let/const和暫時性死區(qū)
這篇文章主要為大家詳細(xì)介紹了JavaScript中的var、let、const和暫時性死區(qū)的異同，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-02-02
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)連連看游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
js 輸出內(nèi)容一般都是在本窗口，如果要實現(xiàn)在新窗口的話該如何實現(xiàn)呢？下面與大家分享具體的代碼2013-05-05
下面小編就為大家?guī)硪黄唵蔚木W(wǎng)頁廣告特效實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家介紹了JS表單提交中onsubmit事件return的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了JS實現(xiàn)的視頻彈幕效果,涉及javascript基于事件響應(yīng)的頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
爬蟲進(jìn)階-JS自動渲染之Scrapy_splash組件的使用
Splash是一個Javascript渲染服務(wù)。它是一個實現(xiàn)了HTTP API的輕量級瀏覽器，Splash是用Python和Lua語言實現(xiàn)的，基于Twisted和QT等模塊構(gòu)建，今天重點給大家介紹js Scrapy_splash組件使用教程，一起看看吧2021-09-09