UniApp 中 nvue 盒模型入门

nvue

nvue 为 native vue 的缩写，即“原生渲染”。启用纯原生渲染模式，可以减少 App 端的包体积、减少使用时的内存占用。

启用 nvue

建议在新项目中使用，已有项目启用该功能会导致奇奇怪怪的问题发生。

在 manifest.json 文件中，通过 HBuilderX 选择 App 常用其它设置 并勾选 纯 nvue 项目 即可启用。

也可在源码视图中的 app-plus 下增加 renderer 项并设置值为 native：

// manifest.json
{
    // ...
    // App 平台特有配置
    "app-plus": {
        "renderer": "native",
        "nvue": {
            // 设置默认方向为横向，nvue 中默认为纵向 column，仅 uni-app 模式可用
            // 不过这里的设置似乎不会生效，目前不知道原因
            "flex-direction": "row"
        },
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

设置样式

在 nvue 模式中，部分 css 样式不可用，所以我们应该区分加载。

获取一些文件

我们访问 hello-uniapp 示例工程：https://github.com/dcloudio/hello-uniapp，并获取如下内容（也可新建该模板项目后 CV 大法）：

1. common/uni.css
2. common/uni-nvue.css
3. static/customicons.css
4. static/customicons.ttf
5. static/uni.ttf

上方 5 个文件根据示例工程放到同样的位置即可。

修正 App 中状态栏白色问题

在 App.vue 文件的 script 部分找到 或 创建 onShow 方法，添加如下内容：

onShow: function() {
    console.log('App Show')

    // #ifdef APP-PLUS
    const statusBarStyle = plus.navigator.getStatusBarStyle()

    console.log(`当前状态栏样式：${statusBarStyle}`)

    // 修正状态栏文字白色
    if (statusBarStyle === 'light') {
        plus.navigator.setStatusBarStyle('dark')
    }
    // #endif
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

调整基础样式

同样在 App.vue 文件的 style 部分修改：

<style lang="scss">
    /* #ifdef APP-PLUS-NVUE */
    @import '@/common/uni-nvue.css';
    @import '@/common/app.css';

    /* #endif */

    /* #ifndef APP-PLUS-NVUE */
    @import '@/common/uni.css';
    @import '@/common/web.css';
    @import '@/static/customicons.css';

    /* #endif*/

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意我们在 common 目录下并没有 app.css 和 web.css 文件，手动创建即可

编辑 web.css

html {
    /* 设置字体 */
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

page {
    background-color: #EFEFF4;
    height: 100%;
    font-size: 28rpx;
}

uni-page-body {
    background-color: #F5F5F5 !important;
    min-height: 100% !important;
    height: auto !important;
}

.uni-row {
    /* 修正 H5/小程序中的 flex 方向问题 */
    flex-direction: row !important;
}

/* 盒模型示例用 */
.uni-hello-text {
    color: #7A7E83;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

编辑 app.css

除 .uni-row 外其余样式均为示例盒模型用。后续可删除仅保留 .uni-row 即可。

.uni-row {
    flex-direction: row;
}

.uni-common-mt {
    margin-top: 30rpx;
}

.uni-title {
    font-size: 30rpx;
    font-weight: 500;
    padding: 20rpx 0;
    line-height: 1.5;
}

.uni-bg-red {
    background: #F76260;
    color: #FFF;
}

.uni-bg-green {
    background: #09BB07;
    color: #FFF;
}

.uni-bg-blue {
    background: #007AFF;
    color: #FFF;
}

.text-white {
    color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

编写示例

在 pages 目录中新建 index 目录随后在 index 中创建 index.nvue 文件，记得在 pages.json 中注册：

"pages": [{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "盒模型示例"
    }
}],
1
2
3
4
5
6

直接放上 index.nvue 内容：

<template>
    <view class="uni-container">
        <view class="uni-padding-wrap uni-common-mt">
            
            <view class="uni-hello-text">
                <text class="hello-text">Flex 是 Flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置 display:
                    flex 后，继续给 view 等容器组件设置 flex-direction:
                    row 或 column，就可以在该容器内按行或列排布子组件。uni-app 推荐使用 flex 布局。因为 flex 布局有利于跨更多平台，尤其是采用原生渲染的平台。text>
            view>

            
            <view class="uni-title uni-common-mt">flex-direction: row
                <text class="hello-text">横向布局text>
            view>
            <view class="uni-flex uni-row">
                <view class="flex-item uni-bg-red">
                    <text class="text-white">Atext>
                view>
                <view class="flex-item uni-bg-green">
                    <text class="text-white">Btext>
                view>
                <view class="flex-item uni-bg-blue">
                    <text class="text-white">Ctext>
                view>
            view>

            
            <view class="uni-title uni-common-mt">flex-direction: column
                <text class="hello-text">纵向布局text>
            view>
            <view class="uni-flex uni-column">
                <view class="flex-item flex-item-V uni-bg-red">
                    <text class="text-white">Atext>
                view>
                <view class="flex-item flex-item-V uni-bg-green">
                    <text class="text-white">Btext>
                view>
                <view class="flex-item flex-item-V uni-bg-blue">
                    <text class="text-white">Ctext>
                view>
            view>
        view>
    view>
template>

<script>
    export default {
        data() {
            return {
            }
        }
    }
script>
<style lang="scss">
    .flex-item {
        height: 200rpx;
        text-align: center;
    }

    .flex-item-V {
        height: 150rpx;
        text-align: center;
    }

    /* #ifdef APP-PLUS-NVUE */
    .flex-item {
        flex: 1;
        align-items: center;
        justify-content: center;
    }

    /* #endif */

    /* #ifdef H5 || MP */
    .flex-item {
        width: 33.33%;
        line-height: 200rpx;
    }

    .flex-item-V {
        width: 100%;
        line-height: 150rpx;
    }

    /* #endif */

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

预览图

H5 网页

手机模拟器示例

官方示例：

戳：https://hellouniapp.dcloud.net.cn/pages/component/view/view