微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹
微信網(wǎng)頁(yè)進(jìn)入，右上角有三個(gè)小點(diǎn)，沒(méi)錯(cuò)，我們用到的就是它！我們只要通過(guò)將小點(diǎn)列表下的按鈕進(jìn)行自定義，就可以隨心所欲的分享我們自己的內(nèi)容了。
注意：（WeixinJSBridge只能在微信內(nèi)打開(kāi)的網(wǎng)頁(yè)有效）
按鈕一之------發(fā)送給好友
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("發(fā)送給好友"); });
}
這樣，只要在某處調(diào)用 sendMessage 函數(shù)就可以改變發(fā)送好友的按鈕響應(yīng)了，再點(diǎn)擊，便會(huì)彈出“發(fā)送給好友字符串”，是不是很簡(jiǎn)單。
分享函數(shù)
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 設(shè)置空就好了。
"img_url": imgUrl, //分享時(shí)所帶的圖片路徑
"img_width": "120", //圖片寬度
"img_height": "120", //圖片高度
"link":url, //分享附帶鏈接地址
"desc":"我是一個(gè)介紹", //分享內(nèi)容介紹
"title":"標(biāo)題，再簡(jiǎn)單不過(guò)了。"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/});
注意，如果將這個(gè)微信私有函數(shù)單獨(dú)拿出來(lái)調(diào)用，道理上是講的通，但是！第一次打開(kāi)頁(yè)面直接調(diào)用它的話(huà)，無(wú)論如何是沒(méi)有任何反映的，必須要手動(dòng)，點(diǎn)一下右上角分享給好友按鈕，待彈出一次通訊錄之后，返回來(lái)在直接使用，就沒(méi)有任何問(wèn)題，似乎內(nèi)部初始化什么東西一樣。所以建議直接嵌入到上面那個(gè) 綁定方法中。
如下：
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 設(shè)置空就好了。
"img_url": imgUrl, //分享時(shí)所帶的圖片路徑
"img_width": "120", //圖片寬度
"img_height": "120", //圖片高度
"link":url, //分享附帶鏈接地址
"desc":"我是一個(gè)介紹", //分享內(nèi)容介紹
"title":"標(biāo)題，再簡(jiǎn)單不過(guò)了。"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/
});
});
}
這樣，你在點(diǎn)擊發(fā)送給好友按鈕，就可以直接彈出通訊錄選擇 ‘單個(gè)' 好友進(jìn)行分享。
同理,分享到朋友圈也是調(diào)用 invoke 私有函數(shù)，只是按鈕綁定名稱(chēng)不同而已。
function sendMessage(){
......//此處省略發(fā)送給好友代碼
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"", //appid 設(shè)置空就好了。
"img_url": imgUrl, //分享時(shí)所帶的圖片路徑
"img_width": "120", //圖片寬度
"img_height": "120", //圖片高度
"link":url, //分享附帶鏈接地址
"desc":"我是一個(gè)介紹", //分享內(nèi)容介紹
"title":"標(biāo)題，再簡(jiǎn)單不過(guò)了。"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/});
});
});
}
注意，on綁定的是 “menu:share:timeline” 不是 "menu:share:appmessage"。invoke里面也是。
還一個(gè)微博分享，我沒(méi)試過(guò)，不知道有沒(méi)有用，想玩的試試，一切分享都是調(diào)用當(dāng)前微信帳號(hào)分享。
WeixinJSBridge.on('menu:share:weibo', function(argv){
WeixinJSBridge.invoke('shareWeibo',{
"content":dataForWeixin.title+' '+dataForWeixin.url,
"url":dataForWeixin.url
}, function(res){});
});
如果微信瀏覽器內(nèi)部尚未初始化，所有的接口都會(huì)是undefined。為了避免進(jìn)去馬上就調(diào)用出錯(cuò)，獲取微信初始化完成響應(yīng)事件，初始化完成調(diào)用sendMessage進(jìn)行綁定。
如下：
if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false); }else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage); }
下面還有幾個(gè)小功能：
WeixinJSBridge.call('hideToolbar'); //隱藏右下面工具欄
WeixinJSBridge.call('showToolbar'); //顯示右下面工具欄
WeixinJSBridge.call('hideOptionMenu'); //隱藏右上角三個(gè)點(diǎn)按鈕。
WeixinJSBridge.call('showOptionMenu'); //顯示右上角三個(gè)點(diǎn)按鈕。
我是一個(gè)菜鳥(niǎo)，寫(xiě)完了，寫(xiě)的不好，請(qǐng)大家多多包含！
完整測(cè)試代碼（用微信打開(kāi)）：
<!docType html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>微信接口測(cè)試</title>
<script>
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 設(shè)置空就好了。
"img_url":"", //分享時(shí)所帶的圖片路徑
"img_width":"120", //圖片寬度
"img_height":"120", //圖片高度
"link":"http://chabaoo.cn", //分享附帶鏈接地址
"desc":"極客標(biāo)簽--http://chabaoo.cn", //分享內(nèi)容介紹
"title":"發(fā)現(xiàn) 極客標(biāo)簽 - 做最棒的極客知識(shí)分享平臺(tái)"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/
});
});
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"", //appid 設(shè)置空就好了。
"img_url":"", //分享時(shí)所帶的圖片路徑
"img_width":"120", //圖片寬度
"img_height":"120", //圖片高度
"link":"http://chabaoo.cn", //分享附帶鏈接地址
"desc":"極客標(biāo)簽--http://chabaoo.cn", //分享內(nèi)容介紹
"title":"發(fā)現(xiàn) 極客標(biāo)簽 - 做最棒的極客知識(shí)分享平臺(tái)"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/
});
});
alert("調(diào)用成功！現(xiàn)在可以通過(guò)右上角按鈕分享給朋友或者朋友圈！");
}
function hideMenu(){
WeixinJSBridge.call('hideOptionMenu');
}
function showMenu(){
WeixinJSBridge.call('showOptionMenu');
}
function hideTool(){
WeixinJSBridge.call('hideToolbar');
}
function showTool(){
WeixinJSBridge.call('showToolbar');
}
if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false);
}else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage);
document.attachEvent('onWeixinJSBridgeReady' , sendMessage);
}
//判斷網(wǎng)頁(yè)是否在微信中被調(diào)用
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
} else {
alert("調(diào)用失敗，請(qǐng)用微信掃一掃，掃描下面二維碼打開(kāi)網(wǎng)頁(yè)！");
}
</script>
</head>
<body>
<center>
<h2>分享請(qǐng)點(diǎn)擊右上角</h2>
<button onclick="hideMenu()" style="width:100px;height:100px;font-size:16px;">隱藏右上角三個(gè)點(diǎn)</button> <br /><br />
<button onclick="showMenu()" style="width:100px;height:100px;font-size:16px;">顯示右上角三個(gè)點(diǎn)</button> <br /><br />
<button onclick="hideTool()" style="width:100px;height:100px;font-size:16px;">隱藏下面導(dǎo)條</button> <br /><br />
<button onclick="showTool()" style="width:100px;height:100px;font-size:16px;">顯示下面導(dǎo)條</button> <br /><br />
</center>
</body>
</html>
相關(guān)文章
JavaScript實(shí)現(xiàn)的一個(gè)日期格式化函數(shù)分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的一個(gè)日期格式化函數(shù)分享,本文給出了實(shí)現(xiàn)代碼和使用例子,需要的朋友可以參考下2014-12-12
微信小程序用swiper實(shí)現(xiàn)滑動(dòng)刻度尺
這篇文章主要為大家詳細(xì)介紹了微信小程序用swiper實(shí)現(xiàn)滑動(dòng)刻度尺，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
echarts圖表無(wú)數(shù)據(jù)/空數(shù)據(jù)如何展示"暫無(wú)數(shù)據(jù)"
在開(kāi)發(fā)echarts的時(shí)候我們不得不考慮數(shù)據(jù)為空的情況,其實(shí)有很多種解決辦法,下面這篇文章主要給大家介紹了關(guān)于echarts圖表無(wú)數(shù)據(jù)/空數(shù)據(jù)如何展示“暫無(wú)數(shù)據(jù)”的相關(guān)資料,需要的朋友可以參考下2022-10-10
小程序按鈕避免多次調(diào)用接口和點(diǎn)擊方案實(shí)現(xiàn)(不用showLoading)
這篇文章主要介紹了小程序按鈕避免多次調(diào)用接口和點(diǎn)擊方案實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
話(huà)說(shuō)自從學(xué)前端以來(lái)聽(tīng)到過(guò)多次這樣的"笑話(huà)",程序員分為會(huì)正則的和不會(huì)正則的,可見(jiàn)正則的重要性,這篇文章主要給大家介紹了關(guān)于js正則表達(dá)式之前瞻后顧與非捕獲分組的相關(guān)資料,需要的朋友可以參考下2021-10-10
js獲取數(shù)組任意個(gè)不重復(fù)的隨機(jī)數(shù)組元素
新建一個(gè)數(shù)組,將傳入的數(shù)組復(fù)制過(guò)來(lái),用于運(yùn)算,而不要直接操作傳入的數(shù)組2010-03-03
2019 年編寫(xiě)現(xiàn)代 JavaScript 代碼的5個(gè)小技巧(小結(jié))
這篇文章主要介紹了2019 年編寫(xiě)現(xiàn)代 JavaScript 代碼的5個(gè)小技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了JavaScript DOM常用操作代碼匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細(xì)介紹了js事件處理程序跨瀏覽器解決方案，感興趣的小伙伴們可以參考一下2016-03-03
面向?qū)ο罄^承實(shí)例(a如何繼承b問(wèn)題)(自寫(xiě))
經(jīng)常會(huì)看到a如何繼承b的問(wèn)題；決定寫(xiě)一下，其實(shí)繼承就是繼承父級(jí)的屬性和方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07