uni-app 使用Weex/nvue的注意事項

介紹

uni-app App端內置了一個基于 weex 改進的原生渲染引擎，提供了原生渲染能力。

在App端，如果使用vue頁面，則使用webview渲染；如果使用nvue頁面(native vue的縮寫)，則使用原生渲染。一個App中可以同時使用兩種頁面，比如首頁使用nvue，二級頁使用vue頁面，hello uni-app示例就是如此。

雖然nvue也可以多端編譯，輸出H5和小程序，但nvue的css寫法受限，所以如果你不開發(fā)App，那么不需要使用nvue。

以往的 weex ，有個很大的問題是它只是一個高性能的渲染器，沒有足夠的API能力（比如各種push sdk集成、藍牙等能力調用），使得開發(fā)時非常依賴原生工程師協(xié)作，開發(fā)者本來想節(jié)約成本，結果需要前端、iOS、Android 3撥人開發(fā)，適得其反。 nvue 解決了這個問題，讓前端工程師可以直接開發(fā)完整 App，并提供豐富的插件生態(tài)和云打包。這些組合方案，幫助開發(fā)者切實的提高效率、降低成本。

同時uni-app擴展了weex原生渲染引擎的很多排版能力，修復了很多bug。比如

• Android端良好支持邊框陰影
• iOS端支持高斯模糊，詳情
• 可實現(xiàn)區(qū)域滾動長列表+左右拖動列表+吸頂?shù)膹碗s排版效果
• 優(yōu)化圓角邊框繪制性能

適用場景

nvue的組件和API寫法與vue頁面一致，其內置組件還比vue頁面內置組件增加了更多，詳見。但nvue在css的寫法限制較多，具體如下：

• nvue的css僅支持flex布局，是webview的css語法的子集。這是因為操作系統(tǒng)原生排版不支持非flex之外的web布局。當然flex足以排布出各種頁面，只是寫法需要適應。
• nvue的css，在選擇器方面支持的較少，只支持簡單的class="classA"。
• class 進行綁定時只支持數(shù)組語法。
• 有些web的css屬性在nvue里無法支持，比如背景圖。但可以使用image組件和層級來實現(xiàn)類似web中的背景效果。因為原生開發(fā)本身也沒有web這種背景圖概念

如果你熟悉 weex或react native 開發(fā)，那么 nvue 是你的更優(yōu)選擇，能切實提升你的開發(fā)效率，降低成本。

如果你是web前端，不熟悉原生排版，那么建議你仍然以使用vue頁面為主，在App端某些vue頁面表現(xiàn)不佳的場景下使用 nvue 作為強化補充。這些場景如下：

• 需要高性能的區(qū)域長列表或瀑布流滾動。webview的頁面級長列表滾動時沒有性能問題的（就是滾動條覆蓋webview整體高度），但頁面中某個區(qū)域做長列表滾動，則需要使用nvue的list、recycle-list、waterfall等組件。這些組件的性能要高于vue頁面里的區(qū)域滾動組件scroll-view。
• 復雜高性能的自定義下拉刷新。uni-app的pages.json里可以配置原生下拉刷新，但引擎內置的下拉刷新樣式只有雪花和circle圈2種樣式。如果你需要自己做復雜的下拉刷新，推薦使用nvue的refresh組件。當然插件市場里也有很多vue下的自定義下拉刷新插件，只要是基于renderjs或wxs的，性能也可以商用，只是沒有nvue的refresh組件更極致。
• 左右拖動的長列表。在webview里，通過swiper+scroll-view實現(xiàn)左右拖動的長列表，前端模擬下拉刷新，這套方案的性能不好。此時推薦使用nvue，比如新建uni-app項目時的新聞示例模板，就采用了nvue，切換很流暢。
• 實現(xiàn)區(qū)域滾動長列表+左右拖動列表+吸頂?shù)膹碗s排版效果，效果可參考hello uni-app模板里的swiper-list
• 如需要將軟鍵盤右下角按鈕文字改為“發(fā)送”，則需要使用nvue。比如聊天場景，除了軟鍵盤右下角的按鈕文字處理外，還涉及聊天記錄區(qū)域長列表滾動，適合nvue來做。
• 解決前端控件無法覆蓋原生控件的層級問題。當你使用map、video、live-pusher等原生組件時，會發(fā)現(xiàn)前端寫的view等組件無法覆蓋原生組件，層級問題處理比較麻煩，此時使用nvue更好?；蛘咴趘ue頁面上也可以覆蓋一個subnvue（一種非全屏的nvue頁面覆蓋在webview上），以解決App上的原生控件層級問題。詳見
• 如深度使用map組件，建議使用nvue。除了層級問題，App端nvue文件的map功能更完善，和小程序拉齊度更高，多端一致性更好。
• 如深度使用video，建議使用nvue。比如如下2個場景：video內嵌到swiper中，以實現(xiàn)抖音式視頻滑動切換，例子見插件市場；nvue的視頻全屏后，通過cover-view實現(xiàn)內容覆蓋，比如增加文字標題、分享按鈕。
• 直播推流：nvue下有l(wèi)ive-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示例就是如此。
• 動態(tài)橫豎屏。nvue頁面的css不支持媒體查詢，所以橫豎屏動態(tài)切換、動態(tài)適配屏幕是很困難的。

純原生渲染模式

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開發(fā)者，可以繼續(xù)查閱本章節(jié)，否則可以跳過看下一節(jié)快速上手。

weex的組件和jsapi，與uni-app不同。uni-app與微信小程序相同。

考慮到weex用戶的遷移，uni-app 也支持weex的代碼寫法。在manifest.json中可以配置使用weex編譯模式或uni-app編譯模式。選擇weex編譯模式時將不支持uni-app的組件和jsapi，需要開發(fā)者參考weex官方文檔的寫法來寫代碼。 比如 weex 編譯模式用<div>。uni-app 編譯模式則使用<view>。

一般情況建議使用uni-app模式，除非歷史weex代碼較多，需要逐步過渡。同時注意weex編譯模式的切換是項目級的，不支持同項目下某個nvue頁面使用weex模式，另一個nvue頁面使用uni-app模式。

在 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 生命周期函數(shù)的寫法。在 nvue 中監(jiān)聽原生標題欄按鈕點擊事件，詳見：uni.onNavigationBarButtonTap。

weex編譯模式不支持onShow生命周期，但熟悉5+的話，可利用監(jiān)聽webview的addEventListener show事件實現(xiàn)onShow效果。

weex 編譯模式不支持vuex。

nvue 的頁面跳轉，與 weex 不同，仍然遵循 uni-app 的路由模型。vue 頁面和 nvue 頁面之間不管怎么跳轉，都遵循這個模型。包括 nvue 頁面跳向 nvue 頁面。每個頁面都需要在 pages.json 中注冊，調用 uni-app 的 路由 API 進行跳轉。

原生開發(fā)沒有頁面滾動的概念，頁面內容高過屏幕高度并不會自動滾動，只有部分組件可滾動（list、waterfall、scroll-view/scroller），要滾得內容需要套在可滾動組件下。這不符合前端開發(fā)的習慣，所以在 nvue 編譯為 uni-app模式時，給頁面外層自動套了一個 scroller，頁面內容過高會自動滾動。（組件不會套，頁面有recycle-list時也不會套）。 可以設置不自動套。

{
  "path": "",
  "style": {
    "disableScroll": true // 不嵌套 scroller
  }
}

weex 編譯模式下支持使用 weex ui ，例子見：https://ext.dcloud.net.cn/plugin?id=442。但相比uni-app插件市場及官方uni ui而言，weex語法的組件生態(tài)還是比較欠缺的。

快速上手

1. 新建 nvue 頁面

在HBuilderX的 uni-app 項目中，新建頁面，彈出界面右上角可以選擇是建立vue頁面還是nvue頁面，或者2個同時建。

不管是vue頁面還是nvue頁面，都需要在pages.json中注冊。如果在HBuilderX中新建頁面是會自動注冊的，如果使用其他編輯器，則需要自行在pages.json里注冊。

如果一個頁面路由下同時有vue頁面和nvue頁面，即出現(xiàn)同名的vue和nvue文件。那么在App端，會僅使用nvue頁面，同名的vue文件將不會被編譯到App端。而在非App端，會優(yōu)先使用vue頁面。

如果不同名，只有nvue頁面，則在非app端，只有uni-app編譯模式的nvue文件才會編譯。

2. 開發(fā) nvue 頁面

