介紹

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í)的提高效率、降低成本。

同時(shí)uni-app擴(kuò)展了weex原生渲染引擎的很多排版能力，修復(fù)了很多bug。比如

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

適用場景

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

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

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

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

• 需要高性能的區(qū)域長列表或瀑布流滾動(dòng)。webview的頁面級(jí)長列表滾動(dòng)時(shí)沒有性能問題的（就是滾動(dòng)條覆蓋webview整體高度），但頁面中某個(gè)區(qū)域做長列表滾動(dòng)，則需要使用nvue的list、recycle-list、waterfall等組件。這些組件的性能要高于vue頁面里的區(qū)域滾動(dòng)組件scroll-view。
• 復(fù)雜高性能的自定義下拉刷新。uni-app的pages.json里可以配置原生下拉刷新，但引擎內(nèi)置的下拉刷新樣式只有雪花和circle圈2種樣式。如果你需要自己做復(fù)雜的下拉刷新，推薦使用nvue的refresh組件。當(dāng)然插件市場里也有很多vue下的自定義下拉刷新插件，只要是基于renderjs或wxs的，性能也可以商用，只是沒有nvue的refresh組件更極致。
• 左右拖動(dòng)的長列表。在webview里，通過swiper+scroll-view實(shí)現(xiàn)左右拖動(dòng)的長列表，前端模擬下拉刷新，這套方案的性能不好。此時(shí)推薦使用nvue，比如新建uni-app項(xiàng)目時(shí)的新聞示例模板，就采用了nvue，切換很流暢。
• 實(shí)現(xiàn)區(qū)域滾動(dòng)長列表+左右拖動(dòng)列表+吸頂?shù)膹?fù)雜排版效果，效果可參考hello uni-app模板里的swiper-list
• 如需要將軟鍵盤右下角按鈕文字改為“發(fā)送”，則需要使用nvue。比如聊天場景，除了軟鍵盤右下角的按鈕文字處理外，還涉及聊天記錄區(qū)域長列表滾動(dòng)，適合nvue來做。
• 解決前端控件無法覆蓋原生控件的層級(jí)問題。當(dāng)你使用map、video、live-pusher等原生組件時(shí)，會(huì)發(fā)現(xiàn)前端寫的view等組件無法覆蓋原生組件，層級(jí)問題處理比較麻煩，此時(shí)使用nvue更好。或者在vue頁面上也可以覆蓋一個(gè)subnvue（一種非全屏的nvue頁面覆蓋在webview上），以解決App上的原生控件層級(jí)問題。詳見
• 如深度使用map組件，建議使用nvue。除了層級(jí)問題，App端nvue文件的map功能更完善，和小程序拉齊度更高，多端一致性更好。
• 如深度使用video，建議使用nvue。比如如下2個(gè)場景：video內(nèi)嵌到swiper中，以實(shí)現(xiàn)抖音式視頻滑動(dòng)切換，例子見插件市場；nvue的視頻全屏后，通過cover-view實(shí)現(xiàn)內(nèi)容覆蓋，比如增加文字標(biāo)題、分享按鈕。
• 直播推流：nvue下有l(wèi)ive-pusher組件，和小程序?qū)R，功能更完善，也沒有層級(jí)問題。
• 對App啟動(dòng)速度要求極致化。App端v3編譯器模式下，如果首頁使用nvue且在manifest里配置fast模式，那么App的啟動(dòng)速度可以控制在1秒左右。而使用vue頁面的話，App的啟動(dòng)速度一般是3秒起，取決于你的代碼性能和體積。

但注意，在某些場景下，nvue不如vue頁面，如下：

• canvas。nvue的canvas性能不高，尤其是Android App平臺(tái)，所以這個(gè)組件干脆沒有內(nèi)置，而是需要單獨(dú)引入。操作canvas動(dòng)畫，最高性能的方式是使用vue頁面的renderjs技術(shù)，在hello uni-app里的canvas示例就是如此。
• 動(dòng)態(tài)橫豎屏。nvue頁面的css不支持媒體查詢，所以橫豎屏動(dòng)態(tài)切換、動(dòng)態(tài)適配屏幕是很困難的。

純原生渲染模式

uni-app在App端，支持vue頁面和nvue頁面混搭、互相跳轉(zhuǎn)。也支持純nvue原生渲染。

啟用純原生渲染模式，可以減少App端的包體積、減少使用時(shí)的內(nèi)存占用。因?yàn)閣ebview渲染模式的相關(guān)模塊將被移除。

在manifest.json源碼視圖的"app-plus"下配置"renderer":"native"，即代表App端啟用純原生渲染模式。此時(shí)pages.json注冊的vue頁面將被忽略，vue組件也將被原生渲染引擎來渲染。

如果不指定該值，默認(rèn)是不啟動(dòng)純原生渲染的。

