移動前端工做的那些事---前端製做之微信小技巧篇

隨着微信的愈來愈大衆化，微信的使用程度也愈來愈高。隨之，產生了一種新的推廣模式，即微信推廣。在這個微信的大平臺上會衍生出許許多多的推廣手段。而移動前端做爲服務於手機用戶的手機網頁技術，也不可避免的加入進來。

 

一些客戶不只僅知足於本身的網站能夠在手機瀏覽器上完美的展示出來，同時還要求能夠在微信中進行普遍推廣。這就要求移動前端的製做者在製做移動端網站的過程當中，還要考慮是否兼容微信的推廣。

 

就製做技術而言，若是能夠完美的在手機瀏覽器中顯示，那麼在微信推廣裏也能夠完美顯示。由於微信中調用的網頁引擎就是你手機支持的網頁引擎。但在微信中顯示的網頁和在手機瀏覽器中顯示的網頁仍是有一些細微的差異，這些細微的差異則決定了一些使用小技巧的可能。

 

微信對手機網頁的支持不是百分之百的，它由於自身業務發展的須要，對網站中的a標籤進行了二次封裝定義。一些使用在a標籤的js代碼，在某些特定狀況下不產生效果了。而有些a標籤則莫名的產生了一些問題。

 

我舉2個例子來講明：

 

例子1：<a href="tel:400-4000-0000" >XXX</a>

這個a標籤裏的href調用的是手機號碼。當點擊這個a標籤的時候則彈出是否撥打該號碼的提示。在手機瀏覽器中使用是沒有任何問題的，但在微信中，在安卓 系統手機，微信5.0.1以上版本時該標籤就失效了。（最新的微信版本是否解決了這個問題目前還不清楚）。這種狀況下，將：

<a href="tel:400-4000-0000" >XXX</a>改成

<a link="tel:400-4000-0000" >

則能夠解決部分安卓機型，（但不是所有的），有些機型依然不行。這個和微信客戶端有關。目前沒有找到滿意的解決辦法。

 

例子2：

這個例子比較抽象。我截圖說明：

 

當點擊閱讀全文的時候進入到一個網站的首頁，這時這個首頁下面的三個按鈕則是使用<a>標籤製做的，當點擊其中一個按鈕時，他會莫名其妙的跳 回到首頁。這個是因爲當前微信端調用的是微信的視圖窗口，而非自己手機瀏覽器窗口。當點擊a標籤的時候，它會由當前的微信視圖窗口自動跳到由微信調用的手 機瀏覽器窗口上。因此纔會出現這種狀況，解決這種狀況的出現則加上如下代碼便可：說原理其實就是阻止了a標籤的跳轉：

$(document).on("click","a",function (event){
    event.preventDefault();
    if ($(event.target).attr("href")){
        location.href = $(event.target).attr("href");
    } else {
        location.href = $(event.target).parent().attr("href");
    }

}
);

 

這樣一來，就能夠在微信端視圖窗口中阻止了a標籤的跳轉，也就是阻止了由微信端視圖窗口跳到微信端調用的手機瀏覽器窗口的動做了。

 

可能有人會以爲這裏有點繞。沒有關係，介紹下面的小技巧的時候，再發一張截圖就能夠說明問題了。也就不繞了。

 

剛纔的這個界面是經過微信端的閱讀全文來進入的。此時進入的是微信端本身的視圖窗口，而非微信端調用手機瀏覽器的窗口！可是若是我在這個頁面中，隨便點擊 一個可跳轉的按鈕，再進入新的頁面的時候，這個時候就不是微信端本身的視圖窗口了。而是來到了微信端調用手機瀏覽器的窗口，如下是截圖：

 

注意我畫紅圈的地方，若是出現了這個工具條則證實你如今已經在微信端調用手機瀏覽器的窗口中了。而
微信端本身的視圖窗口是不帶這個工具條的。就像剛纔的圖那樣

這個是不帶工具條的。

 

這個就是微信端本身的視圖窗口和微信調用手機瀏覽器窗口兩者的最大區別！

 

我使用的手機是iphone4s，衆所周知如今的手機屏幕是愈來愈大。但仍是有至關一部分人在使用iphone4s，4s的屏幕較小。因此可視區域也較 小。尤爲高度！這個時候問題就來了。若是當前的網站只有一個頁面的話，在微信端窗口中瀏覽還尚可，但若是是多個網頁的話，當跳轉到新的頁面的時候微信會調 用手機瀏覽器窗口了。此時頁面中就會出現剛纔我畫紅圈部分的工具條。這個工具條再加上上面的標題欄工具條。極大的減小了可視區域的面積。可否將它去掉呢？ 答案是能夠的。加入如下代碼就能夠去掉微信中下面的工具條：

 

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){

  WeixinJSBridge.call('hideToolbar');

});

 

其實不光能夠去掉下面的工具條，還能夠去掉其餘在微信中一些功能性按鈕。好比右上角的功能按鈕：

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){

  WeixinJSBridge.call('hideOptionMenu');
});

這個只是不常常用。若是功能按鈕都隱藏了。像什麼發送給朋友，分享到朋友圈等功能就不能用了。這也就失去了微信推廣的功能。失去了使用微信的本質。除非有特殊需求，通常是不會隱藏該按鈕的，沒有多大現實意義。

 

 

 

原文連接：http://blog.sina.com.cn/s/blog_3f1fc8950102v0un.html