js微信分享API
更新時(shí)間：2020年10月11日 15:54:01 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了js微信分享實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文為大家分享了js微信分享實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
微信分享Js API
功能：
1、分享到微信朋友圈
2、分享給微信好友
3、分享到騰訊微博
4、隱藏/顯示右上角的菜單入口
5、隱藏/顯示底部瀏覽器工具欄
6、獲取當(dāng)前的網(wǎng)絡(luò)狀態(tài)
7、調(diào)起微信客戶(hù)端的圖片播放組件
8、關(guān)閉公眾平臺(tái)Web頁(yè)面
/**!
* 微信內(nèi)置瀏覽器的Javascript API，功能包括：
*
* 1、分享到微信朋友圈
* 2、分享給微信好友
* 3、分享到騰訊微博
* 4、隱藏/顯示右上角的菜單入口
* 5、隱藏/顯示底部瀏覽器工具欄
* 6、獲取當(dāng)前的網(wǎng)絡(luò)狀態(tài)
* 7、調(diào)起微信客戶(hù)端的圖片播放組件
* 8、關(guān)閉公眾平臺(tái)Web頁(yè)面
*
* @author zhaoxianlie
*/
var WeixinApi = (function () {
"use strict";
/**
* 分享到微信朋友圈
* @param {Object} data 待分享的信息
* @p-config {String} appId 公眾平臺(tái)的appId（服務(wù)號(hào)可用）
* @p-config {String} imageUrl 圖片地址
* @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) 無(wú)論成功失敗都會(huì)執(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":"120",
"img_height":"120"
}, function (resp) {
switch (resp.err_msg) {
// share_timeline:cancel 用戶(hù)取消
case 'share_timeline:cancel':
callbacks.cancel && callbacks.cancel(resp);
break;
// share_timeline:fail 發(fā)送失敗
case 'share_timeline:fail':
callbacks.fail && callbacks.fail(resp);
break;
// share_timeline:confirm 發(fā)送成功
case 'share_timeline:confirm':
case 'share_timeline:ok':
callbacks.confirm && callbacks.confirm(resp);
break;
}
// 無(wú)論成功失敗都會(huì)執(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 公眾平臺(tái)的appId（服務(wù)號(hào)可用）
* @p-config {String} imageUrl 圖片地址
* @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) 無(wú)論成功失敗都會(huì)執(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":"120",
"img_height":"120"
}, function (resp) {
switch (resp.err_msg) {
// send_app_msg:cancel 用戶(hù)取消
case 'send_app_msg:cancel':
callbacks.cancel && callbacks.cancel(resp);
break;
// send_app_msg:fail 發(fā)送失敗
case 'send_app_msg:fail':
callbacks.fail && callbacks.fail(resp);
break;
// send_app_msg:confirm 發(fā)送成功
case 'send_app_msg:confirm':
case 'send_app_msg:ok':
callbacks.confirm && callbacks.confirm(resp);
break;
}
// 無(wú)論成功失敗都會(huì)執(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) 無(wú)論成功失敗都會(huì)執(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 用戶(hù)取消
case 'share_weibo:cancel':
callbacks.cancel && callbacks.cancel(resp);
break;
// share_weibo:fail 發(fā)送失敗
case 'share_weibo:fail':
callbacks.fail && callbacks.fail(resp);
break;
// share_weibo:confirm 發(fā)送成功
case 'share_weibo:confirm':
case 'share_weibo:ok':
callbacks.confirm && callbacks.confirm(resp);
break;
}
// 無(wú)論成功失敗都會(huì)執(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);
}
});
}
/**
* 調(diào)起微信Native的圖片播放組件。
* 這里必須對(duì)參數(shù)進(jìn)行強(qiáng)檢測(cè)，如果參數(shù)不合法，直接會(huì)導(dǎo)致微信客戶(hù)端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)頁(yè)右上角的按鈕
*/
function showOptionMenu() {
WeixinJSBridge.call('showOptionMenu');
}
/**
* 隱藏網(wǎng)頁(yè)右上角的按鈕
*/
function hideOptionMenu() {
WeixinJSBridge.call('hideOptionMenu');
}
/**
* 顯示底部工具欄
*/
function showToolbar() {
WeixinJSBridge.call('showToolbar');
}
/**
* 隱藏底部工具欄
*/
function hideToolbar() {
WeixinJSBridge.call('hideToolbar');
}
/**
* 返回如下幾種類(lèi)型：
*
* network_type:wifi wifi網(wǎng)絡(luò)
* network_type:edge 非wifi,包含3G/2G
* network_type:fail 網(wǎng)絡(luò)斷開(kāi)連接
* 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ò)類(lèi)型
callback(e.err_msg);
});
}
}
/**
* 關(guān)閉當(dāng)前微信公眾平臺(tái)頁(yè)面
*/
function closeWindow() {
WeixinJSBridge.call("closeWindow");
}
/**
* 當(dāng)頁(yè)面加載完畢后執(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 :"1.8",
ready :wxJsBridgeReady,
shareToTimeline :weixinShareTimeline,
shareToWeibo :weixinShareWeibo,
shareToFriend :weixinSendAppMessage,
showOptionMenu :showOptionMenu,
hideOptionMenu :hideOptionMenu,
showToolbar :showToolbar,
hideToolbar :hideToolbar,
getNetworkType :getNetworkType,
imagePreview :imagePreview,
closeWindow :closeWindow
};
})();
源碼下載：js微信分享
本文已被整理到了《JavaScript微信開(kāi)發(fā)技巧匯總》，歡迎大家學(xué)習(xí)閱讀。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)微信分享代碼
- js實(shí)現(xiàn)通用的微信分享組件示例
- VueJs單頁(yè)應(yīng)用實(shí)現(xiàn)微信網(wǎng)頁(yè)授權(quán)及微信分享功能示例
- javascript實(shí)現(xiàn)修改微信分享的標(biāo)題內(nèi)容等
- JS中靜態(tài)頁(yè)面實(shí)現(xiàn)微信分享功能
- Javascript 實(shí)現(xiàn)微信分享（QQ、朋友圈、分享給朋友）
- js微信分享實(shí)現(xiàn)代碼
- javascript實(shí)現(xiàn)微信分享
- 淺談微信JS-SDK 微信分享接口開(kāi)發(fā)（介紹版）
- 手機(jī)瀏覽器喚起微信分享(JS)
相關(guān)文章
javascript實(shí)現(xiàn)刪除前彈出確認(rèn)框
刪除確認(rèn)對(duì)話(huà)框的JS代碼，有好幾種寫(xiě)法，有簡(jiǎn)單的，有兼容好的，下面分別說(shuō)幾種方法，可根據(jù)自己需要選用2015-06-06
獲取時(shí)間間隔在日常使用還是比價(jià)頻繁的，下面是具體的實(shí)現(xiàn)代碼，需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了canvas實(shí)現(xiàn)圖像布局填充功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了JavaScript中return的用法,包括return定義，寫(xiě)法等方面的知識(shí)，需要的朋友可以參考下2017-05-05
監(jiān)控微信小程序中的慢HTTP請(qǐng)求過(guò)程詳解
這篇文章主要介紹了監(jiān)控微信小程序中的慢HTTP請(qǐng)求過(guò)程詳解，F(xiàn)undebug 的微信小程序監(jiān)控插件在 0.5.0 版本已經(jīng)支持監(jiān)控 HTTP 請(qǐng)求錯(cuò)誤，在小程序中通過(guò)wx.request發(fā)起 HTTP 請(qǐng)求，如果請(qǐng)求失敗，會(huì)被捕獲并上報(bào),需要的朋友可以參考下2019-07-07
下面小編就為大家?guī)?lái)一篇JS觸發(fā)服務(wù)器控件的單擊事件(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JavaScript使用Base64編碼和Blob對(duì)象加密圖像url地址
有時(shí)候會(huì)看到一些網(wǎng)站的圖片src中是blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d,這樣的圖片加載怎么實(shí)現(xiàn)呢？本文講解在瀏覽器中JavaScript使用解析Base64編碼和Blob對(duì)象技術(shù)來(lái)實(shí)現(xiàn),下面是實(shí)現(xiàn)的步驟和相應(yīng)的示例代碼,2023-12-12
這篇文章主要介紹了詳解如何在Javascript和Sass之間共享變量，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
jquery結(jié)合CSS使用validate實(shí)現(xiàn)漂亮的驗(yàn)證
這篇文章主要介紹了jquery結(jié)合CSS使用validate實(shí)現(xiàn)漂亮的驗(yàn)證,需要的朋友可以參考下2015-01-01
菜單制作學(xué)習(xí)一個(gè)小東西...2006-09-09