uni-app與HTML的區別 【轉】

組件/標籤的變化

之前是html標籤,如今是小程序標籤css

  • div 改爲 view
  • span、font 改爲 text
  • a 改爲 navigator
  • img 改爲 image
  • input 還在,但type屬性改爲了confirmtype
  • formbuttoncheckboxradiolabeltextareacanvasvideo 這些還在。
  • select 改爲 picker
  • iframe 改爲 web-view
  • ul、li沒有了,都用view替代
  • audio 再也不推薦使用,改爲api方式,背景音頻api文檔
    其實老的HTML標籤也能夠在uni-app裏使用,uni-app編譯器會在編譯時把老標籤轉爲新標籤。但不推薦這種用法,調試H5端時容易混亂,基於元素的選擇器也會出問題。

除了改動外,新增了一批手機端經常使用的新組件html

除了內置組件,還有不少開源的擴展組件,把經常使用操做都進行封裝,DCloud創建了插件市場收錄這些擴展組件,詳見插件市場

js的變化

運行環境從瀏覽器變成v8引擎

  • 標準js語法和api都支持,好比if、for、settimeout、indexOf等
  • 但瀏覽器專用的window、document、navigator、location對象,只有在瀏覽器中才有,app和小程序都不支持,這意味着依賴document的不少HTML的庫,好比jqurey沒法使用。可是app和小程序支持web-view組件,裏面能夠加載標準HTML,這種頁面仍然支持瀏覽器專用對象window、document、navigator、location

之前的dom操做,改爲vue的MVVM模式

  • alert,confirm 改爲 uni.showmodel
  • ajax 改爲 uni.request
  • cookie、session 沒有了,local.storage 改爲 uni.storage
  • uni-app的js api還有不少,但基本就是小程序的api,把wx.xxx改成uni.xxx便可

css的變化

  • 選擇器有2個變化:*選擇器不支持;元素選擇器裏沒有body,改成了page
  • 單位方面,px沒法動態適應不一樣寬度的屏幕,rem只能用於h五、rpx只能用於微信小程序。爲此uni-app新增了 upx ,通吃全部端、全部屏幕寬度的動態單位 upx
  • uni-app推薦使用flex佈局,並默認就是flex佈局
做者:cyh_d8ac 連接:https://www.jianshu.com/p/2160b8193282 來源:簡書
相關文章
相關標籤/搜索