時間：2016.5.21-08:24
作者：三月懶驢
推薦萌新入微信前端開發(fā)坑的技術(shù)點有：weui + vue.js

前言

由于最近在做react-native的應用開發(fā)，接觸到很多原來做原生開發(fā)的朋友也來學習react-native。一次群里閑談中，有人拋出一句，真不懂你們前端那么喜歡做輪子。于是就演化成：前端老司機們都喜歡一言不合就寫輪子 或者對方不想和你說話，并向你拋出新的輪子等等各種表情包。

（停止死循環(huán)回到那個現(xiàn)實）在中國，有著偉大的企鵝帝國把握了大部分網(wǎng)站的入口。沒錯，你說你的網(wǎng)店除了投放到朋友圈能騙幾個錢之外，誰還會額外復制粘貼到瀏覽器去打開。而在這個入口，企鵝用了號稱很好用的X5內(nèi)核取代系統(tǒng)webview。于是，做前端的我們，坑坑洼洼的，一路跌過來了。

于是乎，本文只是給萌新看看在移動前端開發(fā)(主要是微信端)上踩過的一些坑和一些入門的鏈接集合。

正文

入門

聽說大部分人學習前端的HTML+CSS+JS的基礎(chǔ)都在這里：w3school
別說萌新，就算老鳥也是回來這里面查一查忘記的東西的。所以入門的時候不用個個死記

這才是正文

因為這是長期訴說坑的文章，所以那天我掉坑里了也會爬回來更新的。

1. meta元素

在移動端上，這個是很重要的，那天你發(fā)現(xiàn)你的網(wǎng)站的一些長的數(shù)字和郵箱在手機瀏覽器上變成了超鏈接樣式的，可以在meta里面禁止。其他還有viewport在這里也是很重要的定西，這篇的文章看完基本都懂:萌新傳送門

2. 布局的一些事情

在微信沒有發(fā)布weui這個樣式框架之前，有著很多很多關(guān)于布局的方案，其中比較好用的有下面兩個
1.web app變革之rem[注1]
2.使用Flexible實現(xiàn)手淘H5頁面的終端適配

簡單說說這兩個方案吧。方案2是手淘出的：通過修改viewport進行縮放，但在部分手機（例如華為榮耀，再例如HTC）上就會有奇效，嗯，就是不生效。
方案1也是一個不錯的方法，但是我沒用過幾次，原理是根據(jù)不同屏幕給REM一個標準值，然后把CSS的單位變成REM。那么這樣標準值根據(jù)屏幕變動而變動，所有值都會計算一遍來自動適應。但！問題是，大部分安卓手機對于rem的小數(shù)部分好像都忽略的，在追求比較精度的計算的時候是一個很致命的缺點。因此在很多時候選擇方案2的小部分手機有問題比較好。

看不懂沒所謂……簡單來說就是第二個方案比較適合

注1:傳送門：關(guān)于REM是什么鬼 && REM還沒理解完，vw/vh又來了

那么現(xiàn)在weui來了，我們可以安安心心用上flex了（其實也不安心，只不過在遇到不兼容的時候，我們可以理直氣壯的說，微信團隊也是這樣做的，這也沒辦法。）

新人入門去了解flex其實不難,但是Flex也是很坑的，09年出了一套標準之后，后來2012年又改了。因此有09語法和12語法兩套標準。某X5內(nèi)核不知道為啥，用的是09語法（安卓2.3以上和IOS都是12語法的）。于是坑又來了——看我傳送門大法：

1.阮一峰的網(wǎng)絡(luò)日志:Flex入門教程
2.Flex布局新舊混合寫法詳解
3.Flex碰到的坑

3. CSS的一些事情

說完布局的東西，那可以來談談CSS，CSS里面除了正規(guī)的樣式設(shè)計之外，還有很多奇門淫術(shù)，下面想到啥就列舉啥

1. 徒手畫各種圖形
2. 單/多行文本溢出變省略號：這里注意的是，如果只做移動端開發(fā)的話，學習里面的CSS實現(xiàn)方法就夠了。
3. 使用CSS mask 實現(xiàn)圖片的斜線拼接：其實叫設(shè)計師姐姐拼接好圖就夠了～沒用過幾次
4. 還有一些比較生僻但是在移動端需要注意的CSS屬性

     //prevent callout to copy image, etc when tap to hold
     -webkit-touch-callout: none;
    //prevent webkit from resizing text to fit
    -webkit-text-size-adjust: none;
    //按鈕點擊時候高亮顏色，如果自己做點擊效果就需要設(shè)置透明度為0屏蔽這個
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    //如果設(shè)置為none;,則用戶將無法在該文本塊中開始選擇文本。對輸入框選擇這個屬性的話，輸入框無法正常工作
    -webkit-user-select: none; 
    //允許獨立的滾動區(qū)域和觸摸回彈
    -webkit-overflow-scrolling:touch

