vue和uni-app的區別有哪些
阿新 • • 發佈:2022-12-01
vue和uni-app的區別:1、uni-app可以通過打包實現一套程式碼多端執行,而vue不行;2、uni-app有自動的框架預載,載入頁面的速度更快,vue沒有;3、uniapp使用小程式的標籤,vue使用web端的標籤;4、uni不支援vue-router,使用自帶的路由。
本教程操作環境:windows7系統、uni-app2.5.1&&vue2.9.6版本、Dell G3電腦。
uniapp和vue的區別
uni-app可以編譯到(頭條,支付寶,微信,QQ,百度)小程式,安卓版,ios版,h5版。通過打包實現一套程式碼多端執行;vue在web上是為單頁應用而生的,在app上,單頁應用會卡死。
uni-app還有自動的框架預載,載入頁面的速度更快。
元件/標籤的變化
以前是html標籤,現在是小程式標籤。
- p 改成 view
- span、font 改成 text
- a 改成 navigator
- img 改成 image
- input 還在,但type屬性改成了confirmtype
- form、button、checkbox、radio、label、textarea、canvas、video
這些還在。- select 改成 picker
- iframe 改成 web-view
- ul、li沒有了,都用view替代
- audio 不再推薦使用,改成api方式,背景音訊api文件
其實老的HTML標籤也可以在uni-app裡使用,uni-app編譯器會在編譯時把老標籤轉為新標籤,比如把p編譯成view。但不推薦這種用法,除錯H5端時容易混亂。
除了改動外,新增了一批手機端常用的新元件
- scroll-view 可區域滾動檢視容器
- swiper 可滑動區域檢視容器
- icon 圖示
- rich-text 富文字(不可執行js,但可渲染各種文字格式和圖片)
- progress 進度條
- slider 滑塊指示器
- switch 開關選擇器
- camera 相機
- live-player 直播
- map 地圖
- cover-view 可覆蓋原生元件的檢視容器
cover-view需要多強調幾句,uni-app的非h5端的video、map、canvas、textarea是原生元件,層級高於其他元件。如需覆蓋原生元件,比如在map上加個遮罩,則需要使用cover-view元件
除了內建元件,還有很多開源的擴充套件元件,把常用操作都進行封裝,DCloud建立了外掛市場收錄這些擴充套件元件,詳見外掛市場
Js
因為uni-app的api是參考小程式的,所以和瀏覽器的js api有很多不同,如
- alert,confirm 改成 uni.showmodel
- ajax axios 改成 uni.request
- cookie、session 沒有了,local.storage 改成 uni.storage
- vue-router沒有了,改成了 uni.navigateTo
uni-app的js api還有很多,但基本就是小程式的api,把wx.request改為uni.request即可。
uni-app在不同的端,支援條件編譯,無限制的使用各端獨有的api,
uniapp自帶路由和請求方式
uni.navigateTo 路由與頁面跳轉
uni.request 網路請求