js實(shí)現(xiàn)微信分享代碼
更新時(shí)間：2020年10月11日 15:56:43 投稿：lijiao
這篇文章主要介紹了js實(shí)現(xiàn)微信分享朋友鏈接顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
通常自己做的一個(gè)頁面想通過微信像朋友分享時(shí)，展示的標(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>
另一個(gè)微信分享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時(shí)有用，也可以為空
* @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時(shí)有用，也可以為空
* @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時(shí)有用，也可以為空
* @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時(shí)有用，也可以為空
* @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)注（此功能只是暫時(shí)先加上，不過因?yàn)闄?quán)限限制問題，不能用，如果你的站點(diǎ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í)有所幫助。
您可能感興趣的文章:
- js實(shí)現(xiàn)通用的微信分享組件示例
- VueJs單頁應(yīng)用實(shí)現(xiàn)微信網(wǎng)頁授權(quán)及微信分享功能示例
- javascript實(shí)現(xiàn)修改微信分享的標(biāo)題內(nèi)容等
- JS中靜態(tài)頁面實(shí)現(xiàn)微信分享功能
- Javascript 實(shí)現(xiàn)微信分享（QQ、朋友圈、分享給朋友）
- js微信分享實(shí)現(xiàn)代碼
- javascript實(shí)現(xiàn)微信分享
- 淺談微信JS-SDK 微信分享接口開發(fā)（介紹版）
- js微信分享API
- 手機(jī)瀏覽器喚起微信分享(JS)
相關(guān)文章
javascript模擬滾動條實(shí)現(xiàn)代碼
從csdn的blog上轉(zhuǎn)過來的 做了些修改，其實(shí)寫的比較糟糕(我指的是構(gòu)造) 我用的是以前的一個(gè)drag類 在這個(gè)基礎(chǔ)上在的來完成的Slider2010-03-03
layer.open組件獲取彈出層頁面變量、函數(shù)的實(shí)例
今天小編就為大家分享一篇layer.open組件獲取彈出層頁面變量、函數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要給大家介紹了如何使用uniapp解決token值無法使用的問題,文中給大家詳細(xì)介紹了產(chǎn)生原因和解決方案,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10
本篇文章給大家介紹不想讓瀏覽器運(yùn)行javascript腳本的方法，操作方法很簡單，只需按照以下幾步就可以完成，需要的朋友參考下2015-11-11
給echarts圖表線條、數(shù)據(jù)點(diǎn)和區(qū)域設(shè)置顏色示例代碼
在ECharts中設(shè)置顏色可以通過多種方式實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于給echarts圖表線條、數(shù)據(jù)點(diǎn)和區(qū)域設(shè)置顏色的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
jquery及js實(shí)現(xiàn)動態(tài)加載js文件的方法
這篇文章主要介紹了jquery及js實(shí)現(xiàn)動態(tài)加載js文件的方法,結(jié)合實(shí)例形式分別講述了基于jQuery以及基于JavaScript的文件動態(tài)加載方法,需要的朋友可以參考下2016-01-01
在實(shí)現(xiàn)繼承的時(shí)候，用到了兩個(gè)很特殊的方法，call和apply，下面，我就來說一下這個(gè)兩個(gè)方法2014-05-05
JScript中使用ADODB.Stream判斷文件編碼的代碼
在實(shí)現(xiàn)TextStraem的時(shí)候，找到判斷文件編碼的代碼是VBS的，但是在JScript中是沒有ASC等函數(shù)的，也不能對二進(jìn)制數(shù)據(jù)進(jìn)行處理，因此需要通過一個(gè)特別的方法來獲取文件開關(guān)的編碼標(biāo)識。2008-06-06
有時(shí)需要模仿用戶的一些動作（鼠標(biāo)/鍵盤操作），最常見的莫過于鼠標(biāo)點(diǎn)擊。一一列舉2011-08-08
這篇文章主要來和大家詳細(xì)介紹一下JavaScript中map和parseInt的用法，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下2023-05-05