nvue 頁面結構同 vue, 由 template、style、script 構成。

• template： 模板寫法、數(shù)據(jù)綁定同 vue。組件支持2種模式，1、 weex 組件，同weex寫法，參考：weex 內置組件；2、uni-app組件，同uni-app寫法。
• style：由于采用原生渲染，并非所有瀏覽器的 css 均支持，布局模型只支持 flex 布局，雖然不會造成某些界面布局無法實現(xiàn)，但寫法要注意。詳見：weex 樣式
• script：寫法同 vue，并支持3種API：weex API ：僅支持App端，uni-app編譯模式也可使用。使用前需先引入對應模塊，參考：weex 模塊引入uni API：https://uniapp.dcloud.io/api/READMEplus API：僅支持App端。http://www.html5plus.org/doc/h5p.html

3. 調試 nvue 頁面

HBuilderX內置了weex調試工具的強化版，包括審查界面元素、看log、debug打斷點，詳見

nvue 和 vue 相互通訊

在 uni-app 中，nvue 和 vue 頁面可以混搭使用。

推薦使用uni.$on,uni.$emit的方式進行頁面通訊，舊的通訊方式（uni.postMessage及plus.webview.postMessageToUniNView）不再推薦使用。

通訊實現(xiàn)方式

// 接收信息的頁面
// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    console.log('標題：' + data.title)
    console.log('內容：' + data.content)
})  

// 發(fā)送信息的頁面
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: '我是title',  
    content: '我是content'  
});

使用此頁面通訊時注意事項：要在頁面卸載前，使用 uni.$off 移除事件監(jiān)聽器。參考

nvue 向 vue 通訊（已過期，推薦使用上面的uni.$on、uni.$emit）

步驟：

1. 在 nvue 使用 uni.postMessage(data) 發(fā)送數(shù)據(jù)通訊，data 為 JSON 格式（鍵值對的值僅支持String）。
2. 在 App.vue 里使用 onUniNViewMessage 進行監(jiān)聽。

代碼示例:

//test.nvue
<template>
    <div @click="test">
        <text>點擊頁面發(fā)送數(shù)據(jù)</text>
    </div>
</template>
<script>
    export default {
        methods: {
            test(e) {
                uni.postMessage({test: "數(shù)據(jù)",value:"數(shù)據(jù)"});
            }
        }
    }
</script>

//App.vue
<script>
    export default {
        onUniNViewMessage:function(e){
          console.log("App.vue收到數(shù)據(jù)")
          console.log(JSON.stringify(e.data))  
        },
        onLaunch: function() {
            console.log('App Launch');
        }
    }
</script>

vue 向 nvue 通訊（已過期，推薦使用上面的uni.$on、uni.$emit）

步驟：

1. 在 vue 里使用 plus.webview.postMessageToUniNView(data,nvueId) 發(fā)送消息，data 為 JSON 格式（鍵值對的值僅支持String），nvueId 為 nvue 所在 webview 的 id，webview的 id 獲取方式參考：$getAppWebview()。
2. 在 nvue 里引用 globalEvent 模塊監(jiān)聽 plusMessage 事件，如下：

const globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener("plusMessage", e => {
  console.log(e.data);//得到數(shù)據(jù)
});

代碼示例：

//index.nvue
<template>
    <div @click="test">
        <text>點擊頁面發(fā)送數(shù)據(jù){{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也會觸發(fā)plusMessage事件，所以需要判斷需要的數(shù)據(jù)是否存在
                    this.num = e.data.num
                }
            });
        },
        methods: {
            test(e) {
                uni.navigateTo({
                    url: '../test/test'
                })
            }
        }
    }

//test.vue
<template>
    <view>
        <button type="primary" @click="test">點擊改變nvue的數(shù)據(jù)</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 共享的變量和數(shù)據(jù)

除了通信事件，vue 和 nvue 頁面之間還可以共享變量和存儲。 uni-app提供的共享變量和數(shù)據(jù)的方案如下：

1. vuex:

自HBuilderX 2.2.5起，nvue支持vuex。這是vue官方的狀態(tài)管理工具。

注意：

• 不支持直接引入store使用，可以使用mapState、mapGetters、mapMutations等輔助方法或者使用this.$store

2. uni.storage:

vue和nvue頁面可以使用相同的uni.storage存儲。這個存儲是持久化的。 比如登陸狀態(tài)可以保存在這里。

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的數(shù)據(jù)綁定到頁面上，可在頁面的onShow聲明周期里進行變量重賦值。

nvue 里使用 BindingX

uni-app是邏輯層和視圖層分離的。此時會產生兩層通信成本。比如拖動視圖層的元素，如果在邏輯層不停接收事件，因為通信損耗會產生不順滑的體驗。

BindingX是weex提供的一種預描述交互語法。由原生解析BindingX規(guī)則，按此規(guī)則處理視圖層的交互和動效。不再實時去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="https://gw.alicdn.com/tfs/TB1PZ25antYBeNjy1XdXXXXyVXa-128-128.png" rel="external nofollow"  />
        </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 。

動畫

滾動

繪畫

canvas API使用，詳見canvas文檔。

節(jié)點布局交互

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

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

• nvue 頁面只能使用 flex 布局，不支持其他布局方式。頁面開發(fā)前，首先想清楚這個頁面的縱向內容有什么，哪些是要滾動的，然后每個縱向內容的橫軸排布有什么，按 flex 布局設計好界面。
• 原生開發(fā)沒有頁面滾動的概念，頁面內容高過屏幕高度并不會自動滾動，只有部分組件可滾動（list、waterfall、scroll-view/scroller），要滾得內容需要套在可滾動組件下。這不符合前端開發(fā)的習慣，所以在 nvue 編譯為 uni-app模式時，給頁面外層自動套了一個 scroller，頁面內容過高會自動滾動。（組件不會套，頁面有recycle-list時也不會套）。后續(xù)會提供配置，可以設置不自動套。
• 文字內容，必須、只能在<text>組件下。不能在<div>、<view>的text區(qū)域里直接寫文字。否則即使渲染了，也無法綁定js里的變量。
• 只有text標簽可以設置字體大小，字體顏色。
• 布局不能使用百分比、沒有媒體查詢。
• nvue 切換橫豎屏時可能導致樣式出現(xiàn)問題，建議有 nvue 的頁面鎖定手機方向。
• 支持的css有限，不過并不影響布局出你需要的界面，flex還是非常強大的。詳見
• 不支持背景圖。但可以使用image組件和層級來實現(xiàn)類似web中的背景效果。因為原生開發(fā)本身也沒有web這種背景圖概念
• css選擇器支持的比較少，只能使用 class 選擇器。詳見weex的樣式文檔
• class 進行綁定時只支持數(shù)組語法。
• nvue頁面沒有bounce回彈效果，只有幾個列表組件有bounce效果，包括 list、recycle-list、waterfall。
• Android端在一個頁面內使用大量圓角邊框會造成性能問題，尤其是多個角的樣式還不一樣的話更耗費性能。應避免這類使用。
• nvue 的各組件在安卓端默認是透明的，如果不設置background-color，可能會導致出現(xiàn)重影的問題。
• 在 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 頁面關閉原生導航欄時，想要模擬狀態(tài)欄，可以參考：https://ask.dcloud.net.cn/article/35111。但是，仍然強烈建議在nvue頁面使用原生導航欄。nvue的渲染速度再快，也沒有原生導航欄快。原生排版引擎解析json繪制原生導航欄耗時很少，而解析nvue的js繪制整個頁面的耗時要大的多，尤其在新頁面進入動畫期間，對于復雜頁面，沒有原生導航欄會在動畫期間產生整個屏幕的白屏或閃屏。
• nvue 頁面的布局排列方向默認為豎排（column），如需改變布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 節(jié)點下修改，僅在 uni-app 模式下生效。詳情。
• nvue頁面編譯為H5、小程序時，會做一件css默認值對齊的工作。因為weex渲染引擎只支持flex，并且默認flex方向是垂直。而H5和小程序端，使用web渲染，默認不是flex，并且設置display:flex后，它的flex方向默認是水平而不是垂直的。所以nvue編譯為H5、小程序時，會自動把頁面默認布局設為flex、方向為垂直。當然開發(fā)者手動設置后會覆蓋默認設置。

下面有些正確和錯誤的寫法示例對比：

• 選擇器僅支持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需要陰影元素的父元素大于陰影范圍，否則會對陰影進行裁剪