日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

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

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

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

weex 編譯模式不支持vuex。

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

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

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

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

快速上手

1. 新建 nvue 頁(yè)面

在HBuilderX的 uni-app 項(xiàng)目中，新建頁(yè)面，彈出界面右上角可以選擇是建立vue頁(yè)面還是nvue頁(yè)面，或者2個(gè)同時(shí)建。

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

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

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

2. 開(kāi)發(fā) nvue 頁(yè)面

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

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

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

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

nvue 和 vue 相互通訊

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

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

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

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

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

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

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

步驟：

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

代碼示例:

//test.nvue

//App.vue

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

步驟：

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

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

代碼示例：

//index.nvue

vue 和 nvue 共享的變量和數(shù)據(jù)

除了通信事件，vue 和 nvue 頁(yè)面之間還可以共享變量和存儲(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頁(yè)面可以使用相同的uni.storage存儲(chǔ)。這個(gè)存儲(chǔ)是持久化的。 比如登陸狀態(tài)可以保存在這里。

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

3. globalData:

小程序有g(shù)lobalData機(jī)制，這套機(jī)制在uni-app里也可以使用，全端通用。 在App.vue文件里定義globalData，如下：

js中操作globalData的方式如下： getApp().globalData.text = 'test'

如果需要把globalData的數(shù)據(jù)綁定到頁(yè)面上，可在頁(yè)面的onShow聲明周期里進(jìn)行變量重賦值。

nvue 里使用 BindingX

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

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

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

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

• 從HBuilderX 2.3.4起，uni-app 編譯模式可直接引用uni.requireNativePlugin('bindingx')模塊，weex 模式還需使用 npm 方式引用。
• BindingX demo示例可參考 BindingX 示例 里 vue 的相關(guān)示例，將實(shí)驗(yàn)田里的 vue 代碼拷貝到 nvue 文件里即可。

代碼示例

注意

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

nvue 里使用 HTML5Plus API

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

nvue 里不支持的 uni-app API

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

動(dòng)畫(huà)

滾動(dòng)

繪畫(huà)

canvas API使用，詳見(jiàn)canvas文檔。

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

nvue開(kāi)發(fā)與vue開(kāi)發(fā)的常見(jiàn)區(qū)別

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

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

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

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

/ 錯(cuò)誤 /

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

/ 正確 / .class {}

- border 不支持簡(jiǎn)寫(xiě)

```css

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

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

• background 不支持簡(jiǎn)寫(xiě)

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

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

• nvue的uni-app編譯模式下，App.vue 中的樣式，會(huì)編譯到每個(gè) nvue文件。對(duì)于共享樣式，如果有不合法屬性控制臺(tái)會(huì)給出警告，可以通過(guò)條件編譯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)問(wèn)題

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

**用法**

```html

注意

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