1 頁面簡介
????????uni-app項目中，一個頁面就是一個符合Vue SFC規范的 vue 文件。
-
在 uni-app js 引擎版中，后綴名是
.vue文件或.nvue文件。 這些頁面均全平臺支持，差異在于當 uni-app 發行到App平臺時，.vue文件會使用webview進行渲染，.nvue會使用原生進行渲染。一個頁面可以同時存在vue和nvue，在pages.json的路由注冊中不包含頁面文件名后綴，同一個頁面可以對應2個文件名。重名時優先級如下：- 在非app平臺，先使用vue，忽略nvue
- 在app平臺，使用nvue，忽略vue
-
在 uni-app x 中，后綴名是
.uvue文件。uni-app x 中沒有js引擎和webview，不支持和vue頁面并存。uni-app x 在app-android上，每個頁面都是一個全屏activity，不支持透明。
2?頁面管理
2.1?新建頁面
? ?uni-app中的頁面，默認保存在工程根目錄下的pages目錄下。每次新建頁面，均需在pages.json中配置pages列表；未在pages.json -> pages?中注冊的頁面，uni-app會在編譯階段進行忽略。
????????新建頁面時，可以選擇是否創建同名目錄。創建目錄的意義在于：
- 如果你的頁面較復雜，需要拆分多個附屬的js、css、組件等文件，則使用目錄歸納比較合適。
- 如果只有一個頁面文件，大可不必多放一層目錄。
2.2?刪除頁面
????????刪除頁面時，需做兩件工作：
- 刪除
.vue文件、.nvue、.uvue文件 - 刪除
pages.json -> pages列表項中的配置
2.3?頁面改名
????????操作和刪除頁面同理，依次修改文件和?pages.json。
2.4?pages.json
????????pages.json是工程的頁面管理配置文件，包括：頁面路由注冊、頁面參數配置（原生標題欄、下拉刷新...）、首頁tabbar等眾多功能。
2.5?設置應用首頁
? ?pages.json -> pages配置項中的第一個頁面，作為當前工程的首頁（啟動頁）。
{"pages": [{"path": "pages/index/index", //名字叫不叫index無所謂，位置在第一個，就是首頁"style": {"navigationBarTitleText": "首頁" //頁面標題}},{"path": "pages/my","style": {"navigationBarTitleText": "我的"}},]
}3?頁面內容構成
????????uni-app 頁面基于 vue 規范。一個頁面內，有3個根節點標簽：
- 模板組件區?
<template> - 腳本區?
<script> - 樣式區?
<style>
<template><view class="content"><button @click="buttonClick">{{ title }}</button></view>
</template><script setup lang="ts">
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";const title = ref("Hello world") // 定義綁定在頁面上的data數據onLoad(function () {// 頁面啟動的生命周期，這里編寫頁面加載時的邏輯console.log("頁面啟動的生命周期");
})const buttonClick = () => {console.log("按鈕被點了");
}
</script><style>
.content {width: 750rpx;background-color: white;
}
</style>3.1?template模板區
????????template中文名為模板，它類似html的標簽。但有2個區別：
- html中?
script?和?style?是 html 的二級節點。但在 vue 文件中，template、script、style?這3個是平級關系。 - html 中寫的是 web 標簽，但 vue 的?
template?中寫的全都是 vue 組件，每個組件支持屬性、事件、 vue 指令，還可以綁定 vue 的 data 數據。
????????在vue2中，template?的二級節點只能有一個節點，一般是在一個根?view?下繼續寫頁面組件（如上示例代碼）。但在vue3中，template可以有多個二級節點，省去一個層級，如下：
<template><view><text>標題</text></view><scroll-view></scroll-view>
</template>????????可以在?manifest?中切換使用 Vue2 還是 Vue3。注意：uni-app x?中只支持 Vue3。
3.2?script 腳本區
????????script中編寫腳本，可以通過lang屬性指定腳本語言。
- 在vue和nvue中，默認是js，可以指定ts。
- 在uvue中，僅支持uts，不管script的lang屬性寫成什么，都按uts編譯。
<script lang="ts">
</script>3.3?style樣式區
????????style的寫法與web的css基本相同。如果頁面是nvue或uvue，使用原生渲染而不是webview渲染，那么它們支持的css是有限的。
4?頁面生命周期
? ?uni-app?頁面除支持 Vue 組件生命周期外還支持下方頁面生命周期函數，當以組合式 API 使用時，在 Vue2 和 Vue3 中存在一定區別。
| 函數名 | 說明 | 平臺差異說明 | 最低版本 |
|---|---|---|---|
| onInit | 監聽頁面初始化，其參數同 onLoad 參數，為上個頁面傳遞的數據，參數類型為 Object（用于頁面傳參），觸發時機早于 onLoad | 百度小程序 | 3.1.0+ |
| onLoad | 監聽頁面加載，該鉤子被調用時，響應式數據、計算屬性、方法、偵聽器、props、slots 已設置完成，其參數為上個頁面傳遞的數據，參數類型為 Object（用于頁面傳參）。 | ? | ? |
| onShow | 監聽頁面顯示，頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面 | ? | ? |
| onReady | 監聽頁面初次渲染完成，此時組件已掛載完成，DOM 樹($el)已可用，注意如果渲染速度快，會在頁面進入動畫完成前觸發 | ? | ? |
| onHide | 監聽頁面隱藏 | ? | ? |
| onUnload | 監聽頁面卸載 | ? | ? |
| onResize | 監聽窗口尺寸變化 | App、微信小程序、快手小程序 | ? |
| onPullDownRefresh | 監聽用戶下拉動作，一般用于下拉刷新 | ? | ? |
| onReachBottom | 頁面滾動到底部的事件（不是scroll-view滾到底），常用于下拉下一頁數據。具體見下方注意事項 | ? | ? |
| onTabItemTap | 點擊 tab 時觸發，參數為Object，具體見下方注意事項 | 微信小程序、QQ小程序、支付寶小程序、百度小程序、H5、App、快手小程序、京東小程序 | ? |
| onShareAppMessage | 用戶點擊右上角分享 | 微信小程序、QQ小程序、支付寶小程序、抖音小程序、飛書小程序、快手小程序、京東小程序 | ? |
| onPageScroll | 監聽頁面滾動，參數為Object | nvue不支持 | ? |
| onNavigationBarButtonTap | 監聽原生標題欄按鈕點擊事件，參數為Object | App、H5 | ? |
| onBackPress | 監聽頁面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示來源是左上角返回按鈕或 android 返回鍵；navigateBack表示來源是 uni.navigateBack； | app、H5、支付寶小程序 | ? |
| onNavigationBarSearchInputChanged | 監聽原生標題欄搜索輸入框輸入內容變化事件 | App、H5 | 1.6.0 |
| onNavigationBarSearchInputConfirmed | 監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發。 | App、H5 | 1.6.0 |
| onNavigationBarSearchInputClicked | 監聽原生標題欄搜索輸入框點擊事件（pages.json 中的 searchInput 配置 disabled 為 true 時才會觸發） | App、H5 | 1.6.0 |
| onShareTimeline | 監聽用戶點擊右上角轉發到朋友圈 | 微信小程序 | 2.8.1+ |
| onAddToFavorites | 監聽用戶點擊右上角收藏 | 微信小程序、QQ小程序 | 2.8.1+ |
4.1?Vue2 頁面及組件生命周期流程圖
4.2?Vue3 頁面及組件生命周期流程圖
4.3?頁面加載時序介紹
????????接下來我們介紹onLoad、onReady、onShow的先后關系，頁面加載的詳細流程。
- uni-app框架，首先根據pages.json的配置，創建頁面：所以原生導航欄是最快顯示的。頁面背景色也應該在這里配置。
- 根據頁面template里的組件，創建dom。：這里的dom創建僅包含第一批處理的靜態dom。對于通過js/uts更新data然后通過v-for再創建的列表數據，不在第一批處理。要注意一個頁面靜態dom元素過多，會影響頁面加載速度。在uni-app x Android版本上，可能會阻礙頁面進入的轉場動畫。 因為此時，頁面轉場動畫還沒有啟動。
- 觸發onLoad：此時頁面還未顯示，沒有開始進入的轉場動畫，頁面dom還不存在。所以這里不能直接操作dom（可以修改data，因為vue框架會等待dom準備后再更新界面）；在 app-uvue 中獲取當前的activity拿到的是老頁面的activity，只能通過頁面棧獲取activity。onLoad比較適合的操作是：接受上頁的參數，聯網取數據，更新data。手機都是多核的，uni.request或云開發聯網，在子線程運行，不會干擾UI線程的入場動畫，并行處理可以更快的拿到數據、渲染界面。但onLoad里不適合進行大量同步耗時運算，因為此時轉場動畫還沒開始。尤其uni-app x 在 Android上，onLoad里的代碼（除了聯網和加載圖片）默認是在UI線程運行的，大量同步耗時計算很容易卡住頁面動畫不啟動。除非開發者顯式指定在其他線程運行。
- 轉場動畫開始：新頁面開始進入的轉場動畫，動畫默認耗時300ms，可以在路由API中調節時長。
- 頁面onReady：第2步創建dom是虛擬dom，dom創建后需要經歷一段時間，UI層才能完成了頁面上真實元素的創建，即觸發了onReady。onReady后，頁面元素就可以自由操作了，比如ref獲取節點。同時首批界面也渲染了。注意：onReady和轉場動畫開始、結束之間，沒有必然的先后順序，完全取決于dom的數量和復雜度。如果元素排版和渲染夠快，轉場動畫剛開始就渲染好了；大多情況下，轉場動畫走幾格就看到了首批渲染內容；如果元素排版和渲染過慢，轉場動畫結束都沒有內容，就會造成白屏。聯網進程從onLoad起就在異步獲取數據更新data，如果服務器速度夠快，第二批數據也可能在轉場動畫結束前渲染。
- 轉場動畫結束：再次強調，5和6的先后順序不一定，取決于首批dom渲染的速度。
4.4?頁面加載常見問題
????????了解了頁面加載時序原理，我們就知道如何避免頁面加載常見的問題：
- 優化白屏的方法：
- 頁面dom太多，注意有的組件寫的不好，會拖累整體頁面。uni-app x 里減少dom數量的策略
- 聯網不要在onReady里，那樣太慢了，在onLoad里早點聯網
- 在pages.json里配置原生導航欄和背景色
- 有的頁面template內容非常少，整頁就是一個需要聯網加載的列表，這會造成雖然首批dom飛快渲染了，但頁面其實還是白的，聯網后才能顯示字和圖。 此時需要在template里做一些簡單占位組件，比如loading組件、骨架屏，讓本地先顯示一些內容。
- 卡住動畫不啟動的原因：
- 頁面dom太多，注意有的組件寫的不好，會拖累整體頁面。uni-app x 里減少dom數量的策略
- onLoad里執行了耗時的同步計算
4.5?onShow和onHide
- 注意頁面顯示，是一個會重復觸發的事件。a頁面剛進入時，會觸發a頁面的onShow。
- 當a跳轉到b頁面時，a會觸發onHide，而b會觸發onShow。
- 但當b被關閉時，b會觸發onUnload，此時a再次顯示出現，會再次觸發onShow。
- 在tabbar頁面（指pages.json里配置的tabbar），不同tab頁面互相切換時，會觸發各自的onShow和onHide。
4.5?onInit
- 僅百度小程序基礎庫 3.260 以上支持 onInit 生命周期
- 其他版本或平臺可以同時使用 onLoad 生命周期進行兼容，注意避免重復執行相同邏輯
- 不依賴頁面傳參的邏輯可以直接使用 created 生命周期替代
4.6 onLoad
uni-app x android?平臺，如需獲取?activity 實例，此時當前頁面的?activity 實例并未創建完成，會獲取到上一個頁面的?activity 實例（首頁會獲取應用默認的?activity 實例）。如需獲取當前頁面的?activity 實例，應在?onShow?或?onReady?生命周期中獲取。
4.7 onReachBottom
????????可在pages.json里定義具體頁面底部的觸發距離?onReachBottomDistance，比如設為50，那么滾動頁面到距離底部50px時，就會觸發onReachBottom事件。如使用scroll-view導致頁面沒有滾動，則觸底事件不會被觸發。scroll-view滾動到底部的事件請參考scroll-view的文檔。
4.8?onPageScroll?
| 屬性 | 類型 | 說明 |
|---|---|---|
| scrollTop | Number | 頁面在垂直方向已滾動的距離（單位px） |
onPageScroll : function(e) { //nvue暫不支持滾動監聽，可用bindingx代替console.log("滾動距離為：" + e.scrollTop);
},onPageScroll里不要寫交互復雜的js，比如頻繁修改頁面。因為這個生命周期是在渲染層觸發的，在非h5端，js是在邏輯層執行的，兩層之間通信是有損耗的。如果在滾動過程中，頻發觸發兩層之間的數據交換，可能會造成卡頓。（uvue在app端無此限制）- 在webview渲染時，比如app-vue、微信小程序、H5中，也可以使用wxs監聽滾動；在app-nvue中，可以使用bindingx監聽滾動。
- 如果想實現滾動時標題欄透明漸變，在App和H5下，可在pages.json中配置titleNView下的type為transparent。(uni-app x不支持)
- 如果需要滾動吸頂固定某些元素，推薦使用css的粘性布局。插件市場也有其他js實現的吸頂插件，但性能不佳，需要時可自行搜索。（uni-app x可自由在uts中設置固定位置）
?
4.9?onBackPress
| 屬性 | 類型 | 說明 |
|---|---|---|
| from | String | 觸發返回行為的來源：'backbutton'——左上角導航欄按鈕及安卓返回鍵；'navigateBack'——uni.navigateBack() 方法。支付寶小程序端不支持返回此字段 |
onBackPress(function (options) {// 監聽物理返回鍵事件console.log('from:' + options.from)
})onBackPress上不可使用async，會導致無法阻止默認返回- iOS 端側滑返回不會觸發?
onBackPress - 支付寶小程序只有真機可以監聽到非
navigateBack引發的返回事件（使用小程序開發工具時不會觸發onBackPress），不可以阻止默認返回行為
4.10?onTabItemTap
| 屬性 | 類型 | 說明 |
|---|---|---|
| index | Number | 被點擊tabItem的序號，從0開始 |
| pagePath | String | 被點擊tabItem的頁面路徑 |
| text | String | 被點擊tabItem的按鈕文字 |
onTabItemTap(function (e) {console.log(e);// e的返回格式為json對象： {"index":0,"text":"首頁","pagePath":"pages/index/index"}
})- onTabItemTap常用于點擊當前tabitem，滾動或刷新當前頁面。如果是點擊不同的tabitem，一定會觸發頁面切換。
- 如果想在App端實現點擊某個tabitem不跳轉頁面，不能使用onTabItemTap，可以使用plus.nativeObj.view 放一個區塊蓋住原先的tabitem，并攔截點擊事件。
- 支付寶小程序平臺onTabItemTap表現為點擊非當前tabitem后觸發，因此不能用于實現點擊返回頂部這種操作
4.11?onNavigationBarButtonTap
| 屬性 | 類型 | 說明 |
|---|---|---|
| index | Number | 原生標題欄按鈕數組的下標 |
onNavigationBarButtonTap(function (e) {console.log(e);// e的返回格式為json對象：{"text":"測試","index":0}
})5?組件生命周期
? ?uni-app?組件支持的生命周期，與vue標準組件的生命周期相同。這里沒有頁面級的onLoad等生命周期：
| 函數名 | 說明 | 平臺差異說明 | 最低版本 |
|---|---|---|---|
| beforeCreate | 在實例初始化之前被調用。 | ? | ? |
| created | 在實例創建完成后被立即調用。 | ? | ? |
| beforeMount | 在掛載開始之前被調用。 | ? | ? |
| mounted | 掛載到實例上去之后調用。?注意：此處并不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執行操作可以使用$nextTick | ? | ? |
| beforeUpdate | 數據更新時調用，發生在虛擬 DOM 打補丁之前。 | 僅H5平臺支持 | ? |
| updated | 由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。 | 僅H5平臺支持 | ? |
| beforeDestroy | 實例銷毀之前調用。在這一步，實例仍然完全可用。 | ? | ? |
| destroyed | Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 | ? | ? |
6?頁面調用接口
6.1?getApp()
? ?getApp()?函數用于獲取當前應用實例，一般用于獲取globalData。也可通過應用實例調用?App.vue methods?中定義的方法。
const app = getApp()
console.log(app.globalData)
app.doSomething() // 調用 App.vue methods 中的 doSomething 方法- 不要在定義于?
App()?內的函數中，或調用?App?前調用?getApp()?，可以通過?this.$scope?獲取對應的app實例 - 通過?
getApp()?獲取實例之后，不要私自調用生命周期函數。 - 當在首頁
nvue中使用getApp()不一定可以獲取真正的App對象。對此提供了const app = getApp({allowDefault: true})用來獲取原始的App對象，可以用來在首頁對globalData等初始化
6.2?getCurrentPages()
? ?getCurrentPages()?函數用于獲取當前頁面棧的實例，以數組形式按棧的順序給出，數組中的元素為頁面實例，第一個元素為首頁，最后一個元素為當前頁面。每個頁面實例的方法屬性列表：
| 方法 | 描述 | 平臺說明 |
|---|---|---|
| page.$getAppWebview() | 獲取當前頁面的webview對象實例 | App |
| page.route | 獲取當前頁面的路由 | ? |
? ?getCurrentPages()?僅用于展示頁面棧的情況，請勿修改頁面棧，以免造成頁面狀態錯誤。
頁面關閉時，對應頁面實例會在頁面棧中刪除。
navigateTo,?redirectTo?只能打開非 tabBar 頁面。switchTab?只能打開?tabBar?頁面。reLaunch?可以打開任意頁面。- 頁面底部的?
tabBar?由頁面決定，即只要是定義為?tabBar?的頁面，底部都有?tabBar。 - 不能在首頁?
onReady?之前進行頁面跳轉。
6.3?$getAppWebview()
? ?uni-app?在?getCurrentPages()獲得的頁面里內置了一個方法?$getAppWebview()?可以得到當前webview的對象實例，從而實現對 webview 更強大的控制。在 html5Plus 中，plus.webview具有強大的控制能力。但uni-app框架有自己的窗口管理機制，請不要自己創建和銷毀webview，如有需求覆蓋子窗體上去，請使用原生子窗體subNvue。
????????注意：此方法僅 App 支持
onLoad(function () {/* 獲取屏幕信息 */let pages = getCurrentPages();let page: any = pages[pages.length - 1];let ws = page.$getAppWebview();console.log(currentWebview.id); //獲得當前webview的idconsole.log(currentWebview.isVisible()); //查詢當前webview是否可見
})7?頁面通訊
?
7.1?uni.$emit(eventName,OBJECT)
????????觸發全局的自定義事件。附加參數都會傳給監聽器回調。
| 屬性 | 類型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| OBJECT | Object | 觸發事件攜帶的附加參數 |
uni.$emit('update',{msg:'頁面更新'})7.2?uni.$on(eventName,callback)
????????監聽全局的自定義事件。事件可以由 uni.$emit 觸發，回調函數會接收所有傳入事件觸發函數的額外參數。
| 屬性 | 類型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回調函數 |
uni.$on('update',function(data){console.log('監聽到事件來自 update ，攜帶參數 msg 為：' + data.msg);})7.3?uni.$once(eventName,callback)
????????監聽全局的自定義事件。事件可以由 uni.$emit 觸發，但是只觸發一次，在第一次觸發之后移除監聽器。
| 屬性 | 類型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回調函數 |
uni.$once('update',function(data){console.log('監聽到事件來自 update ，攜帶參數 msg 為：' + data.msg);})7.4?uni.$off(eventName, callback)
????????移除全局自定義事件監聽器。
| 屬性 | 類型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回調函數 |
- 如果沒有提供參數，則移除所有的事件監聽器；
- 如果只提供了事件，則移除該事件所有的監聽器；
- 如果同時提供了事件與回調，則只移除這個回調的監聽器；
- 提供的回調必須跟$on的回調為同一個才能移除這個回調的監聽器；
? ?$emit、$on、$off常用于跨頁面、跨組件通訊，這里為了方便演示放在同一個頁面
<template><view class="content"><view class="data"><text>{{ val }}</text></view><button type="primary" @click="comunicationOff">結束監聽</button></view>
</template><script setup lang="ts">
import {ref} from 'vue'
import {onLoad} from "@dcloudio/uni-app";const val = ref(0)onLoad(() => {setInterval(() => {uni.$emit('add', {data: 2})}, 1000)uni.$on('add', add)
})const comunicationOff = () => {uni.$off('add', add)
}const add = (e: any) => {val.value += e.data
}</script><style>
.content {display: flex;flex-direction: column;align-items: center;justify-content: center;
}.data {text-align: center;line-height: 40px;margin-top: 40px;
}button {width: 200px;margin: 20px 0;
}
</style>- uni.$emit、 uni.$on 、 uni.$once 、uni.$off 觸發的事件都是 App 全局級別的，跨任意組件，頁面，nvue，vue 等
- 使用時，注意及時銷毀事件監聽，比如，頁面 onLoad 里邊 uni.$on 注冊監聽，onUnload 里邊 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 監聽
8?路由
? ?uni-app頁面路由為框架統一管理，開發者需要在pages.json里配置每個路由頁面的路徑及頁面樣式。類似小程序在 app.json 中配置頁面路由一樣。所以?uni-app?的路由用法與?Vue Router?不同，如仍希望采用?Vue Router?方式管理路由，可在插件市場搜索?Vue-Router
? ?uni-app?有兩種頁面路由跳轉方式：使用navigator組件跳轉、調用API跳轉。
????????頁面返回時會自動關閉 loading 及 toast, modal 及 actionSheet 不會自動關閉。頁面關閉時，只是銷毀了頁面實例，未完成的網絡請求、計時器等副作用需開發者自行處理。
9?頁面棧
????????框架以棧的形式管理當前所有頁面， 當發生路由切換的時候，頁面棧的表現如下：
| 路由方式 | 頁面棧表現 | 觸發時機 |
|---|---|---|
| 初始化 | 新頁面入棧 | uni-app 打開的第一個頁面 |
| 打開新頁面 | 新頁面入棧 | 調用 API ?uni.navigateTo 、使用組件 ?<navigator open-type="navigate"/> |
| 頁面重定向 | 當前頁面出棧，新頁面入棧 | 調用 API uni.redirectTo?、使用組件?<navigator open-type="redirectTo"/> |
| 頁面返回 | 頁面不斷出棧，直到目標返回頁 | 調用 API uni.navigateBack? 、使用組件????????<navigator open-type="navigateBack"/>、用戶按左上角返回按鈕、安卓用戶點擊物理back按鍵 |
| Tab 切換 | 頁面全部出棧，只留下新的 Tab 頁面 | 調用 API uni.switchTab? 、使用組件 ???????<navigator open-type="switchTab"/>?、用戶切換 Tab |
| 重加載 | 頁面全部出棧，只留下新的頁面 | 調用 API uni.reLaunch? 、使用組件?<navigator open-type="reLaunch"/> |
10?頁面代碼規范介紹
? ?uni-app?支持在 template 模板中嵌套?<template/>?和?<block/>，用來進行條件渲染和?列表渲染。<template/>?和?<block/>?并不是一個組件，它們僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。<block/>?在不同的平臺表現存在一定差異，推薦統一使用?<template/>。
<template><view><template v-if="test"><view>test 為 true 時顯示</view></template><template v-else><view>test 為 false 時顯示</view></template></view>
</template><template><view><block v-for="(item,index) in list" :key="index"><view>{{item}} - {{index}}</view></block></view>
</template>11?nvue 開發與 vue 開發的常見區別
????????基于原生引擎的渲染，雖然還是前端技術棧，但和 web 開發肯定是有區別的。
- nvue 頁面控制顯隱只可以使用
v-if不可以使用v-show - nvue 頁面只能使用
flex布局，不支持其他布局方式。頁面開發前，首先想清楚這個頁面的縱向內容有什么，哪些是要滾動的，然后每個縱向內容的橫軸排布有什么，按 flex 布局設計好界面。 - nvue 頁面的布局排列方向默認為豎排（
column），如需改變布局方向，可以在?manifest.json?->?app-plus?->?nvue?->?flex-direction?節點下修改，僅在 uni-app 模式下生效。 - nvue 頁面編譯為 H5、小程序時，會做一件 css 默認值對齊的工作。因為 weex 渲染引擎只支持 flex，并且默認 flex 方向是垂直。而 H5 和小程序端，使用 web 渲染，默認不是 flex，并且設置
display:flex后，它的 flex 方向默認是水平而不是垂直的。所以 nvue 編譯為 H5、小程序時，會自動把頁面默認布局設為 flex、方向為垂直。當然開發者手動設置后會覆蓋默認設置。 - 文字內容，必須、只能在
<text>組件下。不能在<div>、<view>的text區域里直接寫文字。否則即使渲染了，也無法綁定 js 里的變量。 - 只有
text標簽可以設置字體大小，字體顏色。 - 布局不能使用百分比、沒有媒體查詢。
- nvue 切換橫豎屏時可能導致樣式出現問題，建議有 nvue 的頁面鎖定手機方向。
- 支持的 css 有限，不過并不影響布局出你需要的界面，
flex還是非常強大的。 - 不支持背景圖。但可以使用
image組件和層級來實現類似 web 中的背景效果。因為原生開發本身也沒有 web 這種背景圖概念 - css 選擇器支持的比較少，只能使用 class 選擇器。
- nvue 的各組件在安卓端默認是透明的，如果不設置
background-color，可能會導致出現重影的問題。 class?進行綁定時只支持數組語法。- Android 端在一個頁面內使用大量圓角邊框會造成性能問題，尤其是多個角的樣式還不一樣的話更耗費性能。應避免這類使用。
- nvue 頁面沒有
bounce回彈效果，只有幾個列表組件有bounce效果，包括?list、recycle-list、waterfall。 - 原生開發沒有頁面滾動的概念，頁面內容高過屏幕高度并不會自動滾動，只有部分組件可滾動（
list、waterfall、scroll-view/scroller），要滾得內容需要套在可滾動組件下。這不符合前端開發的習慣，所以在 nvue 編譯為 uni-app 模式時，給頁面外層自動套了一個?scroller，頁面內容過高會自動滾動。（組件不會套，頁面有recycle-list時也不會套）。后續會提供配置，可以設置不自動套。 - 在 App.vue 中定義的全局 js 變量不會在 nvue 頁面生效。
globalData和vuex是生效的。 - App.vue 中定義的全局 css，對 nvue 和 vue 頁面同時生效。如果全局 css 中有些 css 在 nvue 下不支持，編譯時控制臺會報警，建議把這些不支持的 css 包裹在條件編譯里，
APP-PLUS-NVUE - 不能在?
style?中引入字體文件，nvue 中字體圖標的使用參考：加載自定義字體。如果是本地字體，可以用plus.io的 API 轉換路徑。 - 目前不支持在 nvue 頁面使用?
typescript/ts。 - 強烈建議在 nvue 頁面使用原生導航欄。nvue 的渲染速度再快，也沒有原生導航欄快。原生排版引擎解析
json繪制原生導航欄耗時很少，而解析 nvue 的 js 繪制整個頁面的耗時要大的多，尤其在新頁面進入動畫期間，對于復雜頁面，沒有原生導航欄會在動畫期間產生整個屏幕的白屏或閃屏。
?
python爬蟲--selenium)
