區(qū)別：uniapp使用小程序的標(biāo)簽，vue使用web端的標(biāo)簽；除此之外，還新增了一批手機(jī)端常用的新組件。愛(ài)掏網(wǎng) - it200.comuniapp的api是參考小程序的，因而與瀏覽器端的api有所不同。愛(ài)掏網(wǎng) - it200.comuni不支持vue-router，使用自帶的路由。愛(ài)掏網(wǎng) - it200.com

其實(shí)老的HTML標(biāo)簽也可以在uni-app里使用，uni-app編譯器會(huì)在編譯時(shí)把老標(biāo)簽轉(zhuǎn)為新標(biāo)簽，比如把p編譯成view。愛(ài)掏網(wǎng) - it200.com但不推薦這種用法，調(diào)試H5端時(shí)容易混亂。愛(ài)掏網(wǎng) - it200.com

除了改動(dòng)外，新增了一批手機(jī)端常用的新組件

• scroll-view 可區(qū)域滾動(dòng)視圖容器

• swiper 可滑動(dòng)區(qū)域視圖容器

• icon 圖標(biāo)

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

• progress 進(jìn)度條

• slider 滑塊指示器

• switch 開(kāi)關(guān)選擇器

• camera 相機(jī)

• live-player 直播

• map 地圖

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

cover-view需要多強(qiáng)調(diào)幾句，uni-app的非h5端的video、map、canvas、textarea是原生組件，層級(jí)高于其他組件。愛(ài)掏網(wǎng) - it200.com如需覆蓋原生組件，比如在map上加個(gè)遮罩，則需要使用cover-view組件

除了內(nèi)置組件，還有很多開(kāi)源的擴(kuò)展組件，把常用操作都進(jìn)行封裝，DCloud建立了插件市場(chǎng)收錄這些擴(kuò)展組件，詳見(jiàn)插件市場(chǎng)

js的變化

js的變化，分為運(yùn)行環(huán)境變化、數(shù)據(jù)綁定模式變化、api變化3部分。愛(ài)掏網(wǎng) - it200.com

• 運(yùn)行環(huán)境從瀏覽器變成v8引擎

標(biāo)準(zhǔn)js語(yǔ)法和api都支持，比如if、for、settimeout、indexOf等。愛(ài)掏網(wǎng) - it200.com

但瀏覽器專用的window、document、navigator、location對(duì)象，包括COOKIE等存儲(chǔ)，只有在瀏覽器中才有，app和小程序都不支持。愛(ài)掏網(wǎng) - it200.com

可能有些人以為js等于瀏覽器里的js。愛(ài)掏網(wǎng) - it200.com其實(shí)js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基于js規(guī)范補(bǔ)充了window、document、navigator、location等專用對(duì)象。愛(ài)掏網(wǎng) - it200.com

在uni-app的各個(gè)端中，除了h5端，其他端的js都運(yùn)行在一個(gè)獨(dú)立的v8引擎下，不是在瀏覽器中，所以瀏覽器的對(duì)象無(wú)法使用。愛(ài)掏網(wǎng) - it200.com如果你做過(guò)小程序開(kāi)發(fā)，對(duì)此應(yīng)當(dāng)很了解。愛(ài)掏網(wǎng) - it200.com

這意味著依賴document的很多HTML的庫(kù)，比如jqurey無(wú)法使用。愛(ài)掏網(wǎng) - it200.com

當(dāng)然app和小程序支持web-view組件，里面可以加載標(biāo)準(zhǔn)HTML，這種頁(yè)面仍然支持瀏覽器專用對(duì)象window、document、navigator、location。愛(ài)掏網(wǎng) - it200.com

• 以前的dom操作，改成vue的MVVM模式

現(xiàn)在前端趨勢(shì)是去dom化，改用mvvm模式，更簡(jiǎn)潔的寫(xiě)法，大幅減少代碼行數(shù)，同時(shí)差量渲染性能更好。愛(ài)掏網(wǎng) - it200.com

uni-app使用vue的數(shù)據(jù)綁定方式解決js和dom界面交互的問(wèn)題。愛(ài)掏網(wǎng) - it200.com

如果你想改變某個(gè)dom元素的顯示內(nèi)容，比如一個(gè)view的顯示文字：

以前是給view設(shè)id，然后js里通過(guò)選擇器獲取dom元素，進(jìn)一步通過(guò)js進(jìn)行賦值操作，修改dom元素的屬性或值。愛(ài)掏網(wǎng) - it200.com

如下演示了一段代碼，頁(yè)面中有個(gè)顯示的文字區(qū)和一個(gè)按鈕，點(diǎn)擊按鈕后會(huì)修改文字區(qū)的值

  
     
         
     
     
       123  
       修改為789  
     

現(xiàn)在的做法，是vue的綁定模式，給這個(gè)dom元素綁定一個(gè)js變量，在script中修改js變量的值，dom會(huì)自動(dòng)變化，頁(yè)面會(huì)自動(dòng)更新渲染

如果你學(xué)過(guò)小程序的數(shù)據(jù)綁定，但不了解vue，要注意：

