uni-app 關于 nvue 開發

1. 前言

在前面小節的學習中，我們都知道 uni-app 框架是基于 vue 的前端解決方案，大部分的開發需求在 vue 頁面基本都可以實現。

但是還有部分功能需要結合 nvue 頁面才能實現，比如 <map> 組件在 vue 頁面中層級是最高的。用人話說，就是不能在 <map> 組件上添加任何的標簽，那我想要將標簽顯示在頁面地圖上怎么辦呢？

這就需要用 nvue 頁面來開發 <map> 組件了，這節課主要講解如何在 uni-app 框架中使用 nvue 進行開發。

2. nvue 介紹

2.1 nvue 是什么？

nvue 是 native vue 的縮寫，可以理解為 uni-app 的一種渲染方式。在 App 端，如果是 vue頁面，使用的是小程序方式的 webview 渲染，如果是 nvue 頁面，則使用 weex 方式的原生渲染。

使用 weex 方式的原生渲染，其實就是在 weex 的基礎上封裝了 uni-app 框架的 API，提供了App 端的原生渲染能力。nvue 常用于在 App 端給一些使用 vue 頁面表現不佳的場景作為強化補充。

有很多同學之前沒有接觸過 weex，我們先來了解一下。

2.2 weex 是什么？

weex 也是比較流行的一個 Web 開發框架，也可以提供跨平臺開發方案，實現一份代碼同時在移動端、Web端同時運行的效果。但是 weex 有一個很大的問題就是它只是一個高性能的渲染器，沒有足夠的API能力。

nvue 就解決了 weex 的這個問題，weex 支持的東西，在 nvue 里大多都是支持的，并且 nvue 提供了豐富的插件生態，讓前端工程師可以直接開發完整 App。

2.3 vue、nvue 頁面可以共存嗎？

一個項目中可以同時存在 vue 和 nvue 頁面。比如項目首頁使用的是nvue 頁面，而二級頁則使用 vue 頁面。

如果一個頁面路由下出現同名的 vue 和 nvue 文件，App 端會使用 nvue 頁面，非 App 端會使用 vue 頁面。

nvue 頁面的組件和 JavaScript 的寫法與 vue 頁面是一樣的，但是 css寫法有一些區別，nvue 頁面的 css 均采用 flex 布局，不支持其他布局方式。具體區別下面我們來詳細講解。

3. vue 和 nvue 的開發區別

在 HBuilderX 編輯器中進行頁面創建時，可以選擇創建為 vue 頁面還是 nvue頁面。vue 頁面與 nvue 頁面雖然可以在同一個 uni-app 項目中共存，但是這兩種頁面的開發還是有區別的，我們進行項目開發的時候需要注意一下。

3.1 nvue 的 css 寫法受限

雖然 nvue 也可以多端編譯，但是在 nvue 頁面編寫 css 沒有在 vue 頁面方便。nvue 頁面的 css 寫法是受限的。來看一下在 nvue 頁面下，正確和錯誤的 css 寫法實例：

3.1.1 border 不支持簡寫，在 nvue 中需要拆分

/* 錯誤寫法 */
.class {
   border: 1px black solid;
}

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

3.1.2 選擇器只能選擇單類

比如我們給下面的 HTML 代碼添加樣式。

<div class='imooc'>
  <text class=’imooc-text’>慕課網</text>
</div>

我們要給 <div> 的下一級 <text> 添加樣式，不能直接 .imooc>text 這樣寫，需要給 <text> 單獨添加一個樣式屬性，單獨給這個屬性定義樣式。下面來演示一下在 nvue 頁面添加樣式的正確和錯誤的寫法。

/* 錯誤寫法 */
.imooc>text {
background-color: green;
border-width: 1px;
   border-style: solid;
   border-color: black;
}

/* 正確寫法 */
.imooc {
   border-width: 1px;
   border-style: solid;
   border-color: black;
}
.imooc-text {
background-color: green;
}

3.1.3 引入樣式文件

在 nvue 頁面不能直接使用 import 引入樣式文件。并且在 App.vue 文件中中定義的全局樣式不會在 nvue 頁面生效，nvue 頁面的全局樣式需要我們手動引入。

/* 錯誤寫法 */
<style>  
  @import "@/main.css"; 
</style>

/* 正確寫法 */
<style src="@/main.css">
</style>

3.1.4 不支持預編譯語言

在 nvue 頁面不支持使用 scss、less 等預編譯語言。

/* 錯誤寫法 */
<style lang="scss"> 
</style>

3.1.5 引入字體文件

在 nvue 中，不能在 <style> 標簽中直接引入字體文件，需要用 weex 來加載字體。
實例：

const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
    'fontFamily': "iconfont",
    'src': "url('./font.ttf')"
});

4. nvue 和 vue 相互通訊

如果使用 vue 就能實現項目需求，并且對項目性能沒有很高的要求，我們盡量只使用 vue 來進行開發，不建議使用 nvue 來開發項目。因為 nvue 除了 css 寫法受限之外，在 vue 和 nvue 頁面混用的項目中，通訊也是一個大問題。

下面來看看在 vue 和 nvue 頁面混用的項目中，nvue 和 vue 如何相互通訊。

4.1 nvue 向 vue 傳值

在 nvue中使用 uni.postMessage(data) 發送數據，參數 data 只能是 json 數據，json 數據的值只支持字符串。在vue中使用 onUniNViewMessage 函數監聽數據。

實例：
在 nvue 頁面定義方法，使用 uni.postMessage(data) 發送數據。

<script>
export default {
methods: {
postMessage(item){
        uni.postMessage({
name:’慕課網’,
data:item
})
}
}
  }
</script>

在 vue 頁面接收數據，對 nvue 頁面發送的數據進行監聽。

<script>
export default {
onUniNViewMessage:(e) => {
      const data = e.data
  uni.$emit(‘data’,data)
}
  }
</script>

4.2 vue 向 nvue 傳值

方法一：使用 storage 緩存的方式進行參數傳遞。

在 vue 頁面中打開 nvue 頁面，并且通過 setStorageSync 方法將數據保存到緩存中。

<script>
export default {
methods: {
postMessage(item){
uni.setStorageSync('storageData', 'imooc');
uni.navigateTo({
          url:"/pages/nvue/nvue"
})
      }
}
  }
</script>

在 nvue 頁面獲得緩存中的數據。

<script>
  export default {
    created() {
      uni.getStorage({
        key:'storageData',
        success: (res) => {
          console.log("傳遞過來數據是：" + res.data)
        }
      })
    }
}
</script>

方法二：使用 globalData 全局數據的方式進行參數傳遞。

在 vue 頁面中定義全局數據。

<script>
  export default {
//全局數據
globalData: {
domain: 'http://www.xianlaiwan.cn'
}
  }
</script>

在 nvue 頁面獲取全局數據。

<script>
export default{
onLoad() {
//獲取全局變量
console.log(getApp().globalData.domain)
}
}
</script>

5. 小結

使用 nvue 頁面進行開發時，有個常見的錯誤是 Uncaught Error，這種錯誤一般是因為沒有創建 vue 頁面。uni-app 項目中必須要有一個 vue 頁面，新建一個 vue 頁面再重新編譯項目就不會有問題了。

本節課程我們需要掌握的重點如下：

• 了解 nvue、weex是什么；
• 掌握 vue 和 nvue 頁面開發區別，主要是 css 寫法受限的問題；
• 掌握 vue 和 nvue 頁面之間如何相互通訊。