首頁 > web前端 > 前端問答 > vue和uni-app的差別有什麼

vue和uni-app的差別有什麼

青灯夜游
發布: 2022-07-25 10:39:40
原創
47590 人瀏覽過

vue和uni-app的差別:1、uni-app可以透過打包實現一套程式碼多端運行,而vue不行;2、uni-app有自動的框架預載,載入頁面的速度更快,vue沒有;3、uniapp使用小程式的標籤,vue使用web端的標籤;4、uni不支援vue-router,使用自帶的路由。

vue和uni-app的差別有什麼

本教學操作環境: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
  1. ajax axios 改成uni.request
  2. cookie、session 沒有了,local .storage 改成uni.storage
  3. vue-router沒有了,改成了uni.navigateTo
uni-app的js api還有很多,但基本上就是小程式的api,把wx.request改為uni.request即可。

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

uniapp自帶路由與請求方式

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


相關推薦:《
vue.js教學

》、《uniapp教學

以上是vue和uni-app的差別有什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板