移動端知識梳理

• 插件：

  • swiper
  • iscroll
  • ejs(主要應用於node.js)
  • zepto(同jq用法同樣，更適合於移動端)
  • less

• H5:

  • 新增標籤
    • header
    • footer
    • section
    • time
    • main
    • nav
    • ...
  • 對於input新增表單元素屬性，以及新增類型的優點
    • email
    • tel
    • url
    • search
    • date
    • time
    • number
    • color
    • week
    • month
    • range(音量)
  • ->在移動端表單元素中沒有keydown/keyup事件(移動端的見怕是虛擬鍵盤)，這兩個事件(輸入內容事件)統一使用input事件代替:[ELEMENT].oninput=function(){}
  • ->placeholder:在IE(10如下，10兼容，可是不是很好，能夠理解爲不兼容)下不兼容，如何使用JS來模擬。

• audio/video:移動端音頻/視頻(公認爲本次升級最偉大之處)

  • ->在真實項目中應用audio都是作背景音樂播放(專門作音樂播放器的不多，基本上就是作音樂的公司)：src、preload、autoplay、loop、controls、play()、pause()、paused...
  • ->真實項目中的video不是直接使用最簡單的內置播放器(用到的屬性和方法和audio差很少)，就是直接使用別人封裝好的播放器插件：tvplayer、騰訊視頻插件...

• 新增長的一些JS的API

  • ->本地存儲:webStorage(localStorage/sessionStorage)
  • ->離線緩存(不是很穩定):xxx.manifest(手機斷網狀況下依然能夠觀看網頁中的內容，就是應用離線緩存技術事先把內容存儲到本地)
  • ->webSocket/socket.io
  • ->獲取地理位置的方法:真實項目中獲取到經緯度、精準度後，會把這些信息發送給第三方地圖接口，從而獲取到咱們須要的一些信息

• CSS3

  • 選擇器
  • 倒入字體圖標
  • 經常使用屬性:border-radius/box-shadow/text-shadow...
  • 背景變革:background-image/-color/-position(雪碧圖、圖片精靈、)CSS-Sprite/-attachment
  • background-size/-clip/-origin
  • 背景顏色的線性和放射性漸變
  • filter的高級應用：反色、灰度
  • 盒子模型：
    • box-sizing：border-box/content-box(默認)
    • columns：多列布局
    • flex：彈性伸縮盒子模型
    • 變形：transform
    • 動畫：transition animation

• 響應式佈局： + ->PC和移動端用一套的使用(外層盒子寬度百分比，其他都是寫死的，拿@media(國際通用規範)在不一樣設備中一點點的調整樣式) + ->REM(懶人作法)，通常應用於當卡項目僅僅是在移動端設備上訪問的(在PC端部兼容) + ->flex不是響應式佈局方案，僅僅是某些特殊的效果用這個來作而已

• webApp/Hybrid模式： 把咱們作的H5頁面運行在瀏覽器中或者其餘App的webView中就是基於Hybrid混合模式開發的webApp項目 微信二次開發僅僅是在咱們寫好的H5頁面基礎上調取微信提供的接口(調取接口的時候須要配合後臺使用)： https://mp.weixin.qq.com/wiki

• 兼容：

  • 兼容ios和安卓
    • -webkit-transfrom：
    • transfrom：