uni-app学习之nvue使用教程

一、nvue简介及使用场景

nvue是uni-app框架的新型组件化方案，它是一种基于webview（也就是小程序内嵌的webview）的组件开发方案，可以使用vue语法编写，主要用于实现小程序内拥有原生乃至更高的性能与动画效果。

nvue的特点：

1. 相较于weex等其他方案，nvue的兼容性更好，可以兼容所有支持webview的小程序和app平台，如微信小程序、百度小程序、支付宝小程序、H5、App等平台。

2. 相较于传统的vue组件，nvue的性能更优，因为nvue基于webview开发，可以使用原生的渲染方式，同时还可以进行更高级的性能优化，如预渲染、减少重绘重排等。

3. nvue具有完善的生命周期，可以为小程序组件提供更好的支持。

nvue的使用场景：

1. 需要实现更高级动画效果或需要更高性能的小程序组件，如canvas绘制组件；

2. 需要在小程序内使用一些原生的组件或API，如原生map组件或原生扫码功能等。

二、nvue的基本用法

1. 创建nvue页面：

在uni-app项目中，可以通过在pages目录下新建一个以.nvue结尾的文件来创建nvue页面，例如：

uni-app-project
  |- pages
    |- index.nvue

1. 在nvue页面中使用vue语法：

在nvue页面中，可以和普通的vue组件一样使用vue语法，如定义data、methods等。需要注意的是，要使用app和page这两个全局对象时，需要在页面created钩子中进行调用：

<template>
  <view>{{ message }}</view>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Hello world!'
      }
    },
    created() {
      const app = getApp()
      const currentPage = getCurrentPages()[getCurrentPages().length - 1]
      console.log(app.globalData)
      console.log(currentPage.route)
    }
  }
</script>

1. 在nvue页面中使用原生组件或API：

在nvue页面中可以使用native组件和API，可以通过引入uni这个全局模块来获取原生API，例如：

<template>
  <view>
    <view id="map" class="map"></view>
  </view>
</template>
<script>
  import uni from '@/utils/uni-app-api'

  export default {
    mounted() {
      const map = uni.createMapContext('map', this)
      map.moveToLocation()
    }
  }
</script>

三、nvue的实际应用举例

1. 在nvue页面实现canvas图表：

我们可以利用nvue的高性能和webgl的渲染能力来实现复杂的canvas图表组件，例如利用echarts和uni-app的组件封装，来实现以下效果：

<template>
  <uni-echarts :option="option" :width="width" :height="height" style="width: 100%; height: 500px;"></uni-echarts>
</template>
<script>
  import echarts from '@/components/echarts/echarts'

  export default {
    components: {
      uniEcharts: echarts.uniEcharts
    },
    data() {
      return {
        option: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }]
        },
        width: '',
        height: ''
      }
    },
    mounted() {
      this.width = uni.upx2px(750)
      this.height = uni.upx2px(500)
    }
  }
</script>

1. 在nvue页面实现原生地图：

通过在nvue页面中使用原生的map组件，来实现复杂的地图组件，例如实现以下效果：

<template>
  <view>
    <view id="map" class="map"></view>
  </view>
</template>
<script>
  import uni from '@/utils/uni-app-api'

  export default {
    mounted() {
      const map = uni.createMapContext('map', this)
      map.moveToLocation()
    }
  }
</script>