uniapp與HTML的區別有哪些

這篇“uniapp與HTML的區別有哪些”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“uniapp與HTML的區別有哪些”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

html有什么特點

1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。  3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

區別：1、uniapp是一個框架，而HTML是一種標記語言。2、組件/標簽有差異；例p改成view，span、font改成text，a改成navigator，img改成image。3、uniapp不支持dom操作，HTML支持。

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端時容易混亂，基于元素的選擇器也會出問題。

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

• scroll-view 可區域滾動視圖容器

• swiper 可滑動區域視圖容器

• icon 圖標

• rich-text 富文本（不可執行js，但可渲染各種文字格式和圖片）

• progress 進度條

• slider 滑塊指示器

• switch 開關選擇器

• camera 相機

• live-player 直播

• map 地圖

• cover-view 可覆蓋原生組件的視圖容器

  cover-view需要多強調幾句，uni-app的非h6端的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只能用于h6、rpx只能用于微信小程序。為此uni-app新增了 upx ，通吃所有端、所有屏幕寬度的動態單位 upx

• uni-app推薦使用flex布局，并默認就是flex布局

以上是“uniapp與HTML的區別有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！