在前面小节的学习中，我们都知道 框架是基于 vue 的前端案，大部分的开发需求在 vue 基本都可以实现。

但是还有部分需要结合 nvue 才能实现，比如 <map> 组件在 vue 中层级是最高的。用人话说，就是不能在 <map> 组件上任何的，那我想要将在地图上怎么办呢？

这就需要用 nvue 来开发 <map> 组件了，这节课主要讲解如何在 框架中使用 nvue 进行开发。

nvue 是 native vue 的缩写，可以理解为 的一种渲染方式。在 App 端，如果是 vue，使用的是方式的 webview 渲染，如果是 nvue ，则使用 weex 方式的原生渲染。

使用 weex 方式的原生渲染，其实就是在 weex 的基础上封装了 框架的 API，提供了App 端的原生渲染能力。nvue 常用于在 App 端给一些使用 vue 表现不佳的场景作为强化补充。

有很多同学之前没有接触过 weex，我们先来了解一下。

weex 也是比较流行的 Web 开发框架，也可以提供跨平台开发方案，实现一份同时在移动端、Web端同时运行的。但是 weex 有很大的问题就是它只是高的渲染器，没有足够的API能力。

nvue 就了 weex 的这个问题，weex 的东西，在 nvue 里大多都是的，并且 nvue 提供了丰富的生态，让前端工程师可以直接开发完整 App。

项目中可以 vue 和 nvue 。比如项目使用的是nvue ，而二级页则使用 vue 。

如果路由下出现同名的 vue 和 nvue ，App 端会使用 nvue ，非 App 端会使用 vue 。

nvue 的组件和 JavaScript 的写法与 vue 是一样的，但是 css写法有一些区别，nvue 的 css 均采用 flex 布局，其他布局方式。具体区别下面我们来详细讲解。

在 HBuilderX 编辑器中进行创建时，可以选择创建为 vue 还是 nvue。vue 与 nvue 虽然可以在同 项目中共存，但是这两种的开发还是有区别的，我们进行项目开发的时候需要注意一下。

虽然 nvue 也可以多端编译，但是在 nvue 编写 css 没有在 vue 方便。nvue 的 css 写法是受限的。来看一下在 nvue 下，正确和的 css 写法实例：

/* 写法 */
.class {
   border: px black solid;
}

/* 正确写法 */
.class {
   border-width: px;
   border-style: solid;
   border-color: black;
}

比如我们给下面的 HTML 样式。

<div class='imooc'>
  <text class=’imooc-text’>网</text>
</div>

我们要给 <div> 的下一级 <text> 样式，不能直接 .imooc>text 这样写，需要给 <text> 单独样式，单独给这个定义样式。下面来演示一下在 nvue 样式的正确和的写法。

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

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

在 nvue 不能直接使用 import 引入样式。并且在 App.vue 中中定义的全局样式不会在 nvue 生效，nvue 的全局样式需要我们手动引入。

/* 写法 */
<style>  
  @import "@/main.css"; 
</style>

/* 正确写法 */
<style src="@/main.css">
</style>

在 nvue 使用 scss、less 等预编译语言。

/* 写法 */
<style lang="scss"> 
</style>

在 nvue 中，不能在 <style> 中直接引入字体，需要用 weex 来加载字体。
实例：

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

如果使用 vue 就能实现项目需求，并且对项目没有很高的要求，我们尽量只使用 vue 来进行开发，不建议使用 nvue 来开发项目。因为 nvue 除了 css 写法受限之外，在 vue 和 nvue 混用的项目中，通讯也是大问题。

下面来看看在 vue 和 nvue 混用的项目中，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>

一：使用 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>

二：使用 全局数据的方式进行参数传递。

在 vue 中定义全局数据。

<script>
  export default {
//全局数据
: {
domain: 'https://www.imooc.com'
}
  }
</script>

在 nvue 全局数据。

<script>
export default{
onLoad() {
//
console.log(getApp()..domain)
}
}
</script>

使用 nvue 进行开发时，有个常见的是 Uncaught Error，这种一般是因为没有创建 vue 。 项目中必须要有 vue ，新建 vue 再重新编译项目就不会有问题了。

本节课程我们需要掌握的重点如下：