微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹
微信網(wǎng)頁進入，右上角有三個小點，沒錯，我們用到的就是它！我們只要通過將小點列表下的按鈕進行自定義，就可以隨心所欲的分享我們自己的內(nèi)容了。
注意：（WeixinJSBridge只能在微信內(nèi)打開的網(wǎng)頁有效）
按鈕一之------發(fā)送給好友
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("發(fā)送給好友"); });
}
這樣，只要在某處調(diào)用 sendMessage 函數(shù)就可以改變發(fā)送好友的按鈕響應(yīng)了，再點擊，便會彈出“發(fā)送給好友字符串”，是不是很簡單。
分享函數(shù)
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 設(shè)置空就好了。
"img_url": imgUrl, //分享時所帶的圖片路徑
"img_width": "120", //圖片寬度
"img_height": "120", //圖片高度
"link":url, //分享附帶鏈接地址
"desc":"我是一個介紹", //分享內(nèi)容介紹
"title":"標(biāo)題，再簡單不過了。"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/});
注意，如果將這個微信私有函數(shù)單獨拿出來調(diào)用，道理上是講的通，但是！第一次打開頁面直接調(diào)用它的話，無論如何是沒有任何反映的，必須要手動，點一下右上角分享給好友按鈕，待彈出一次通訊錄之后，返回來在直接使用，就沒有任何問題，似乎內(nèi)部初始化什么東西一樣。所以建議直接嵌入到上面那個 綁定方法中。
如下：
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 設(shè)置空就好了。
"img_url": imgUrl, //分享時所帶的圖片路徑
"img_width": "120", //圖片寬度
"img_height": "120", //圖片高度
"link":url, //分享附帶鏈接地址
"desc":"我是一個介紹", //分享內(nèi)容介紹
"title":"標(biāo)題，再簡單不過了。"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/
});
});
}
這樣，你在點擊發(fā)送給好友按鈕，就可以直接彈出通訊錄選擇 ‘單個' 好友進行分享。
同理,分享到朋友圈也是調(diào)用 invoke 私有函數(shù)，只是按鈕綁定名稱不同而已。
function sendMessage(){
......//此處省略發(fā)送給好友代碼
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"", //appid 設(shè)置空就好了。
"img_url": imgUrl, //分享時所帶的圖片路徑
"img_width": "120", //圖片寬度
"img_height": "120", //圖片高度
"link":url, //分享附帶鏈接地址
"desc":"我是一個介紹", //分享內(nèi)容介紹
"title":"標(biāo)題，再簡單不過了。"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/});
});
});
}
注意，on綁定的是 “menu:share:timeline” 不是 "menu:share:appmessage"。invoke里面也是。
還一個微博分享，我沒試過，不知道有沒有用，想玩的試試，一切分享都是調(diào)用當(dāng)前微信帳號分享。
WeixinJSBridge.on('menu:share:weibo', function(argv){
WeixinJSBridge.invoke('shareWeibo',{
"content":dataForWeixin.title+' '+dataForWeixin.url,
"url":dataForWeixin.url
}, function(res){});
});
如果微信瀏覽器內(nèi)部尚未初始化，所有的接口都會是undefined。為了避免進去馬上就調(diào)用出錯，獲取微信初始化完成響應(yīng)事件，初始化完成調(diào)用sendMessage進行綁定。
如下：
if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false); }else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage); }
下面還有幾個小功能：
WeixinJSBridge.call('hideToolbar'); //隱藏右下面工具欄
WeixinJSBridge.call('showToolbar'); //顯示右下面工具欄
WeixinJSBridge.call('hideOptionMenu'); //隱藏右上角三個點按鈕。
WeixinJSBridge.call('showOptionMenu'); //顯示右上角三個點按鈕。
我是一個菜鳥，寫完了，寫的不好，請大家多多包含！
完整測試代碼（用微信打開）：
<!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>微信接口測試</title>
<script>
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 設(shè)置空就好了。
"img_url":"", //分享時所帶的圖片路徑
"img_width":"120", //圖片寬度
"img_height":"120", //圖片高度
"link":"http://m.fzitv.net", //分享附帶鏈接地址
"desc":"極客標(biāo)簽--http://m.fzitv.net", //分享內(nèi)容介紹
"title":"發(fā)現(xiàn) 極客標(biāo)簽 - 做最棒的極客知識分享平臺"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/
});
});
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"", //appid 設(shè)置空就好了。
"img_url":"", //分享時所帶的圖片路徑
"img_width":"120", //圖片寬度
"img_height":"120", //圖片高度
"link":"http://m.fzitv.net", //分享附帶鏈接地址
"desc":"極客標(biāo)簽--http://m.fzitv.net", //分享內(nèi)容介紹
"title":"發(fā)現(xiàn) 極客標(biāo)簽 - 做最棒的極客知識分享平臺"
}, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/
});
});
alert("調(diào)用成功！現(xiàn)在可以通過右上角按鈕分享給朋友或者朋友圈！");
}
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)頁是否在微信中被調(diào)用
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
} else {
alert("調(diào)用失敗，請用微信掃一掃，掃描下面二維碼打開網(wǎng)頁！");
}
</script>
</head>
<body>
<center>
<h2>分享請點擊右上角</h2>
<button onclick="hideMenu()" style="width:100px;height:100px;font-size:16px;">隱藏右上角三個點</button> <br /><br />
<button onclick="showMenu()" style="width:100px;height:100px;font-size:16px;">顯示右上角三個點</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)文章
使用indexOf等在JavaScript的數(shù)組中進行元素查找和替換
使用slice、replace、indexOf等等在JavaScript的數(shù)組中進行元素的查找和替換，感興趣的朋友可以學(xué)習(xí)下2013-09-09
bootstrap modal+gridview實現(xiàn)彈出框效果
這篇文章主要介紹了bootstrap modal+gridview實現(xiàn)彈出框效果，gridview點擊更新彈出填寫信息表單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應(yīng)用都要依靠閉包實現(xiàn)。小編之前一直糊里糊涂的，沒有能夠弄明白JavaScript的閉包到底是什么，有什么用，本文把自己的理解些出來分享一下，希望不理解JavaScript閉包的朋友們看了之后能夠理解閉包！2016-01-01
下面小編就為大家?guī)硪黄狫avaScript Math 對象常用方法總結(jié)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
這篇文章主要介紹了JavaScript讀取本地文件常用方法流程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
this是Javascript語言的一個關(guān)鍵字。它代表函數(shù)運行時，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi)部使用。接下來通過本文給大家分享JavaScript中var that=this所代表的意思，需要的朋友參考下吧2017-02-02
JS實現(xiàn)去除數(shù)組中重復(fù)json的方法示例
這篇文章主要介紹了JS實現(xiàn)去除數(shù)組中重復(fù)json的方法,涉及javascript針對json數(shù)組數(shù)據(jù)的遍歷、判斷、存取等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要分享JavaScript的?3?種工廠模式,工廠模式是設(shè)計模式中最常用的設(shè)計模式之一，這種類型的設(shè)計模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對象的最佳方式，下文關(guān)于工廠模式的更多相關(guān)資料需要的小伙伴可以參考一下2022-04-04
這篇文章主要給大家介紹了js簡單粗暴的發(fā)布訂閱的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家信息介紹了JavaScript中的常見錯誤與異常處理的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01