首頁 web前端 uni-app uniapp與HTML5區別

uniapp與HTML5區別

Dec 09, 2020 am 10:23 AM
html5 uniapp

uniapp和HTML5差異:1、uniapp是一個使用Vue.js開發所有前端應用的框架,而HTML5是建構Web內容的一種語言描述方式;2、uniapp不支援dom操作,而H5端有dom物件;3、uniapp不支援過濾器等等。

uniapp與HTML5區別

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

推薦(免費):uni-app開發教學

uniapp是使用 Vue.js 開發所有前端應用程式的框架,開發者編寫一套程式碼,可發佈到iOS、Android、Web(響應式)、以及各種小程式(微信/支付寶/百度/頭條/QQ/釘子/淘寶)、快應用等多個平台。

HTML5是建構Web內容的一種語言描述方式。 HTML5是網路的下一代標準,是建構以及呈現網路內容的語言方式.被認為是互聯網的核心技術之一。 HTML產生於1990年,1997年HTML4成為網路標準,並廣泛應用於網路應用的開發。

uniapp支援跨行動端開發,如果只做H5端,用uniapp其實和用vue開發沒什麼差別,vue能用的插件,uniapp也能用。

uniapp的效能問題主要集中在app端,做H5和VUE的開發體驗是一致的。

一、標籤的差異

二、元件的差異

三、JS的變化

四、主要差異

uniapp和h5主要差別在於uniapp不支援dom操作(H5端有dom物件)、不支援過濾器,這和微信小程式是一致的。

五、共同點

1、uniapp和h5共同的優點:一端多用,做單一品種比較不錯,簡單方便,小巧。

2、uniapp和h5共同的缺點:與原生相比在表現上目前是不可跨越的鴻溝。

六、APP應用架構

uni-app本來就可以編譯打包成為WebApp,為什麼很多人還要用原生APP套殼呢?這不是增加負擔麼?其實,這是由於專案中的需求決定的,先使用uni-app開發H5端,暫時uni-app沒有辦法達到目標,再使用原生APP互動完成,達到特定需求。

1、開發方面

(1)原生APP

不同行動作業系統(iphone、ipad、Android)需要各自開發 。開發維護成本高、開發速度慢、APP上線審核流程複雜且慢。

(2)WebApp

因為運行在行動裝置的瀏覽器上,所以只需要一個開發專案。開發成本低、開發速度快。

2、功能面

(1)原生APP

可呼叫行動終端的硬體裝置(麥克風、相機、簡訊、GPS、藍牙),實現功能豐富。

(2)WebApp

類比電腦端的網頁,更多的是頁面展示類別的APP。只能使用有限的行動硬體設備功能。

3、應用程式安裝和版本控制方面

(1)原生APP

#安裝:應用程式商店|APP Store 下載,可以節省頻寬成本、可以存取本機資源、快取.

版本:使用者自由選擇是否更新版本。新舊版本均需維護,維護成本高

(2)WebApp

安裝:透過行動裝置上的瀏覽器訪問,軟體更新只需要更新伺服器就好

版本:無需安裝,節省行動終端的記憶體空間,所有使用者同一個版本,版本更新速度方便,直接伺服器更新資料即可,即時上線

4、載入速度方面

( 1)原生APP

由「雲端伺服器資料應用程式客戶端」所構成,APP應有的所有UI元素、資料內容、邏輯架構均安裝在行動終端上。訪問時,只需要加載數據,應用頁面框架無需下載,所以加載速度更快,頁面響應更快。可線下使用。

(2)WebApp

開啟一個頁面,都需要重新載入頁面的所有元素,存取速度受行動終端效能和網路環境的限制,導致載入速度慢,而且操作頻繁容易卡死。

5、混合APP

優點:相容多平台、順利存取行動裝置功能、應用程式商店下載(網頁套用原生應用程式的外殼)

缺點:使用者體驗不如原生,效能稍慢

6、總結

原生APP偏向交互,注重使用者體驗;Web App偏向與瀏覽器簡單的交互,用於資訊展示。有些功能需要存取硬件,則使用原生APP。

現在流行的方法是將原生APP與Web App進行融合,核心功能使用原生APP,內容展示等輔助簡單功能使用Web App。這樣便於更新、確保核心功能的互動體驗。

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

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++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 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

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

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

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

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

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

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

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

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

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

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles