DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 微信內置浏覽器私有接口WeixinJSBridge介紹
微信內置浏覽器私有接口WeixinJSBridge介紹
編輯:JavaScript綜合知識     
這篇文章主要介紹了微信內置浏覽器私有接口WeixinJSBridge介紹,本文講解了發送給好友、分享函數、隱藏工具欄、隱藏三個點按鈕等功能,需要的朋友可以參考下    

微信網頁進入,右上角有三個小點,沒錯,我們用到的就是它!我們只要通過將小點列表下的按鈕進行自定義,就可以隨心所欲的分享我們自己的內容了。

注意:(WeixinJSBridge只能在微信內打開的網頁有效)

按鈕一之------發送給好友

 代碼如下:
function sendMessage(){

WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("發送給好友"); });

}

 

這樣,只要在某處調用 sendMessage 函數就可以改變發送好友的按鈕響應了,再點擊,便會彈出“發送給好友字符串”,是不是很簡單。

分享函數

 

復制代碼 代碼如下:
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 設置空就好了。
"img_url": imgUrl, //分享時所帶的圖片路徑
"img_width": "120", //圖片寬度
"img_height": "120", //圖片高度
"link":url, //分享附帶鏈接地址
"desc":"我是一個介紹", //分享內容介紹
"title":"標題,再簡單不過了。"
}, function(res){/*** 回調函數,最好設置為空 ***/});

 

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

如下:

 

 代碼如下:
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){

WeixinJSBridge.invoke('sendAppMessage',{

"appid":"", //appid 設置空就好了。
"img_url": imgUrl, //分享時所帶的圖片路徑
"img_width": "120", //圖片寬度
"img_height": "120", //圖片高度
"link":url, //分享附帶鏈接地址
"desc":"我是一個介紹", //分享內容介紹
"title":"標題,再簡單不過了。"
}, function(res){/*** 回調函數,最好設置為空 ***/

});

});
}

 


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

同理,分享到朋友圈也是調用 invoke 私有函數,只是按鈕綁定名稱不同而已。

 

 代碼如下:
function sendMessage(){



......//此處省略發送給好友代碼



WeixinJSBridge.on('menu:share:timeline', function(argv){

WeixinJSBridge.invoke('shareTimeline',{

"appid":"", //appid 設置空就好了。
"img_url": imgUrl, //分享時所帶的圖片路徑
"img_width": "120", //圖片寬度
"img_height": "120", //圖片高度
"link":url, //分享附帶鏈接地址
"desc":"我是一個介紹", //分享內容介紹
"title":"標題,再簡單不過了。"
}, function(res){/*** 回調函數,最好設置為空 ***/});

});

});

}

 

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

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

 

 代碼如下:
WeixinJSBridge.on('menu:share:weibo', function(argv){
WeixinJSBridge.invoke('shareWeibo',{
"content":dataForWeixin.title+' '+dataForWeixin.url,
"url":dataForWeixin.url
}, function(res){});
});

 


如果微信浏覽器內部尚未初始化,所有的接口都會是undefined。為了避免進去馬上就調用出錯,獲取微信初始化完成響應事件,初始化完成調用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 設置空就好了。
"img_url":"", //分享時所帶的圖片路徑
"img_width":"120", //圖片寬度
"img_height":"120", //圖片高度
"link":"http://www.3lian.net", //分享附帶鏈接地址
"desc":"極客標簽--http://www.jb51.net", //分享內容介紹
"title":"發現 極客標簽 - 做最棒的極客知識分享平台"
}, function(res){/*** 回調函數,最好設置為空 ***/

});
});

WeixinJSBridge.on('menu:share:timeline', function(argv){

WeixinJSBridge.invoke('shareTimeline',{

"appid":"", //appid 設置空就好了。
"img_url":"", //分享時所帶的圖片路徑
"img_width":"120", //圖片寬度
"img_height":"120", //圖片高度
"link":"http://www.3lian.net", //分享附帶鏈接地址
"desc":"極客標簽--http://www.jb51.net", //分享內容介紹
"title":"發現 極客標簽 - 做最棒的極客知識分享平台"
}, function(res){/*** 回調函數,最好設置為空 ***/
});

});


alert("調用成功!現在可以通過右上角按鈕分享給朋友或者朋友圈!");

}

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);
}

//判斷網頁是否在微信中被調用
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
} else {
alert("調用失敗,請用微信掃一掃,掃描下面二維碼打開網頁!");
}

</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;">隱藏下面導條</button> <br /><br />
<button onclick="showTool()" style="width:100px;height:100px;font-size:16px;">顯示下面導條</button> <br /><br />
</center>
</body>

</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved