uniapp頁面樣式和布局和nvue教程

尺寸單位

uni-app 支持的通用 css 單位包括 px、rpx

• px 即屏幕像素。
• rpx 即響應(yīng)式px，一種根據(jù)屏幕寬度自適應(yīng)的動(dòng)態(tài)單位。以750寬的屏幕為基準(zhǔn)，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實(shí)際顯示效果會(huì)等比放大。但在 App 端和 H5 端屏幕寬度達(dá)到 960px 時(shí)，默認(rèn)將按照 375px 的，屏幕寬度進(jìn)行計(jì)算，具體配置參考：rpx計(jì)算配置

rpx 詳細(xì)說明：

設(shè)計(jì)師在提供設(shè)計(jì)圖時(shí)，一般只提供一個(gè)分辨率的圖。嚴(yán)格按設(shè)計(jì)圖標(biāo)注的 px 做開發(fā)，在不同寬度的手機(jī)上界面很容易變形。而且主要是寬度變形。高度一般因?yàn)橛袧L動(dòng)條，不容易出問題。由此，引發(fā)了較強(qiáng)的動(dòng)態(tài)寬度單位需求。微信小程序設(shè)計(jì)了 rpx 解決這個(gè)問題。 uni-app 在 App 端、H5 端都支持了 rpx ，并且可以配置不同屏幕寬度的計(jì)算方式，具體參考：rpx計(jì)算配置。
rpx 是相對(duì)于基準(zhǔn)寬度的單位，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。uni-app 規(guī)定屏幕基準(zhǔn)寬度 750rpx。
開發(fā)者可以通過設(shè)計(jì)稿基準(zhǔn)寬度計(jì)算頁面元素 rpx 值，設(shè)計(jì)稿 1px 與框架樣式 1rpx 轉(zhuǎn)換公式如： 設(shè)計(jì)稿 1px / 設(shè)計(jì)稿基準(zhǔn)寬度 = 框架樣式 1rpx / 750rpx。
換言之，頁面元素寬度在 uni-app 中的寬度計(jì)算公式：750 * 元素在設(shè)計(jì)稿中的寬度 / 設(shè)計(jì)稿基準(zhǔn)寬度
頁面元素寬度在 uni-app 中的寬度計(jì)算舉例說明：

• 若設(shè)計(jì)稿寬度為 750px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè) 為： 750 * 100 / 750 ，結(jié)果為：100rpx。
• 若設(shè)計(jì)稿寬度為 640px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè) 為： 750 * 100 / 640 ，結(jié)果為：117rpx。
• 若設(shè)計(jì)稿寬度為 375px，元素 B 在設(shè)計(jì)稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應(yīng)該設(shè) 為： 750 * 200 / 375 ，結(jié)果為：400rpx。

注意 ：
rpx 是和寬度相關(guān)的單位，屏幕越寬，該值實(shí)際像素越大。如不想根據(jù)屏幕寬度縮放，則應(yīng)該使用 px 單位。如果開發(fā)者在字體或高度中也使用了 rpx ，那么需注意這樣的寫法意味著隨著屏幕變寬，字體會(huì)變大、高度會(huì)變大。如果你需要固定高度，則應(yīng)該使用px,rpx不支持動(dòng)態(tài)橫豎屏切換計(jì)算，使用rpx建議鎖定屏幕方向。

全局樣式與局部樣式

定義在 App.vue 中的樣式為全局樣式，作用于每一個(gè)頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁面，并會(huì)覆蓋 App.vue 中相同的選擇器。
注意：
App.vue 中通過 @import語句可以導(dǎo)入外聯(lián)樣式文件，一樣作用于每一個(gè)頁面。

<style>/*每個(gè)頁面公共css */@import url("../../common/css/common.css");
</style>

效果：

APP和小程序中子組件會(huì)使用父組件的樣式，H5端不會(huì)使用父組件的樣式。

CSS變量

uni-app 提供內(nèi)置 CSS 變量

CSS 變量	描述	App	小程序	H5
–status-bar-height	系統(tǒng)狀態(tài)欄高度	系統(tǒng)狀態(tài)欄高度	25	0
–window-top	內(nèi)容區(qū)域距離頂部的距離	0	0	NavigationBar 的高度
–window-bottom	內(nèi)容區(qū)域距離底部的距離	0	0	TabBar 的高度

注意：

