最近在寫微網站,發現了微信內置瀏覽器的很多不稱心的地方:
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之后調用才有效。
<!--最后放一下實現的效果,已經把底部欄徹底隱藏了咯-->

