微信內建瀏覽器私人介面WeixinJSBridge介紹_javascript技巧
- WBOY原創
- 2016-05-16 15:57:461902瀏覽
微信網頁進入，右上角有三個小點，沒錯，我們用到的就是它！我們只要透過將小點列表下的按鈕進行自訂，就可以隨心所欲的分享我們自己的內容了。
注意：（WeixinJSBridge只能在微信內開啟的網頁有效）
按鈕一之------發送給好友
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("寄給好友"); });
}
這樣，只要在某處調用 sendMessage 函數就可以改變發送好友的按鈕響應了，再點擊，便會彈出“發送給好友字符串”，是不是很簡單。
分享函數
WeixinJSBridge.invoke('sendAppMessage',{
// "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":"",
"img_url": imgUrl, "img_width": "120", "img_height": "120", "link":url, "desc":"我是一個介紹", "title":"標題，再簡單不過了。"
}, function(res){/*** 回呼函數，最好設定為空 ***/
});
});
}
這樣，你在點擊發送給好友按鈕，就可以直接彈出通訊錄選擇 ‘單一' 好友進行分享。
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
// "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'); //顯示右上角三個點按鈕。
我是一個菜鳥，寫完了，寫的不好，請大家多多包含！
完整測試程式碼（用微信開啟）：
<script><br /> function sendMessage(){<br /> WeixinJSBridge.on('menu:share:appmessage', function(argv){<br /> WeixinJSBridge.invoke('sendAppMessage',{<br /> <br /> "appid":"", //appid 設定空就好了。 <br /> "img_url":"", //分享時所帶的圖片路徑<br /> "img_width":"120", //圖片寬度<br /> "img_height":"120", //圖片高度<br /> "link":"<a href="http://www.jb51.net">http://www.jb51.net", //分享附連結位址<br /> "desc":"極客標籤--http://www.jb51.net", //分享內容介紹<br /> "title":"發現 極客標籤 - 做最棒的極客知識分享平台"<br /> }, function(res){/*** 回呼函數，最好設定為空 ***/<br /> <br /> });<br /> });<br /> <br /> WeixinJSBridge.on('menu:share:timeline', function(argv){<br /> <br /> WeixinJSBridge.invoke('shareTimeline',{<br /> <br /> "appid":"", //appid 設定空就好了。 <br /> "img_url":"", //分享時所帶的圖片路徑<br /> "img_width":"120", //圖片寬度<br /> "img_height":"120", //圖片高度<br /> "link":"<a href="http://www.jb51.net">http://www.jb51.net", //分享附連結位址<br /> "desc":"極客標籤--http://www.jb51.net", //分享內容介紹<br /> "title":"發現 極客標籤 - 做最棒的極客知識分享平台"<br /> }, function(res){/*** 回呼函數，最好設定為空 ***/<br /> });<br /> <br /> });</script>
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("呼叫失敗，請用微信掃一掃，掃描下方二維碼打開網頁！");
}
分享請點選右上角