5. 當然的說說CSS3的動畫：移動端做動畫的主力

   1. 先說幀動畫，因為我有此神器，請注意要翻墻。好的，幀動畫說完...（當然也有一些預設(shè)好的CSS庫，但是這個所見即所得的東西不是更好嗎?。?/li>
   2. 過渡動畫和變形：transform、transition。主要說說性能優(yōu)化方面：傳送門
      下面是我自己日常工作總結(jié)一下性能優(yōu)化：
      2.1 動畫對象應該脫離文檔層，以免文檔重排——絕對定位
      2.2 動畫對象優(yōu)先使用全局變量存儲。
      2.3 3D變形開啟GPU加速
      2.4 動畫過程閃爍的時候：backface-visibility / perspective ： hidden / 1000
      2.5.盡量少用classname來獲取元素

6. 新手比較多遇到的不是bug的bug（新人問得多的暫時就是這兩個）

   1. 子節(jié)點margin-top綁架父節(jié)點
   2. 子節(jié)點float之后，無法撐開父節(jié)點

4. HTML5的一些事情

HTML5里面新增了很多東西，一股腦塞下來真的很難說清，在做項目中主要用的幾個無非就是video,audio,canvas，其他那些語義化的東西如同nav，header等等，能記上用著對于SEO優(yōu)化也是不錯的。

1. 主要吐槽一下video！自從吳亦凡入伍新聞刷爆朋友圈這個之后，很多廣告商想模仿，但僅僅是做到形似而已。X5上有一個很流氓的做法：視頻播放跳出了DOM去。以下是我做的X5（TBS），原生安卓（6.0），IOS(9)下video的對比（這次數(shù)據(jù)是2016年1月份做的）

<video 
    class="video" 
    x-webkit-airplay="true" 
    webkit-playsinline="true" 
    preload="auto"
>
    <source src="/video/1.mp4" type="video/mp4">
</video>

1.播放前
1.1. 原生安卓： 不顯示，并且不支持poster屬性（是視頻未加載的時候顯示圖片屬性）
1.2. TBS：覆蓋上內(nèi)置播放器，先黑屏，后有微信自帶加載進度，video一切屬性，能讀不能改
1.3. IOS：視頻過大會卡在第一幀（發(fā)送請求加載video，先返回一段關(guān)于視頻的信息。如果緩存已經(jīng)存在的話，則直接從緩存拿出來播。這段請求導致即時緩存已經(jīng)有的視頻也會在網(wǎng)絡(luò)不好的時候卡在第一幀）
2.播放的時候
2.1. 原生：無特殊事件
2.2. TBS：如果視頻不在可視區(qū)域內(nèi)/或者video標簽尺寸比例和video不符合，就會跳出瀏覽器全屏播放
2.3. IOS：無特殊事件
3.播放后：
3.1. 原生安卓：無特殊事件
3.2. TBS：無特殊事件
3.3. IOS：無特殊事件

2.auido：video上因為微信的X5而痛不欲生！但是auido卻又因為微信的而可以自動播放。auido的自動播放屬性只能在PC端有效，而所有移動端，都是禁止流媒體的自動加載的（加載都不行了，怎么播放?。?，只有高級別事件觸發(fā)之后才能播放：比如說第一次touch了屏幕，才就會加載。而從很久以前，微信就有一個JS對接到應用去的API:WeixinJSBridgeReady。在這里面調(diào)用音頻播放即可使用實現(xiàn)移動端的自動播放。就算是一年前出了JS-sdk，監(jiān)聽WeixinJSBridgeReady也是有效的。

document.addEventListener("WeixinJSBridgeReady", function () {
    document.getElementById('sound').play()
}, false)

例子可以移動設(shè)備訪問:這里

3. canvas，做游戲必備的東西。當然你也會用到它的繪畫去做圖片上傳的預覽和修改。詳細學習地址

4. svg，使用svg去繪制形狀，icon和做動畫都是一絕～類似新的X5內(nèi)核對SVG支持更加好了。學習地址

5. JS的一些事情

js的框架那是一個叫多！回顧這幾年，移動時代到來，jq的統(tǒng)治地位開始松動。angularjs作為當時最優(yōu)秀的MV框架，一騎絕塵，成為各大公司招聘前端的必備條件。而react-js卻又憑借react-native上位，把MV的概念再砍去一層，號稱僅僅是view層次的框架，傲視群雄，連angular都自愧不如，揮刀自宮，回爐重做，誕生了不一樣的自我——angular2。而made in chain的vue也憑借自身小巧而上位，除此之外還有如同Emberjs，Elm等等各種框架分割大家的視野。相比以前JQ時代的把元素從document里面找出來，賦予事件。這些新的流行框架都是偏向于，把元素和事件寫進document去。新舊時代的流行庫，在概念上有了巨大的改變。而很多時候，選擇怎樣的庫，還得看項目的規(guī)模還有項目的開發(fā)時間。因為不管你選擇原生JS去開發(fā)還是各種各樣的庫去入坑，你都要明白一件事

不要相信在野黨，上位之后都一樣——不要相信新的框架/庫有多好，你用了之后都要填坑。

建議萌新入門熟練原生JS之后必學JQ，新框架太多了，可以在angular/react/vue三選一。畢竟市面上招聘來說，這三個出現(xiàn)最多，而這三個的方向也大致一樣。

最后

最后貼一個防打臉金句

請相信我
我所說的一切
都是錯的
——和菜頭