uni-app 和 Vue 的區別

2020-10-16 12:00:55

元件/標籤的變化

以前是html標籤,現在是小程式標籤。

  • 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編譯器會在編譯時把老標籤轉為新標籤,比如把div編譯成view。但不推薦這種用法,偵錯H5端時容易混亂。

除了改動外,新增了一批手機端常用的新元件

cover-view需要多強調幾句,uni-app的非h5端的video、map、canvas、textarea是原生元件,層級高於其他元件。如需覆蓋原生元件,比如在map上加個遮罩,則需要使用cover-view元件

除了內建元件,還有很多開源的擴充套件元件,把常用操作都進行封裝,DCloud建立了外掛市場收錄這些擴充套件元件,詳見外掛市場

Js

因為uni-app的api是參考小程式的,所以和瀏覽器的js api有很多不同,如

  1. alert,confirm 改成 uni.showmodel
  2. ajax axios 改成 uni.request
  3. cookie、session 沒有了,local.storage 改成 uni.storage
  4. vue-router沒有了,改成了 uni.navigateTo

uni-app的js api還有很多,但基本就是小程式的api,把wx.request改為uni.request即可。詳見

uni-app在不同的端,支援條件編譯,無限制的使用各端獨有的api,

uniapp自帶路由和請求方式

uni.navigateTo 路由與頁面跳轉
uni.request 網路請求