// manifest.json    
{    
    // ...    
     /* App平臺(tái)特有配置 */    
    "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編譯模式時(shí)將不支持uni-app的組件和jsapi，需要開發(fā)者參考weex官方文檔的寫法來寫代碼。 比如 weex 編譯模式用<div>。uni-app 編譯模式則使用<view>。

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

在 manifest.json 中修改2種編譯模式，manifest.json -> app-plus -> nvueCompiler 切換編譯模式。

nvueCompiler 有兩個(gè)值：

• weex
• uni-app

// manifest.json    
{    
    // ...    
     /* App平臺(tái)特有配置 */    
    "app-plus": {    
        "nvueCompiler":"uni-app" //是否啟用 uni-app 模式  
    }    
}

如果沒有在manifest里明確配置，默認(rèn)是weex模式。這是為了向下兼容。

weex 編譯模式不支持 onNavigationBarButtonTap 生命周期函數(shù)的寫法。在 nvue 中監(jiān)聽原生標(biāo)題欄按鈕點(diǎn)擊事件，詳見：uni.onNavigationBarButtonTap。

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

weex 編譯模式不支持vuex。

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

原生開發(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ì)套）。 可以設(shè)置不自動(dòng)套。

{
  "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 項(xiàng)目中，新建頁面，彈出界面右上角可以選擇是建立vue頁面還是nvue頁面，或者2個(gè)同時(shí)建。

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

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

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

2. 開發(fā) nvue 頁面

nvue 頁面結(jié)構(gòu)同 vue, 由 template、style、script 構(gòu)成。

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

3. 調(diào)試 nvue 頁面

HBuilderX內(nèi)置了weex調(diào)試工具的強(qiáng)化版，包括審查界面元素、看log、debug打斷點(diǎn)，詳見

nvue 和 vue 相互通訊

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

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

通訊實(shí)現(xiàn)方式

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

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

使用此頁面通訊時(shí)注意事項(xiàng)：要在頁面卸載前，使用 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 進(jìn)行監(jiān)聽。

代碼示例:

//test.nvue
<template>
    <div @click="test">
        <text>點(diǎn)擊頁面發(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>點(diǎn)擊頁面發(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時(shí)才賦值，在nvue里調(diào)用uni的API也會(huì)觸發(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">點(diǎn)擊改變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 頁面之間還可以共享變量和存儲(chǔ)。 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存儲(chǔ)。這個(gè)存儲(chǔ)是持久化的。 比如登陸狀態(tài)可以保存在這里。

App端還支持plus.sqlite，也是共享通用的。

3. globalData:

小程序有g(shù)lobalData機(jī)制，這套機(jī)制在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聲明周期里進(jìn)行變量重賦值。

nvue 里使用 BindingX

uni-app是邏輯層和視圖層分離的。此時(shí)會(huì)產(chǎn)生兩層通信成本。比如拖動(dòng)視圖層的元素，如果在邏輯層不停接收事件，因?yàn)橥ㄐ艙p耗會(huì)產(chǎn)生不順滑的體驗(yàn)。

BindingX是weex提供的一種預(yù)描述交互語法。由原生解析BindingX規(guī)則，按此規(guī)則處理視圖層的交互和動(dòng)效。不再實(shí)時(shí)去js邏輯層運(yùn)行和通信。

BindingX類似一種強(qiáng)化版的css，運(yùn)行性能高，但沒有js那樣足夠強(qiáng)的編程靈活性。

uni-app 內(nèi)置了 BindingX，可在 nvue 中使用 BindingX 完成復(fù)雜的動(dòng)畫效果。

• 從HBuilderX 2.3.4起，uni-app 編譯模式可直接引用uni.requireNativePlugin('bindingx')模塊，weex 模式還需使用 npm 方式引用。
• BindingX demo示例可參考 BindingX 示例 里 vue 的相關(guān)示例，將實(shí)驗(yàn)田里的 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>

注意

• 暫時(shí)不要在expression內(nèi)使用origin

nvue 里使用 HTML5Plus API

• nvue頁面可直接使用plus的API，并且不需要等待plus ready。

nvue 里不支持的 uni-app API

nvue 支持大部分 uni-app API ，下面只列舉目前還不支持的 API 。

動(dòng)畫

滾動(dòng)

繪畫

canvas API使用，詳見canvas文檔。

節(jié)點(diǎn)布局交互

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

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

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

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

• 選擇器僅支持class 選擇器 ```css

/ 錯(cuò)誤 /

#id {} .a .b .c {} .a > .b {}

/ 正確 / .class {}

- border 不支持簡寫

```css

/* 錯(cuò)誤 */
.class {
    border: 1px red solid;
}

/* 正確 */
.class {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

• background 不支持簡寫

/* 錯(cuò)誤 */
.class {
    background: red;
}

/* 正確 */
.class {
    background-color: red;
}

• nvue的uni-app編譯模式下，App.vue 中的樣式，會(huì)編譯到每個(gè) nvue文件。對于共享樣式，如果有不合法屬性控制臺(tái)會(huì)給出警告，可以通過條件編譯APP-PLUS-NVUE屏蔽 App 中的警告。 ``css /* 錯(cuò)誤 */ /* 控制臺(tái)警告： 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平臺(tái)陰影(box-shadow)問題

Android平臺(tái)weex對陰影樣式(`box-shadow`)支持不完善，如設(shè)置圓角邊框時(shí)陰影樣式顯示不正常、設(shè)置動(dòng)畫時(shí)在`Android7`上顯示不正常等。為解決這些問題，從HBuilderX 2.4.7起，新增`elevation`屬性（組件的屬性，不是css樣式）設(shè)置組件的層級(jí)，`Number`類型，層級(jí)值越大陰影越明顯，陰影效果也與組件位置有關(guān)，越靠近頁面底部陰影效果越明顯

**用法**

```html
<view elevation="5px"></view>

注意

• 為了避免elevation屬性的陰影效果與陰影樣式(box-shadow)沖突，設(shè)置elevation屬性后box-shadow樣式失效
• 使用elevation需要陰影元素的父元素大于陰影范圍，否則會(huì)對陰影進(jìn)行裁剪