首頁 > web前端 > js教程 > 主體

微信內建瀏覽器私人介面WeixinJSBridge介紹_javascript技巧

WBOY
發布: 2016-05-16 15:57:46
原創
1898 人瀏覽過

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

注意:(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){/*** 回呼函數,最好設定為空 ***/
 
    });
 
   });
}




這樣,你在點擊發送給好友按鈕,就可以直接彈出通訊錄選擇 ‘單一' 好友進行分享。
同理,分享到朋友圈也是呼叫 invoke 私有函數,只是按鈕綁定名稱不同而已。


複製程式碼

 
 ......//此處省略發送給好友代碼
 
 
 
   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("呼叫失敗,請用微信掃一掃,掃描下方二維碼打開網頁!");
 }
 


 

 

分享請點選右上角


 


 


    


    


 


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板