站長(zhǎng)資訊網(wǎng)區(qū)別：uniapp使用小程序的標(biāo)簽，vue使用web端的標(biāo)簽；除此之外，還新增了一批手機(jī)端常用的新組件。uniapp的api是參考小程序的，因而與瀏覽器端的api有所不同。uni不支持vue-router，使用自帶的路由。
本教程操作環(huán)境：windows7系統(tǒng)、uni-app2.5.1&&vue2.9.6版本、thinkpad t480電腦。
uniapp和vue的區(qū)別
組件/標(biāo)簽的變化
以前是html標(biāo)簽，現(xiàn)在是小程序標(biāo)簽。
- 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沒(méi)有了，都用view替代
- audio 不再推薦使用，改成api方式，背景音頻api文檔
其實(shí)老的HTML標(biāo)簽也可以在uni-app里使用，uni-app編譯器會(huì)在編譯時(shí)把老標(biāo)簽轉(zhuǎn)為新標(biāo)簽，比如把p編譯成view。但不推薦這種用法，調(diào)試H5端時(shí)容易混亂。
除了改動(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í)高于其他組件。如需覆蓋原生組件，比如在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部分。
-
運(yùn)行環(huán)境從瀏覽器變成v8引擎
標(biāo)準(zhǔn)js語(yǔ)法和api都支持，比如if、for、settimeout、indexOf等。
但瀏覽器專(zhuān)用的window、document、navigator、location對(duì)象，包括cookie等存儲(chǔ)，只有在瀏覽器中才有，app和小程序都不支持。
可能有些人以為js等于瀏覽器里的js。其實(shí)js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基于js規(guī)范補(bǔ)充了window、document、navigator、location等專(zhuān)用對(duì)象。
在uni-app的各個(gè)端中，除了h5端，其他端的js都運(yùn)行在一個(gè)獨(dú)立的v8引擎下，不是在瀏覽器中，所以瀏覽器的對(duì)象無(wú)法使用。如果你做過(guò)小程序開(kāi)發(fā)，對(duì)此應(yīng)當(dāng)很了解。
這意味著依賴(lài)document的很多HTML的庫(kù)，比如jqurey無(wú)法使用。
當(dāng)然app和小程序支持web-view組件，里面可以加載標(biāo)準(zhǔn)HTML，這種頁(yè)面仍然支持瀏覽器專(zhuān)用對(duì)象window、document、navigator、location。
-
以前的dom操作，改成vue的MVVM模式
現(xiàn)在前端趨勢(shì)是去dom化，改用mvvm模式，更簡(jiǎn)潔的寫(xiě)法，大幅減少代碼行數(shù)，同時(shí)差量渲染性能更好。
uni-app使用vue的數(shù)據(jù)綁定方式解決js和dom界面交互的問(wèn)題。
如果你想改變某個(gè)dom元素的顯示內(nèi)容，比如一個(gè)view的顯示文字：
以前是給view設(shè)id，然后js里通過(guò)選擇器獲取dom元素，進(jìn)一步通過(guò)js進(jìn)行賦值操作，修改dom元素的屬性或值。
如下演示了一段代碼，頁(yè)面中有個(gè)顯示的文字區(qū)和一個(gè)按鈕，點(diǎn)擊按鈕后會(huì)修改文字區(qū)的值
<html> <head> <script type="text/javascript"> document.addEventListener("DOMContentLoaded",function () { document.getElementById("spana").innerText="456" }) function changetextvalue () { document.getElementById("spana").innerText="789" } </script> </head> <body> <span id="spana">123</span> <button type="button" onclick="changetextvalue()">修改為789</button> </body> </html>
現(xiàn)在的做法，是vue的綁定模式，給這個(gè)dom元素綁定一個(gè)js變量，在script中修改js變量的值，dom會(huì)自動(dòng)變化，頁(yè)面會(huì)自動(dòng)更新渲染
<template> <view> <text>{{textvalue}}</text><!-- 這里演示了組件值的綁定 --> <button :type="buttontype" @click="changetextvalue()">修改為789</button><!-- 這里演示了屬性和事件的綁定 --> </view> </template> <script> export default { data() { return { textvalue:"123", buttontype:"primary" }; }, onLoad() { this.textvalue="456"//這里修改textvalue的值，其實(shí)123都來(lái)不及顯示就變成了456 }, methods: { changetextvalue() { this.textvalue="789"//這里修改textvalue的值，頁(yè)面自動(dòng)刷新為789 } } } </script>
如果你學(xué)過(guò)小程序的數(shù)據(jù)綁定，但不了解vue，要注意：
-
小程序的數(shù)據(jù)綁定參考了vue，但自己修改了一些。在uni-app中只支持標(biāo)準(zhǔn)的vue，不支持小程序的數(shù)據(jù)綁定語(yǔ)法
-
小程序里的setData在uni-app里并不存在，因?yàn)関ue是自動(dòng)雙向數(shù)據(jù)綁定的。直接通過(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即可。
uni-app在不同的端，支持條件編譯，無(wú)限制的使用各端獨(dú)有的api，
css的變化
標(biāo)準(zhǔn)的css基本都是支持的。
選擇器有2個(gè)變化：*選擇器不支持；元素選擇器里沒(méi)有body，改為了page。微信小程序即是如此。
page{ }
單位方面，px無(wú)法動(dòng)態(tài)適應(yīng)不同寬度的屏幕，rem無(wú)法用于nvue/weex。如果想使用根據(jù)屏幕寬度自適應(yīng)的單位，推薦使用rpx，全端支持。 尺寸單位文檔
uni-app推薦使用flex布局，并默認(rèn)就是flex布局，這個(gè)布局思路和傳統(tǒng)流式布局有點(diǎn)區(qū)別。但flex的有趣在于，不管是什么技術(shù)都支持這種排版，web、小程序/快應(yīng)用、weex/rn、原生的iOS、Android開(kāi)發(fā)，全都支持flex。它是通吃所有端的新一代布局方案。相關(guān)教程請(qǐng)自行百度學(xué)習(xí)。
uni-app的vue文件里支持所有web排版方式，不管是流式還是flex。但nvue里，只支持flex，因?yàn)樗赼pp端是使用原生排版引擎渲染的。
注意css里背景圖和字體文件，盡量不要大于40k，因?yàn)闀?huì)影響性能。在小程序端，如果要大于40k，需放到服務(wù)器側(cè)遠(yuǎn)程引用或base64后引入，不能放到本地作為獨(dú)立文件引用。
工程結(jié)構(gòu)和頁(yè)面管理
uni-app的工程結(jié)構(gòu)有單獨(dú)的要求
每個(gè)可顯示的頁(yè)面，都必須在 pages.json 中注冊(cè)。如果你開(kāi)發(fā)過(guò)小程序，那么pages.json類(lèi)似app.json。如果你熟悉vue，這里沒(méi)有vue的路由，都是在pages.json里管理。
原來(lái)工程的首頁(yè)一般是index.html或default.html，是在web server里配的。而uni-app的首頁(yè)，是在pages.json里配的，page節(jié)點(diǎn)下第一個(gè)頁(yè)面就是首頁(yè)。一般在/pages/xx的目錄下。
app和小程序中，為了提升體驗(yàn)，頁(yè)面提供了原生的導(dǎo)航欄和底部tabbar，注意這些配置是在pages.json中做，而不是在vue頁(yè)面里創(chuàng)建，但點(diǎn)擊事件的監(jiān)聽(tīng)在顯示的vue頁(yè)面中做。
在vue中，以前的js事件監(jiān)聽(tīng)概念改為了生命周期概念。
當(dāng)uni-app 初始化完成時(shí)觸發(fā)（全局只觸發(fā)一次） |
|
| onShow | 當(dāng) uni-app 啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示 |
| onHide | 當(dāng) uni-app 從前臺(tái)進(jìn)入后臺(tái) |
| onError | 當(dāng) uni-app 報(bào)錯(cuò)時(shí)觸發(fā) |
| onUniNViewMessage | 對(duì) nvue 頁(yè)面發(fā)送的數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)， |
| onUnhandledRejection | 對(duì)未處理的 Promise 拒絕事件監(jiān)聽(tīng)函數(shù)（暫時(shí)只支持 CLI 創(chuàng)建的項(xiàng)目使用 CLI 工程，更新 uni 相關(guān)版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline） |
如果你熟悉小程序開(kāi)發(fā)的話，對(duì)比變化如下：
-
原來(lái)app.json被一拆為二。頁(yè)面管理，被挪入了uni-app的pages.json；非頁(yè)面管理，挪入了manifest.json
-
原來(lái)的app.js和app.wxss被合并到了app.vue中