• var(--status-bar-height) 此變量在微信小程序環(huán)境為固定 25px，在 App 里為手機(jī)實(shí)際狀態(tài)欄高度。
• 當(dāng)設(shè)置 "navigationStyle":"custom" 取消原生導(dǎo)航欄后，由于窗體為沉浸式，占據(jù)了狀態(tài)欄位置。此時(shí)可以使用一個(gè)高度為var(--status-bar-height)的 view 放在頁面頂部，避免頁面內(nèi)容出現(xiàn)在狀態(tài)欄。
• 由于在 H5 端，不存在原生導(dǎo)航欄和 tabbar，也是前端 div 模擬。如果設(shè)置了一個(gè)固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端會(huì)與 tabbar 重疊。此時(shí)可使用--window-bottom，不管在哪個(gè)端，都是固定在 tabbar 上方。
• 目前 nvue 在 App 端，還不支持 --status-bar-height變量，替代方案是在頁面 onLoad 時(shí)通過 uni.getSystemInfoSync().statusBarHeight 獲取狀態(tài)欄高度，然后通過 style 綁定方式給占位 view 設(shè)定高度。

示例：

<template><view><view class="status_bar"><!-- 這里是狀態(tài)欄 --></view><view> 狀態(tài)欄下的文字 </view></view>
</template>
<style>.status_bar {height: var(--status-bar-height);width: 100%;background: red;}
</style>

效果：

<template/> 和 <block/>

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/> ，用來進(jìn)行 列表渲染 和 條件渲染。
<template/> 和 <block/> 并不是一個(gè)組件，它們僅僅是一個(gè)包裝元素，不會(huì)在頁面中做任何渲染，只接受控制屬性。
<block/> 在不同的平臺(tái)表現(xiàn)存在一定差異，推薦統(tǒng)一使用 <template/> 。

<template><view><view class="box"><template v-if="test"><view>test為true,</view><view>test為true</view></template><template v-else><view>test為false,</view><view>test為false</view></template></view></view>
</template>
<script>export default {data() {return {test: false,}}}
</script><style>.box {display: flex;}
</style>

效果：

Flex 布局

為兼容多端跨平臺(tái)運(yùn)行，建議使用flex布局進(jìn)行開發(fā)
阮一峰的flex教程：flex教程

{
display: flex;
flex-direction: row;
}

flex-direction 決定主軸的方向（即項(xiàng)目的排列方向）
flex-wrap 默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。
flex-wrap屬性定義，如果一條軸線排不下，如何換 行。
flex-flow是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。
justify-content 定義了項(xiàng)目在主軸上的對(duì)齊方式。
align-items 定義項(xiàng)目在交叉軸上如何對(duì)齊。
align-content 定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

nvue 教程

????????uni-app App 端內(nèi)置了一個(gè)基于 weex 改進(jìn)的原生渲染引擎，提供了原生渲染能力。在 App 端，如果使用 vue 頁面，則使用 webview 渲染；如果使用 nvue 頁面(native vue 的縮寫)，則使用原生渲染。一個(gè) App 中可以同時(shí)使用兩種頁面，比如首頁使用 nvue，二級(jí)頁使用 vue 頁面，hello uni-app 示例就是如此。
????????雖然 nvue 也可以多端編譯，輸出 H5 和小程序，但 nvue 的 css 寫法受限，所以如果你不開發(fā) App，那么不需要使用 nvue。
????????以往的 weex ，有個(gè)很大的問題是它只是一個(gè)高性能的渲染器，沒有足夠的 API 能力（比如各種 push sdk 集成、藍(lán)牙等能力調(diào)用），使得開發(fā)時(shí)非常依賴原生工程師協(xié)作，開發(fā)者本來想節(jié)約成本，結(jié)果需要前端、iOS、Android 3 撥人開發(fā)，適得其反。 nvue 解決了這個(gè)問題，讓前端工程師可以直接開發(fā)完整 App，并提供豐富的插件生態(tài)和云打包。這些組合方案，幫助開發(fā)者切實(shí)的提高效率、降低成本。
????????如果一個(gè)頁面路由下同時(shí)有vue頁面和nvue頁面，即出現(xiàn)同名的vue和nvue文件。那么在App端，會(huì)僅使用nvue頁面，同名的vue文件將不會(huì)被編譯到App端。而在非App端，會(huì)優(yōu)先使用vue頁面。

nvue開發(fā)與vue開發(fā)的常見區(qū)別

基于原生引擎的渲染，雖然還是前端技術(shù)棧，但和web開發(fā)肯定是有區(qū)別的。

1. nvue 頁面控制顯隱只可以使用 v-if 不可以使用 v-show
2. nvue 頁面只能使用 flex 布局，不支持其他布局方式。頁面開發(fā)前，首先想清楚這個(gè)頁面的縱向內(nèi)容有什么，哪些是要滾動(dòng)的，然后每個(gè)縱向內(nèi)容的橫軸排布有什么，按 flex 布局設(shè)計(jì)好界面。
3. nvue 頁面的布局排列方向默認(rèn)為豎排（ column ），如需改變布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 節(jié)點(diǎn)下修改，僅在 uni-app 模式下生效。
4. nvue頁面編譯為H5、小程序時(shí)，會(huì)做一件css默認(rèn)值對(duì)齊的工作。因?yàn)?code>weex渲染引擎只支持flex，并且默認(rèn)flex方向是垂直。而H5和小程序端，使用web渲染，默認(rèn)不是flex，并且設(shè)置 display:flex 后，它的flex方向默認(rèn)是水平而不是垂直的。所以nvue編譯為H5、小程序時(shí)，會(huì)自動(dòng)把頁面默認(rèn)布局設(shè)為flex、方向?yàn)?code>垂直。當(dāng)然開發(fā)者手動(dòng)設(shè)置后會(huì)覆蓋默認(rèn)設(shè)置。
5. 文字內(nèi)容，必須、只能在 <text> 組件下。不能在 <div> 、 <view> 的text區(qū)域里直接寫文字。否則即使渲染了，也無法綁定js里的變量。
6. 只有 text 標(biāo)簽可以設(shè)置字體大小，字體顏色。
7. 布局不能使用百分比、沒有媒體查詢。
8. nvue 切換橫豎屏?xí)r可能導(dǎo)致樣式出現(xiàn)問題，建議有 nvue 的頁面鎖定手機(jī)方向。
9. 支持的css有限，不過并不影響布局出你需要的界面， flex 還是非常強(qiáng)大的。
10. 不支持背景圖。但可以使用 image 組件和層級(jí)來實(shí)現(xiàn)類似web中的背景效果。因?yàn)樵_發(fā)本身也沒有web這種背景圖概念
11. css選擇器支持的比較少，只能使用 class 選擇器。
12. nvue 的各組件在安卓端默認(rèn)是透明的，如果不設(shè)置 background-color ，可能會(huì)導(dǎo)致出現(xiàn)重影的問題。
13. class 進(jìn)行綁定時(shí)只支持?jǐn)?shù)組語法。
14. Android端在一個(gè)頁面內(nèi)使用大量圓角邊框會(huì)造成性能問題，尤其是多個(gè)角的樣式還不一樣的話更耗費(fèi)性能。應(yīng)避免這類使用。
15. nvue頁面沒有 bounce 回彈效果，只有幾個(gè)列表組件有 bounce 效果，包括 list 、 recycle-list 、waterfall 。
16. 原生開發(fā)沒有頁面滾動(dòng)的概念，頁面內(nèi)容高過屏幕高度并不會(huì)自動(dòng)滾動(dòng)，只有部分組件可滾動(dòng)（ list 、waterfall 、 scroll-view/scroller ），要滾得內(nèi)容需要套在可滾動(dòng)組件下。這不符合前端開發(fā)的習(xí)慣，所以在 nvue 編譯為 uni-app模式時(shí)，給頁面外層自動(dòng)套了一個(gè) scroller ，頁面內(nèi)容過高會(huì)自動(dòng)滾動(dòng)。（組件不會(huì)套，頁面有 recycle-list 時(shí)也不會(huì)套）。
17. 在 App.vue 中定義的全局js變量不會(huì)在 nvue 頁面生效。 globalData 和 vuex 是生效的。
18. App.vue 中定義的全局css，對(duì)nvue和vue頁面同時(shí)生效。如果全局css中有些css在nvue下不支持，編譯時(shí)控制臺(tái)會(huì)報(bào)警，建議把這些不支持的css包裹在條件編譯里， APP-PLUS-NVUE
19. 不能在 style 中引入字體文件，nvue 中字體圖標(biāo)的使用參考：加載自定義字體。如果是本地字體，可以用plus.io 的API轉(zhuǎn)換路徑。
20. 目前不支持在 nvue 頁面使用 typescript/ts 。
21. nvue 頁面關(guān)閉原生導(dǎo)航欄時(shí)，想要模擬狀態(tài)欄，可以參考文章。但是，仍然強(qiáng)烈建議在nvue頁面使用原生導(dǎo)航欄。nvue的渲染速度再快，也沒有原生導(dǎo)航欄快。原生排版引擎解析 json 繪制原生導(dǎo)航欄耗時(shí)少，而解析nvue的js繪制整個(gè)頁面的耗時(shí)要大的多，尤其在新頁面進(jìn)入動(dòng)畫期間，對(duì)于復(fù)雜頁面，沒有原生導(dǎo)航欄會(huì)在動(dòng)畫期間產(chǎn)生整個(gè)屏幕的白屏或閃屏。

樣式

• nvue的css僅支持flex布局，是webview的css語法的子集。這是因?yàn)椴僮飨到y(tǒng)原生排版不支持非flex之外的web布局。當(dāng)然flex足以排布出各種頁面，只是寫法需要適應(yīng)。
• 在選擇器方面支持的較少，只支持簡單的 class="classA" 。
• class 進(jìn)行綁定時(shí)只支持?jǐn)?shù)組語法。
• 不支持媒體查詢。
• 不支持復(fù)合樣式，不支持簡寫。
• 不能在 style 中引入字體文件。
• 布局不能使用百分比，如 width：100%; 。
• 有些web的css屬性在nvue里無法支持，比如背景圖。但可以使用image組件和層級(jí)來實(shí)現(xiàn)類似web中的背景效果。因?yàn)樵_發(fā)本身也沒有web這種背景圖概念。
• nvue 的各組件在安卓端默認(rèn)是透明的，如果不設(shè)置 background-color ，可能會(huì)導(dǎo)致出現(xiàn)重影的問題。
• 文字內(nèi)容，必須只能在 text 組件下， text 組件不能換行寫內(nèi)容，否則會(huì)出現(xiàn)無法去除的周邊空白。
• 只有 text 標(biāo)簽可以設(shè)置字體大小，字體顏色。

nvue 和 vue 相互通訊

uni.$emit(eventName,OBJECT)

觸發(fā)全局的自定事件。附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)。
eventName類型String 事件名，OBJECT Object 觸發(fā)事件攜帶的附加參數(shù)。

代碼示例

uni.$emit('update',{msg:'頁面更新'})

uni.$on(eventName,callback)

監(jiān)聽全局的自定義事件。事件可以由 uni.$emit 觸發(fā)，回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

示例：vue對(duì)nvue的傳值通訊

index.vue頁面代碼

<template><view><button @click="sendMessage">點(diǎn)擊修改數(shù)據(jù)</button></view>
</template><script>export default {data() {return {message: 'Hello from nVue'};},methods: {sendMessage() {uni.navigateTo({url: '../test/test',success: () => {// 確保目標(biāo)頁面已經(jīng)加載uni.$emit('ceshi', {title: '測試標(biāo)題',content: '測試內(nèi)容'});}});}}};
</script>

test.nvue頁面代碼

<template><view><text>Test Page</text></view>
</template><script>
export default {onLoad() {// 注冊(cè)事件監(jiān)聽器uni.$on('ceshi', (data) => {console.log('標(biāo)題：' + data.title);console.log('內(nèi)容：' + data.content);});},onUnload() {// 頁面卸載時(shí)移除事件監(jiān)聽器uni.$off('ceshi');},methods: {}
};
</script><style scoped>
/* 可以在這里添加樣式 */
</style>

效果：

uni.$once(eventName,callback)

監(jiān)聽全局的自定義事件。事件可以由uni.$emit觸發(fā)，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽器。

屬性	類型	描述
eventName	String	事件名
callback	Function	事件回調(diào)函數(shù)
示例代碼：

onLoad() {uni.$once('update',function(data){console.log('監(jiān)聽到事件來自 update ，攜帶參數(shù) msg 為：' + data.msg);})
}

示例：

<template><view><text>Test Page</text></view>
</template><script>export default {onLoad() {uni.$once('ceshi', function(data) {console.log('監(jiān)聽到事件來自 update ，攜帶參數(shù) msg 為：' + data);})},onUnload() {// 頁面卸載時(shí)移除事件監(jiān)聽器uni.$off('ceshi');},methods: {}};
</script><style scoped>/* 可以在這里添加樣式 */
</style>

效果:

uni.$off([eventName, callback])

移除全局自定義事件監(jiān)聽器。

屬性	類型	描述
eventName	Array[String]	事件名
callback	Function	事件回調(diào)函數(shù)
示例代碼

onUnload() {
// 移除 update 監(jiān)聽器
uni.$off('update')
}

上面中已經(jīng)用到了uni.$off的使用，在每次onUnload頁面卸載的時(shí)候移除事件監(jiān)聽。

Tips

• 如果沒有提供參數(shù)，則移除所有的事件監(jiān)聽器；
• 如果只提供了事件，則移除該事件所有的監(jiān)聽器；
• 如果同時(shí)提供了事件與回調(diào)，則只移除這個(gè)回調(diào)的監(jiān)聽器；
• 提供的回調(diào)必須跟$on的回調(diào)為同一個(gè)才能移除這個(gè)回調(diào)的監(jiān)聽器；

階段完結(jié)~