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支援。
本教學操作環境: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模式
- ajax 改成 uni.request
- cookie、session 沒有了,local.storage 改成 uni .storage
- uni-app的js api還有很多,但基本上就是小程式的api,把wx.xxx改為uni.xxx即可
- css的變化
- 單位方面,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 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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