uniapp中nvue与vue的区别

uni-app是逻辑和渲染分离的，渲染层在app端提供了两套排版引擎。
小程序方式的webview渲染，和weex方式的原生渲染，两种渲染引擎可以自己根据需要选。
vue文件走的webview渲染
nvue走weex方式的原生渲染

组件和js写法是一样的，css不一样，原生排版的能用的css必须是flex布局

uni-app的App端内置了一个基于weex改进的原生渲染引擎，提供了原生渲染能力。
在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

nvue 和 vue 相互通讯

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

Layout 布局

组件名 uni-row、uni-col 代码块： uRow、uCol

流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

如需通过npm方式使用uni-ui组件，另见文档：https://ext.dcloud.net.cn/plugin?id=55

注意事项为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
组件需要依赖 sass 插件，请自行手动安装
如使用过程中有任何问题，或者您对 uni-ui 有一些好的建议，欢迎加入 uni-ui 交流群：871950839

基本用法

使用单一分栏创建基础的栅格布局

<uni-row class="demo-uni-row">
    <uni-col>
        <view class="demo-uni-col dark_deep"></view>
    </uni-col></uni-row><uni-row class="demo-uni-row">
    <uni-col :span="12">
        <view class="demo-uni-col dark"></view>
    </uni-col>
    <uni-col :span="12">
        <view class="demo-uni-col light"></view>
    </uni-col>
</uni-row>

分栏偏移

支持偏移指定的栏数

<uni-row class="demo-uni-row">
    <uni-col :span="8">
        <view class="demo-uni-col dark"></view>
    </uni-col>
    <uni-col :span="8" :offset="6">
        <view class="demo-uni-col dark"></view>
    </uni-col></uni-row><uni-row class="demo-uni-row">
    <uni-col :span="12" :pull="6">
        <view class="demo-uni-col dark"></view>
    </uni-col></uni-row><uni-row class="demo-uni-row">
    <uni-col :span="12" :push="6">
        <view class="demo-uni-col dark"></view>
    </uni-col>
</uni-row>

响应式布局

共五个响应尺寸：xs、sm、md、lg 和 xl

<uni-row class="demo-uni-row">
    <uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <view class="demo-uni-col dark"></view>
    </uni-col>
    <uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <view class="demo-uni-col light"></view>
    </uni-col>
    <uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <view class="demo-uni-col dark"></view>
    </uni-col>
    <uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <view class="demo-uni-col light"></view>
    </uni-col>
</uni-row>

最简单的插件使用

main.js里直接引入全局

import cuCustom from './colorui/components/cu-custom.vue'

Vue.component('cu-custom',cuCustom)

app.vue里引入全局css

<style>

/*每个页面公共css */

@import "./graceUI/graceIcons.css";

@import "./graceUI/graceUI.css";

</style>

在page里

import graceLoading from '../../../graceUI/components/graceLoading.vue';

components: {

graceLoading

页面实例代码

<mpvue-echarts :echarts="echarts" :onInit="onInit" />

</div>

</template>

import * as echarts from 'echarts'

import mpvueEcharts from 'mpvue-echarts'

function initChart(canvas, width, height) {

......

}

export default {

data() {

return {

echarts,

onInit: initChart

}

components: {

mpvueEcharts

}

</script>

<style>

.container {

flex: 1;

}

<view>

</view>

<view>

</view>

</view></template><script>

// 引入插件中的js文件

import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js'

// 定义全局变量

var _self;

var canvasObj = {}

export default {

// 引入uCharts 方法组件。

data() {

return {

cWidth: '',

cHeight: '',

tips: '',

pixelRatio: 1,

serverData: '',

itemCount: 30, //x轴单屏数据密度

sliderMax: 50

}

onLoad() {

_self = this;

//#ifdef MP-ALIPAY

uni.getSystemInfo({ // 获取系统信息

success: function(res) {

if (res.pixelRatio > 1) {

//正常这里给2就行，如果pixelRatio=3性能会降低一点

//_self.pixelRatio =res.pixelRatio;

_self.pixelRatio = 2;

}

});

//#endif

this.cWidth = uni.upx2px(750);

this.cHeight = uni.upx2px(500);

onReady() {

this.getServerData(); // 执行方法

methods: {

getServerData() {

uni.showLoading({ // 弹框

title: "正在加载数据..."

})

uni.request({ // 测试使用的请求接口

url: 'https://unidemo.dcloud.net.cn/hello-uniapp-ucharts-data.json',

data: {},

success: function(res) {

console.log(res, '请求接口获取到的res')

_self.fillData(res.data); // 将返回的数据作为参数，异步调用另一个方法

fail: () => {

_self.tips = "网络错误，小程序端请检查合法域名";

complete() {

uni.hideLoading();

}

});

fillData(data) {

console.log(data, '返回的数据作为参数data')

this.serverData = data;

this.tips = data.tips;

this.sliderMax = data.Candle.categories.length;

// 扇形图参数初始

let Pie = {

series: []

};

Pie.series = data.Pie.series;

console.log(Pie.series, '扇形图参数Pie.series')

this.showPie("canvasPie", Pie); // 绘制扇形图方法

// 扇形图canvasId唯一标识, chartData数据

showPie(canvasId, chartData) {

// 调用封装的uCharts方法，配置参数后赋值给canvasObj[canvasId]对象

canvasObj[canvasId] = new uCharts({

$this: _self,

canvasId: canvasId,

type: 'pie',

fontSize: 11,

padding:[15,15,0,15],

legend:{

show:true,

padding:5,

lineHeight:11,

margin:0,

background: '#FFFFFF',

pixelRatio: _self.pixelRatio,

series: chartData.series,

animation: false,

width: _self.cWidth * _self.pixelRatio,

height: _self.cHeight * _self.pixelRatio,

dataLabel: true,

extra: {

pie: {

lableWidth: 15

}

});

// 点击事件

touchPie(e,id) {

canvasObj[id].showToolTip(e, {

format: function(item) {

return item.name + ':' + item.data

}

});

}

}</script><style>

/* 通用样式 */

.qiun-charts {

width: 750upx;

height: 500upx;

background-color: #FFFFFF;

}

.charts {

width: 750upx;

height: 500upx;

background-color: #FFFFFF;

}</style>

上一篇：uniapp总结

下一篇：uniapp开发app以及使用nvue的注意事项

您现在的位置是：网站首页> 小程序设计

uniapp 布局及插件使用