微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹

更新時間：2015年05月25日 09:22:34 投稿：junjie

這篇文章主要介紹了微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹,本文講解了發(fā)送給好友、分享函數(shù)、隱藏工具欄、隱藏三個點按鈕等功能,需要的朋友可以參考下

微信網(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ù)

復(fù)制代碼代碼如下:

WeixinJSBridge.invoke('sendAppMessage',{

    "appid":"",                                              //appid 設(shè)置空就好了。

    "img_url":  imgUrl,                                   //分享時所帶的圖片路徑

    "img_width": "120",                            //圖片寬度

    "img_height": "120",                            //圖片高度

    "link":url,                                               //分享附帶鏈接地址

    "desc":"我是一個介紹",                            //分享內(nèi)容介紹

    "title":"標題，再簡單不過了。"

   }, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/});

注意，如果將這個微信私有函數(shù)單獨拿出來調(diào)用，道理上是講的通，但是！第一次打開頁面直接調(diào)用它的話，無論如何是沒有任何反映的，必須要手動，點一下右上角分享給好友按鈕，待彈出一次通訊錄之后，返回來在直接使用，就沒有任何問題，似乎內(nèi)部初始化什么東西一樣。所以建議直接嵌入到上面那個綁定方法中。

如下：

復(fù)制代碼代碼如下:

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":"標題，再簡單不過了。"

   }, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/

    });

   });

}

這樣，你在點擊發(fā)送給好友按鈕，就可以直接彈出通訊錄選擇 ‘單個' 好友進行分享。

同理,分享到朋友圈也是調(diào)用 invoke 私有函數(shù)，只是按鈕綁定名稱不同而已。

復(fù)制代碼代碼如下:

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":"標題，再簡單不過了。"

   }, function(res){/*** 回調(diào)函數(shù)，最好設(shè)置為空 ***/});

 });   

  });

}

注意，on綁定的是 “menu:share:timeline” 不是 "menu:share:appmessage"。invoke里面也是。

還一個微博分享，我沒試過，不知道有沒有用，想玩的試試，一切分享都是調(diào)用當前微信帳號分享。

復(fù)制代碼代碼如下:

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進行綁定。

如下：

復(fù)制代碼代碼如下:

if(document.addEventListener){

 document.addEventListener('WeixinJSBridgeReady', sendMessage, false);  }else if(document.attachEvent){

 document.attachEvent('WeixinJSBridgeReady'   , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage);  }

下面還有幾個小功能：

復(fù)制代碼代碼如下:

WeixinJSBridge.call('hideToolbar');                        //隱藏右下面工具欄

WeixinJSBridge.call('showToolbar'); //顯示右下面工具欄

WeixinJSBridge.call('hideOptionMenu');                //隱藏右上角三個點按鈕。

WeixinJSBridge.call('showOptionMenu');              //顯示右上角三個點按鈕。

我是一個菜鳥，寫完了，寫的不好，請大家多多包含！

完整測試代碼（用微信打開）：

復(fù)制代碼代碼如下:

<!docType html>
<html>
<head>

<title>微信接口測試</title>

  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>

您可能感興趣的文章: