uni-app 使用Weex/nvue的注意事項
介紹
uni-app App端內建了一個基於 weex 改進的原生渲染引擎，提供了原生渲染能力。
在App端，如果使用vue頁面，則使用webview渲染；如果使用nvue頁面(native vue的縮寫)，則使用原生渲染。一個App中可以同時使用兩種頁面，比如首頁使用nvue，二級頁使用vue頁面，hello uni-app示例就是如此。
雖然nvue也可以多端編譯，輸出H5和小程式，但nvue的css寫法受限，所以如果你不開發App，那麼不需要使用nvue。
以往的 weex ，有個很大的問題是它只是一個高效能的渲染器，沒有足夠的API能力（比如各種push sdk整合、藍芽等能力呼叫），使得開發時非常依賴原生工程師協作，開發者本來想節約成本，結果需要前端、iOS、Android 3撥人開發，適得其反。 nvue 解決了這個問題，讓前端工程師可以直接開發完整 App，並提供豐富的外掛生態和雲打包。這些組合方案，幫助開發者切實的提高效率、降低成本。
同時uni-app擴充套件了weex原生渲染引擎的很多排版能力，修復了很多bug。比如
- Android端良好支援邊框陰影
- iOS端支援高斯模糊，詳情
- 可實現區域滾動長列表+左右拖動列表+吸頂的複雜排版效果
- 最佳化圓角邊框繪製效能
適用場景
nvue的元件和API寫法與vue頁面一致，其內建元件還比vue頁面內建元件增加了更多，詳見。但nvue在css的寫法限制較多，具體如下：
- nvue的css僅支援flex佈局，是webview的css語法的子集。這是因為作業系統原生排版不支援非flex之外的web佈局。當然flex足以排布出各種頁面，只是寫法需要適應。
- nvue的css，在選擇器方面支援的較少，只支援簡單的class="classA"。
- class 進行繫結時只支援陣列語法。
- 有些web的css屬性在nvue裡無法支援，比如背景圖。但可以使用image元件和層級來實現類似web中的背景效果。因為原生開發本身也沒有web這種背景圖概念
如果你熟悉 weex或react native 開發，那麼 nvue 是你的更優選擇，能切實提升你的開發效率，降低成本。
如果你是web前端，不熟悉原生排版，那麼建議你仍然以使用vue頁面為主，在App端某些vue頁面表現不佳的場景下使用 nvue 作為強化補充。這些場景如下：
- 需要高效能的區域長列表或瀑布流滾動。webview的頁面級長列表滾動時沒有效能問題的（就是捲軸覆蓋webview整體高度），但頁面中某個區域做長列表滾動，則需要使用nvue的list、recycle-list、waterfall等元件。這些元件的效能要高於vue頁面裡的區域滾動元件scroll-view。
- 複雜高效能的自定義下拉重新整理。uni-app的pages.json裡可以配置原生下拉重新整理，但引擎內建的下拉重新整理樣式只有雪花和circle圈2種樣式。如果你需要自己做複雜的下拉重新整理，推薦使用nvue的refresh元件。當然外掛市場裡也有很多vue下的自定義下拉重新整理外掛，只要是基於renderjs或wxs的，效能也可以商用，只是沒有nvue的refresh元件更極致。
- 左右拖動的長列表。在webview裡，透過swiper+scroll-view實現左右拖動的長列表，前端模擬下拉重新整理，這套方案的效能不好。此時推薦使用nvue，比如新建uni-app專案時的新聞示例模板，就採用了nvue，切換很流暢。
- 實現區域滾動長列表+左右拖動列表+吸頂的複雜排版效果，效果可參考hello uni-app模板裡的swiper-list
- 如需要將軟鍵盤右下角按鈕文字改為“傳送”，則需要使用nvue。比如聊天場景，除了軟鍵盤右下角的按鈕文書處理外，還涉及聊天記錄區域長列表滾動，適合nvue來做。
- 解決前端控制元件無法覆蓋原生控制元件的層級問題。當你使用map、video、live-pusher等原生元件時，會發現前端寫的view等元件無法覆蓋原生元件，層級問題處理比較麻煩，此時使用nvue更好。或者在vue頁面上也可以覆蓋一個subnvue（一種非全屏的nvue頁面覆蓋在webview上），以解決App上的原生控制元件層級問題。詳見
- 如深度使用map元件，建議使用nvue。除了層級問題，App端nvue檔案的map功能更完善，和小程式拉齊度更高，多端一致性更好。
- 如深度使用video，建議使用nvue。比如如下2個場景：video內嵌到swiper中，以實現抖音式影片滑動切換，例子見外掛市場；nvue的影片全屏後，透過cover-view實現內容覆蓋，比如增加文字標題、分享按鈕。
- 直播推流：nvue下有live-pusher元件，和小程式對齊，功能更完善，也沒有層級問題。
- 對App啟動速度要求極致化。App端v3編譯器模式下，如果首頁使用nvue且在manifest裡配置fast模式，那麼App的啟動速度可以控制在1秒左右。而使用vue頁面的話，App的啟動速度一般是3秒起，取決於你的程式碼效能和體積。
但注意，在某些場景下，nvue不如vue頁面，如下：
- canvas。nvue的canvas效能不高，尤其是Android App平臺，所以這個元件乾脆沒有內建，而是需要單獨引入。操作canvas動畫，最高效能的方式是使用vue頁面的renderjs技術，在hello uni-app裡的canvas示例就是如此。
- 動態橫豎屏。nvue頁面的css不支援媒體查詢，所以橫豎屏動態切換、動態適配螢幕是很困難的。
純原生渲染模式
uni-app在App端，支援vue頁面和nvue頁面混搭、互相跳轉。也支援純nvue原生渲染。
啟用純原生渲染模式，可以減少App端的包體積、減少使用時的記憶體佔用。因為webview渲染模式的相關模組將被移除。
在manifest.json原始碼檢視的"app-plus"下配置"renderer":"native"，即代表App端啟用純原生渲染模式。此時pages.json註冊的vue頁面將被忽略，vue元件也將被原生渲染引擎來渲染。
如果不指定該值，預設是不啟動純原生渲染的。
// manifest.json
{
// ...
/* App平臺特有配置 */
"app-plus": {
"renderer": "native", //App端純原生渲染模式
}
}
weex編譯模式和uni-app編譯模式
如你之前是weex開發者，可以繼續查閱本章節，否則可以跳過看下一節快速上手。
weex的元件和jsapi，與uni-app不同。uni-app與微信小程式相同。
考慮到weex使用者的遷移，uni-app 也支援weex的程式碼寫法。在manifest.json中可以配置使用weex編譯模式或uni-app編譯模式。選擇weex編譯模式時將不支援uni-app的元件和jsapi，需要開發者參考weex官方文件的寫法來寫程式碼。 比如 weex 編譯模式用<div>。uni-app 編譯模式則使用<view>。
一般情況建議使用uni-app模式，除非歷史weex程式碼較多，需要逐步過渡。同時注意weex編譯模式的切換是專案級的，不支援同專案下某個nvue頁面使用weex模式，另一個nvue頁面使用uni-app模式。
| weex編譯模式 | uni-app編譯模式 | |
|---|---|---|
| 平臺 | 僅App | 所有端，包含小程式和H5 |
| 元件 | weex元件如
div |
uni-app元件如
view |
| 生命週期 | 只支援weex生命週期 | 支援所有uni-app生命週期 |
| JS API | weex API、uni API、Plus API | weex API、uni API、Plus API |
| 單位 | 750px是螢幕寬度，wx是固定畫素單位 | 750rpx是螢幕寬度，px是固定畫素單位 |
| 全域性樣式 | 手動引入 | app.vue的樣式即為全域性樣式 |
| 頁面滾動 | 必須給頁面套或元件 | 預設支援頁面滾動 |
在 manifest.json 中修改2種編譯模式，manifest.json -> app-plus -> nvueCompiler 切換編譯模式。
nvueCompiler 有兩個值：
- weex
- uni-app
// manifest.json
{
// ...
/* App平臺特有配置 */
"app-plus": {
"nvueCompiler":"uni-app" //是否啟用 uni-app 模式
}
}
如果沒有在manifest裡明確配置，預設是weex模式。這是為了向下相容。
weex 編譯模式不支援 onNavigationBarButtonTap 生命週期函式的寫法。在 nvue 中監聽原生標題欄按鈕點選事件，詳見：uni.onNavigationBarButtonTap。
weex編譯模式不支援onShow生命週期，但熟悉5+的話，可利用監聽webview的addEventListener show事件實現onShow效果。
weex 編譯模式不支援vuex。
nvue 的頁面跳轉，與 weex 不同，仍然遵循 uni-app 的路由模型。vue 頁面和 nvue 頁面之間不管怎麼跳轉，都遵循這個模型。包括 nvue 頁面跳向 nvue 頁面。每個頁面都需要在 pages.json 中註冊，呼叫 uni-app 的 路由 API 進行跳轉。
原生開發沒有頁面滾動的概念，頁面內容高過螢幕高度並不會自動滾動，只有部分元件可滾動（list、waterfall、scroll-view/scroller），要滾得內容需要套在可滾動元件下。這不符合前端開發的習慣，所以在 nvue 編譯為 uni-app模式時，給頁面外層自動套了一個 scroller，頁面內容過高會自動滾動。（元件不會套，頁面有recycle-list時也不會套）。 可以設定不自動套。
{
"path": "",
"style": {
"disableScroll": true // 不巢狀 scroller
}
}
weex 編譯模式下支援使用 weex ui ，例子見：。但相比uni-app外掛市場及官方uni ui而言，weex語法的元件生態還是比較欠缺的。
快速上手
1. 新建 nvue 頁面
在HBuilderX的 uni-app 專案中，新建頁面，彈出介面右上角可以選擇是建立vue頁面還是nvue頁面，或者2個同時建。
不管是vue頁面還是nvue頁面，都需要在pages.json中註冊。如果在HBuilderX中新建頁面是會自動註冊的，如果使用其他編輯器，則需要自行在pages.json裡註冊。
如果一個頁面路由下同時有vue頁面和nvue頁面，即出現同名的vue和nvue檔案。那麼在App端，會僅使用nvue頁面，同名的vue檔案將不會被編譯到App端。而在非App端，會優先使用vue頁面。
如果不同名，只有nvue頁面，則在非app端，只有uni-app編譯模式的nvue檔案才會編譯。
2. 開發 nvue 頁面
nvue 頁面結構同 vue, 由 template、style、script 構成。
- template： 模板寫法、資料繫結同 vue。元件支援2種模式，1、 weex 元件，同weex寫法，參考：weex 內建元件；2、uni-app元件，同uni-app寫法。
- style：由於採用原生渲染，並非所有瀏覽器的 css 均支援，佈局模型只支援 flex 佈局，雖然不會造成某些介面佈局無法實現，但寫法要注意。詳見：weex 樣式
- script：寫法同 vue，並支援3種API：weex API ：僅支援App端，uni-app編譯模式也可使用。使用前需先引入對應模組，參考：weex 模組引入uni API： API：僅支援App端。
3. 除錯 nvue 頁面
HBuilderX內建了weex除錯工具的強化版，包括審查介面元素、看log、debug打斷點，詳見
nvue 和 vue 相互通訊
在 uni-app 中，nvue 和 vue 頁面可以混搭使用。
推薦使用uni.$on,uni.$emit的方式進行頁面通訊，舊的通訊方式（uni.postMessage及plus.webview.postMessageToUniNView）不再推薦使用。
通訊實現方式
// 接收資訊的頁面
// $on(eventName, callback)
uni.$on('page-popup', (data) => {
console.log('標題：' + data.title)
console.log('內容：' + data.content)
})
// 傳送資訊的頁面
// $emit(eventName, data)
uni.$emit('page-popup', {
title: '我是title',
content: '我是content'
});
使用此頁面通訊時注意事項：要在頁面解除安裝前，使用 uni.$off 移除事件監聽器。參考
nvue 向 vue 通訊（已過期，推薦使用上面的uni.$on、uni.$emit）
步驟：
- 在 nvue 使用 uni.postMessage(data) 傳送資料通訊，data 為 JSON 格式（鍵值對的值僅支援String）。
- 在 App.vue 裡使用 onUniNViewMessage 進行監聽。
程式碼示例:
//test.nvue
<template>
<div @click="test">
<text>點選頁面傳送資料</text>
</div>
</template>
<script>
export default {
methods: {
test(e) {
uni.postMessage({test: "資料",value:"資料"});
}
}
}
</script>
//App.vue
<script>
export default {
onUniNViewMessage:function(e){
console.log("App.vue收到資料")
console.log(JSON.stringify(e.data))
},
onLaunch: function() {
console.log('App Launch');
}
}
</script>
vue 向 nvue 通訊（已過期，推薦使用上面的uni.$on、uni.$emit）
步驟：
- 在 vue 裡使用 plus.webview.postMessageToUniNView(data,nvueId) 傳送訊息，data 為 JSON 格式（鍵值對的值僅支援String），nvueId 為 nvue 所在 webview 的 id，webview的 id 獲取方式參考：$getAppWebview()。
- 在 nvue 裡引用 globalEvent 模組監聽 plusMessage 事件，如下：
const globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener("plusMessage", e => {
console.log(e.data);//得到資料
});
程式碼示例：
//index.nvue
<template>
<div @click="test">
<text>點選頁面傳送資料{{num}}</text>
</div>
</template>
<script>
const globalEvent = weex.requireModule('globalEvent');
export default {
data() {
return {
num: "0"
}
},
created() {
globalEvent.addEventListener("plusMessage", e => {
console.log(e.data);
if (e.data.num) { //存在num時才賦值，在nvue裡呼叫uni的API也會觸發plusMessage事件，所以需要判斷需要的資料是否存在
this.num = e.data.num
}
});
},
methods: {
test(e) {
uni.navigateTo({
url: '../test/test'
})
}
}
}
//test.vue
<template>
<view>
<button type="primary" @click="test">點選改變nvue的資料</button>
</view>
</template>
<script>
export default {
methods: {
test() {
var pages = getCurrentPages();
var page = pages[pages.length - 2];
var currentWebview = page.$getAppWebview();
plus.webview.postMessageToUniNView({
num: "123"
}, currentWebview.id);
uni.navigateBack()
}
}
}
</script>
vue 和 nvue 共享的變數和資料
除了通訊事件，vue 和 nvue 頁面之間還可以共享變數和儲存。 uni-app提供的共享變數和資料的方案如下：
1. vuex:
自HBuilderX 2.2.5起，nvue支援vuex。這是vue官方的狀態管理工具。
注意：
- 不支援直接引入store使用，可以使用mapState、mapGetters、mapMutations等輔助方法或者使用this.$store
2. uni.storage:
vue和nvue頁面可以使用相同的uni.storage儲存。這個儲存是持久化的。 比如登陸狀態可以儲存在這裡。
App端還支援plus.sqlite，也是共享通用的。
3. globalData:
小程式有globalData機制，這套機制在uni-app裡也可以使用，全端通用。 在App.vue檔案裡定義globalData，如下：
<script>
export default {
globalData: {
text: 'text'
},
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
js中操作globalData的方式如下： getApp().globalData.text = 'test'
如果需要把globalData的資料繫結到頁面上，可在頁面的onShow宣告週期裡進行變數重賦值。
nvue 裡使用 BindingX
uni-app是邏輯層和檢視層分離的。此時會產生兩層通訊成本。比如拖動檢視層的元素，如果在邏輯層不停接收事件，因為通訊損耗會產生不順滑的體驗。
BindingX是weex提供的一種預描述互動語法。由原生解析BindingX規則，按此規則處理檢視層的互動和動效。不再實時去js邏輯層執行和通訊。
BindingX類似一種強化版的css，執行效能高，但沒有js那樣足夠強的程式設計靈活性。
uni-app 內建了 BindingX，可在 nvue 中使用 BindingX 完成複雜的動畫效果。
- 從HBuilderX 2.3.4起，uni-app 編譯模式可直接引用uni.requireNativePlugin('bindingx')模組，weex 模式還需使用 npm 方式引用。
- BindingX demo示例可參考 BindingX 示例 裡 vue 的相關示例，將實驗田裡的 vue 程式碼複製到 nvue 檔案裡即可。
程式碼示例
<template>
<div class="container">
<div ref="b1" class="btn" style="background-color:#6A1B9A" @click="clickBtn">
<text class="text">A</text>
</div>
<div ref="b2" class="btn" style="background-color:#0277BD" @click="clickBtn">
<text class="text">B</text>
</div>
<div ref="b3" class="btn" style="background-color:#FF9800" @click="clickBtn">
<text class="text">C</text>
</div>
<div ref="main_btn" class="btn" @click="clickBtn">
<image class="image" ref="main_image" src="
</div>
</div>
</template>
<script>
const Binding = uni.requireNativePlugin('bindingx');
module.exports = {
data: {
isExpanded: false
},
methods: {
getEl: function(el) {
if (typeof el === 'string' || typeof el === 'number') return el;
if (WXEnvironment) {
return el.ref;
} else {
return el instanceof HTMLElement ? el : el.$el;
}
},
collapse: function() {
let main_btn = this.getEl(this.$refs.main_btn);
let main_image = this.getEl(this.$refs.main_image);
let b1 = this.getEl(this.$refs.b1);
let b2 = this.getEl(this.$refs.b2);
let b3 = this.getEl(this.$refs.b3);
let main_binding = Binding.bind({
eventType: 'timing',
exitExpression: 't>800',
props: [{
element: main_image,
property: 'transform.rotateZ',
expression: 'easeOutQuint(t,45,0-45,800)'
}, {
element: main_btn,
property: 'background-color',
expression: "evaluateColor('#607D8B','#ff0000',min(t,800)/800)"
}]
}, function(res) {
if (res.state === 'exit') {
Binding.unbind({
token: main_binding
})
}
});
let btn_binding = Binding.bind({
eventType: 'timing',
exitExpression: 't>800',
props: [{
element: b1,
property: 'transform.translateY',
expression: "easeOutQuint(t,-150,150,800)"
}, {
element: b2,
property: 'transform.translateY',
expression: "t<=100?0:easeOutQuint(t-100,-300,300,700)"
}, {
element: b3,
property: 'transform.translateY',
expression: "t<=200?0:easeOutQuint(t-200,-450,450,600)"
}]
}, function(res) {
if (res.state === 'exit') {
Binding.unbind({
token: btn_binding
})
}
})
},
expand: function() {
let main_btn = this.getEl(this.$refs.main_btn);
let main_image = this.getEl(this.$refs.main_image);
let b1 = this.getEl(this.$refs.b1);
let b2 = this.getEl(this.$refs.b2);
let b3 = this.getEl(this.$refs.b3);
let main_binding = Binding.bind({
eventType: 'timing',
exitExpression: 't>100',
props: [{
element: main_image,
property: 'transform.rotateZ',
expression: 'linear(t,0,45,100)'
}, {
element: main_btn,
property: 'background-color',
expression: "evaluateColor('#ff0000','#607D8B',min(t,100)/100)"
}]
}, function(res) {
if (res.state === 'exit') {
Binding.unbind({
token: main_binding
})
}
});
let btn_binding = Binding.bind({
eventType: 'timing',
exitExpression: 't>800',
props: [{
element: b1,
property: 'transform.translateY',
expression: "easeOutBounce(t,0,0-150,800)"
}, {
element: b2,
property: 'transform.translateY',
expression: "t<=100?0:easeOutBounce(t-100,0,0-300,700)"
}, {
element: b3,
property: 'transform.translateY',
expression: "t<=200?0:easeOutBounce(t-200,0,0-450,600)"
}]
}, function(res) {
if (res.state === 'exit') {
Binding.unbind({
token: btn_binding
})
}
})
},
clickBtn: function(e) {
if (this.isExpanded) {
this.collapse();
} else {
this.expand();
}
this.isExpanded = !this.isExpanded;
}
}
}
</script>
<style>
.container {
flex: 1;
}
.image {
width: 60px;
height: 60px;
}
.text {
color: #ffffff;
font-size: 30px;
}
.btn {
width: 100px;
height: 100px;
background-color: #ff0000;
align-items: center;
justify-content: center;
position: absolute;
border-radius: 50px;
bottom: 25px;
right: 25px;
}
</style>
注意
- 暫時不要在expression內使用origin
nvue 裡使用 HTML5Plus API
- nvue頁面可直接使用plus的API，並且不需要等待plus ready。
nvue 裡不支援的 uni-app API
nvue 支援大部分 uni-app API ，下面只列舉目前還不支援的 API 。
動畫
| API | 說明 |
|---|---|
| uni.createAnimation() | 建立一個動畫例項 |
滾動
| API | 說明 |
|---|---|
| uni.pageScrollTo() | 將頁面滾動到目標位置 |
繪畫
canvas API使用，詳見canvas文件。
節點佈局互動
| API | 說明 |
|---|---|
| uni.createIntersectionObserver() | 建立並返回一個 IntersectionObserver 物件例項 |
nvue開發與vue開發的常見區別
基於原生引擎的渲染，雖然還是前端技術棧，但和web開發肯定是有區別的。
- nvue 頁面只能使用 flex 佈局，不支援其他佈局方式。頁面開發前，首先想清楚這個頁面的縱向內容有什麼，哪些是要滾動的，然後每個縱向內容的橫軸排布有什麼，按 flex 佈局設計好介面。
- 原生開發沒有頁面滾動的概念，頁面內容高過螢幕高度並不會自動滾動，只有部分元件可滾動（list、waterfall、scroll-view/scroller），要滾得內容需要套在可滾動元件下。這不符合前端開發的習慣，所以在 nvue 編譯為 uni-app模式時，給頁面外層自動套了一個 scroller，頁面內容過高會自動滾動。（元件不會套，頁面有recycle-list時也不會套）。後續會提供配置，可以設定不自動套。
- 文字內容，必須、只能在<text>元件下。不能在<div>、<view>的text區域裡直接寫文字。否則即使渲染了，也無法繫結js裡的變數。
- 只有text標籤可以設定字型大小，字型顏色。
- 佈局不能使用百分比、沒有媒體查詢。
- nvue 切換橫豎屏時可能導致樣式出現問題，建議有 nvue 的頁面鎖定手機方向。
- 支援的css有限，不過並不影響佈局出你需要的介面，flex還是非常強大的。詳見
- 不支援背景圖。但可以使用image元件和層級來實現類似web中的背景效果。因為原生開發本身也沒有web這種背景圖概念
- css選擇器支援的比較少，只能使用 class 選擇器。詳見weex的樣式文件
- class 進行繫結時只支援陣列語法。
- nvue頁面沒有bounce回彈效果，只有幾個列表元件有bounce效果，包括 list、recycle-list、waterfall。
- Android端在一個頁面內使用大量圓角邊框會造成效能問題，尤其是多個角的樣式還不一樣的話更耗費效能。應避免這類使用。
- nvue 的各元件在安卓端預設是透明的，如果不設定background-color，可能會導致出現重影的問題。
- 在 App.vue 中定義的全域性js變數不會在 nvue 頁面生效。globalData和vuex是生效的。
- App.vue 中定義的全域性css，對nvue和vue頁面同時生效。如果全域性css中有些css在nvue下不支援，編譯時控制檯會報警，建議把這些不支援的css包裹在條件編譯裡，APP-PLUS-NVUE
- 不能在 style 中引入字型檔案，nvue 中字型圖示的使用參考：weex 載入自定義字型。如果是本地字型，可以用plus.io的API轉換路徑。
- 目前不支援在 nvue 頁面使用 typescript/ts。
- nvue 頁面關閉原生導航欄時，想要模擬狀態列，可以參考：。但是，仍然強烈建議在nvue頁面使用原生導航欄。nvue的渲染速度再快，也沒有原生導航欄快。原生排版引擎解析json繪製原生導航欄耗時很少，而解析nvue的js繪製整個頁面的耗時要大的多，尤其在新頁面進入動畫期間，對於複雜頁面，沒有原生導航欄會在動畫期間產生整個螢幕的白屏或閃屏。
- 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、方向為垂直。當然開發者手動設定後會覆蓋預設設定。
下面有些正確和錯誤的寫法示例對比：
- 選擇器僅支援class 選擇器 ```css
/ 錯誤 /
#id {} .a .b .c {} .a > .b {}
/ 正確 / .class {}
- border 不支援簡寫
```css/* 錯誤 */
.class {
border: 1px red solid;
}
/* 正確 */
.class {
border-width: 1px;
border-style: solid;
border-color: red;
}
- background 不支援簡寫
/* 錯誤 */
.class {
background: red;
}
/* 正確 */
.class {
background-color: red;
}
- nvue的uni-app編譯模式下，App.vue 中的樣式，會編譯到每個 nvue檔案。對於共享樣式，如果有不合法屬性控制檯會給出警告，可以透過條件編譯APP-PLUS-NVUE遮蔽 App 中的警告。 ``css /* 錯誤 */ /* 控制檯警告： WARNING:borderis not a standard property name (may not be supported) WARNING:-webkit-transform` is not a standard property name (may not be supported) */ .class { border: 1px red solid; -webkit-transform: scaleY(.5); }
/ 正確 / .class { border-width: 1px; border-style: solid; border-color: red; / #ifndef APP-PLUS-NVUE / -webkit-transform: scaleY(.5); / #endif/ }
## Android平臺陰影(box-shadow)問題 Android平臺weex對陰影樣式(`box-shadow`)支援不完善，如設定圓角邊框時陰影樣式顯示不正常、 設定動畫時在`Android7`上顯示不正常等。為解決這些問題，從HBuilderX 2.4.7起，新增`elevation`屬性 （元件的屬性，不是css樣式）設定元件的層級，`Number`型別，層級值越大陰影越明顯，陰影效果也與元件位置有關， 越靠近頁面底部陰影效果越明顯 **用法** ```html <view elevation="5px"></view>
注意
- 為了避免elevation屬性的陰影效果與陰影樣式(box-shadow)衝突，設定elevation屬性後box-shadow樣式失效
- 使用elevation需要陰影元素的父元素大於陰影範圍，否則會對陰影進行裁剪
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/70018483/viewspace-2900622/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- uni-app 入門之 nvue (weex) 爬坑記APPVue
- uni-app 使用HTML5+的注意事項APPHTML
- uni-app開發注意事項APP
- uni-app 跨端開發注意事項APP跨端
- Oracle使用*的注意事項Oracle
- 使用parallel注意事項Parallel
- 使用Google Fonts注意事項Go
- Go 切片使用注意事項Go
- 使用CocosBuilder注意事項UI
- removeChild使用時注意事項REM
- 使用Vue.js的注意事項Vue.js
- 使用HTTP的三個注意事項HTTP
- 快取使用中的注意事項快取
- TCP使用注意事項總結TCP
- C中memcpy使用注意事項memcpy
- 萬兆網路卡使用注意事項
- MySQL半同步使用注意事項MySql
- Guava HashMultimap使用及注意事項Guava
- setbuf函式使用注意事項函式
- php getallheaders使用注意事項PHPHeader
- 使用直方圖注意事項直方圖
- ip代理軟體的使用注意事項
- 說點JSON使用的注意事項JSON
- cookie的使用方法以及注意事項Cookie
- ThinkPHP中CURD where的使用注意事項PHP
- Linux中fork的使用注意事項Linux
- 在 HttpHandler 中使用 Session 的注意事項HTTPSession
- Xlistview的注意事項View
- Oracle臨時表使用注意事項Oracle
- 伺服器使用安全注意事項伺服器
- 不同版本exp/imp使用注意事項
- mysql索引使用技巧及注意事項MySql索引
- Python Enum 使用的幾點注意事項Python
- HTML基本標籤的使用與注意事項HTML
- Android Handler的使用方式和注意事項Android
- ListView中getChildAt(index)的使用注意事項ViewLDAIndex
- 使用find_in_set()函式的注意事項函式
- mybatis中使用in查詢時的注意事項MyBatis