首頁 web前端 前端問答 uniapp與HTML的差別是什麼

uniapp與HTML的差別是什麼

Feb 24, 2021 pm 05:08 PM
html uni-app

區別:1、uniapp是一個框架,而HTML是一種標記語言。 2.組件/標籤有差異;例p改成view,span、font改成text,a改成navigator,img改成image。 3.uniapp不支援dom操作,HTML支援。

uniapp與HTML的差別是什麼

本教學操作環境:windows7系統、uni-app2.5.1&&HTML5版本、thinkpad t480電腦。

uni-app與HTML的差異

元件/標籤的變更

#以前是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編譯器會在編譯時把老標籤轉為新標籤。但不推薦這種用法,調試H5端時容易混亂,基於元素的選擇器也會出問題。

推薦:《uni-app開發教學

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

  • 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的變化運行環境從瀏覽器變成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只能用於h5、rpx只能用於微信小程式。為此uni-app新增了upx ,請通吃所有端、所有螢幕寬度的動態單位 upx
  • uni-app建議使用flex佈局,並預設為flex佈局
  • 更多程式相關知識,請造訪:
程式設計影片

! !

以上是uniapp與HTML的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

HTML 中的巢狀表

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格邊框

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

在 HTML 中移動文字

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

您如何在PHP中解析和處理HTML/XML?

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕

See all articles