• 小程序的數(shù)據(jù)綁定參考了vue，但自己修改了一些。愛(ài)掏網(wǎng) - it200.com在uni-app中只支持標(biāo)準(zhǔn)的vue，不支持小程序的數(shù)據(jù)綁定語(yǔ)法

• 小程序里的setData在uni-app里并不存在，因?yàn)関ue是自動(dòng)雙向數(shù)據(jù)綁定的。愛(ài)掏網(wǎng) - it200.com直接通過(guò)賦值方式修改數(shù)據(jù)，如果數(shù)據(jù)綁定到界面上，界面會(huì)自動(dòng)更新渲染

• js api的變化
  

因?yàn)閡ni-app的api是參考小程序的，所以和瀏覽器的js api有很多不同，如

• alert,confirm 改成 uni.showmodel

• ajax 改成 uni.request

• COOKIE、session 沒(méi)有了，local.storage 改成 uni.storage

uni-app的js api還有很多，但基本就是小程序的api，把wx.xxx改為uni.xxx即可。愛(ài)掏網(wǎng) - it200.com

uni-app在不同的端，支持條件編譯，無(wú)限制的使用各端獨(dú)有的api，

css的變化

標(biāo)準(zhǔn)的css基本都是支持的。愛(ài)掏網(wǎng) - it200.com

選擇器有2個(gè)變化：*選擇器不支持；元素選擇器里沒(méi)有body，改為了page。愛(ài)掏網(wǎng) - it200.com微信小程序即是如此。愛(ài)掏網(wǎng) - it200.com

page{  
}

單位方面，px無(wú)法動(dòng)態(tài)適應(yīng)不同寬度的屏幕，rem無(wú)法用于nvue/weex。愛(ài)掏網(wǎng) - it200.com如果想使用根據(jù)屏幕寬度自適應(yīng)的單位，推薦使用rpx，全端支持。愛(ài)掏網(wǎng) - it200.com 尺寸單位文檔

uni-app推薦使用flex布局，并默認(rèn)就是flex布局，這個(gè)布局思路和傳統(tǒng)流式布局有點(diǎn)區(qū)別。愛(ài)掏網(wǎng) - it200.com但flex的有趣在于，不管是什么技術(shù)都支持這種排版，web、小程序/快應(yīng)用、weex/rn、原生的iOS、Android開(kāi)發(fā)，全都支持flex。愛(ài)掏網(wǎng) - it200.com它是通吃所有端的新一代布局方案。愛(ài)掏網(wǎng) - it200.com相關(guān)教程請(qǐng)自行百度學(xué)習(xí)。愛(ài)掏網(wǎng) - it200.com

uni-app的vue文件里支持所有web排版方式，不管是流式還是flex。愛(ài)掏網(wǎng) - it200.com但nvue里，只支持flex，因?yàn)樗赼pp端是使用原生排版引擎渲染的。愛(ài)掏網(wǎng) - it200.com

注意css里背景圖和字體文件，盡量不要大于40k，因?yàn)闀?huì)影響性能。愛(ài)掏網(wǎng) - it200.com在小程序端，如果要大于40k，需放到服務(wù)器側(cè)遠(yuǎn)程引用或base64后引入，不能放到本地作為獨(dú)立文件引用。愛(ài)掏網(wǎng) - it200.com

工程結(jié)構(gòu)和頁(yè)面管理

uni-app的工程結(jié)構(gòu)有單獨(dú)的要求

每個(gè)可顯示的頁(yè)面，都必須在 pages.json 中注冊(cè)。愛(ài)掏網(wǎng) - it200.com如果你開(kāi)發(fā)過(guò)小程序，那么pages.json類似app.json。愛(ài)掏網(wǎng) - it200.com如果你熟悉vue，這里沒(méi)有vue的路由，都是在pages.json里管理。愛(ài)掏網(wǎng) - it200.com

原來(lái)工程的首頁(yè)一般是index.html或default.html，是在web server里配的。愛(ài)掏網(wǎng) - it200.com而uni-app的首頁(yè)，是在pages.json里配的，page節(jié)點(diǎn)下第一個(gè)頁(yè)面就是首頁(yè)。愛(ài)掏網(wǎng) - it200.com一般在/pages/xx的目錄下。愛(ài)掏網(wǎng) - it200.com

app和小程序中，為了提升體驗(yàn)，頁(yè)面提供了原生的導(dǎo)航欄和底部tabbar，注意這些配置是在pages.json中做，而不是在vue頁(yè)面里創(chuàng)建，但點(diǎn)擊事件的監(jiān)聽(tīng)在顯示的vue頁(yè)面中做。愛(ài)掏網(wǎng) - it200.com

在vue中，以前的js事件監(jiān)聽(tīng)概念改為了生命周期概念。愛(ài)掏網(wǎng) - it200.com

如果你熟悉小程序開(kāi)發(fā)的話，對(duì)比變化如下：

• 原來(lái)app.json被一拆為二。愛(ài)掏網(wǎng) - it200.com頁(yè)面管理，被挪入了uni-app的pages.json；非頁(yè)面管理，挪入了manifest.json

• 原來(lái)的app.js和app.wxss被合并到了app.vue中

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程視頻！！

以上就是uniapp和vue的區(qū)別是什么的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注其它相關(guān)文章！