【微網站開發】之微信內置瀏覽器API使用


  最近在寫微網站,發現了微信內置瀏覽器的很多不稱心的地方:

    1.安卓版的微信內瀏覽器底部總是出現一個刷新、前進、后退的底部欄,寬度很大,導致屏幕顯示尺寸被壓縮

    2.分享當前網站至朋友圈時,分享的圖片一般是網站的截圖或者是首張圖片,而分享的標題一般是網頁title

    3.當微網站圖片很大或者需要加載耗費流量很大時,怎么提醒用戶注意自己的網絡狀態呢?

  就這最簡單的兩個問題,然后百度了一下,看了些研究過這個的牛們的博客,知道怎么搞了

 

  為什么會有下面的toolbar,為什么會有那么個討厭的底部欄?而且這個不同終端不同,安卓是有的,IOS默認沒有,Winphone里面只顯示窄窄的一小條,並且可以上拉

  為了綜合考慮,只能把toolbar禁掉。這樣才能讓微網站首屏顯示長度更大、可以針對於客戶需求開發底部菜單欄;

  禁掉的代碼在微信的官方文檔里面已經給了咯。

  為什么要改分享設置?很明顯,微信內置瀏覽器的上方的標題字數顯示有限,不可能為了分享方便而給網頁起一個怪怪長長的標題,所以只能另想辦法。

  

  什么辦法呢?

  WeixinJSBridge。這個WeixinJSBridge可以認為是微信內置瀏覽器在開發中預留的API接口,可以通過javascript調用API接口實現一些操作。在稍早期的微信版本里面,可以實現一鍵關注、一鍵訪問資料等很多功能,但是隨着微信的改版升級,這些"缺口"已經被堵上許多,這樣也好,讓開發微網站的人能夠更專心的開發微網站,而現在僅存的幾個能夠使用的微網站的小”缺口“基本能滿足我們的使用。

  

  下面放上常用的微信內操作的javascript代碼

  

 1 <script type="text/javascript">
 2     
 3     document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
 4         
 5         /*隱藏底部toolbar欄*/
 6         WeixinJSBridge.call('hideToolbar');
 7         //獲取當前網絡狀態:wifi\2G\3G...
 8         WeixinJSBridge.invoke('getNetworkType',{},function(e){
 9             alert(e.err_msg);
10             /*network_type:wifi         wifi網絡
11             network_type:edge      非wifi,包含3G/2G
12             network_type:fail         網絡斷開連接
13             network_type:wwan     2g或者3g*/
14         });
15         //設置分享到朋友圈的內容
16         sendMessage();
17     });
18     
19     //退出微信內瀏覽器
20     function close_wechat(){
21         if( window.confirm('你確定要離開微網站嗎?') ){
22             WeixinJSBridge.call("closeWindow");
23         }
24     }
25     //初始化分享內容的函數
26     function sendMessage(){
27         WeixinJSBridge.on('menu:share:timeline', function(argv){
28              WeixinJSBridge.invoke('shareTimeline',{
29                 "appid":"",                                              //appid 設置為空
30                 "img_url":"http://www.baidu.com/img/bdlogo.gif",//分享圖片路徑
31                 "img_width":    "120",                            //圖片寬度
32                 "img_height":    "120",                            //圖片高度
33                 "link":"http://www.sina.com.cn/",//源鏈接地址
34                 "desc":"這是介紹,但是介紹一般不會顯示出來",//分享內容介紹
35                 "title":"這是分享的標題。"
36             }, function(res){/*** 回調函數,最好設置為空 ***/});
37         });    
38     } 
39 </script>

  

    整段代碼很簡單,也寫了注釋,這里解釋一點:

      addEventListener('WeixinJSBridgeReady',.....
   這個代碼的作用是通過listener來判斷weixinJSBridge是否准備完畢。可能是因為初始化或者加載的問題,網頁直接加載時不能執行對微信瀏覽器操作的代碼,因為相對應的接口或者說操作對象是undefined,只有在WeixinJSBridgeReady之后調用才有效。

   <!--最后放一下實現的效果,已經把底部欄徹底隱藏了咯-->

   

  

   
    

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM