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"
        },
    }
}

设置样式

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

获取一些文件

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

common/uni.css
common/uni-nvue.css
static/customicons.css
static/customicons.ttf
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
},

调整基础样式

同样在 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>

注意我们在 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;
}

编辑 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;
}

编写示例

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

"pages": [{
    
    
    "path": "pages/index/index",
    "style": {
    
    
        "navigationBarTitleText": "盒模型示例"
    }
}],

直接放上 index.nvue 内容：

<template>
    <view class="uni-container">
        <view class="uni-padding-wrap uni-common-mt">
            <!-- text 内容如果换行，Flex 的 F 字母前会存在空白符 -->
            <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>

            <!-- 如果 flex-direction: row 切换至下一行，第一个字符串前会存在空白符 -->
            <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">A</text>
                </view>
                <view class="flex-item uni-bg-green">
                    <text class="text-white">B</text>
                </view>
                <view class="flex-item uni-bg-blue">
                    <text class="text-white">C</text>
                </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">A</text>
                </view>
                <view class="flex-item flex-item-V uni-bg-green">
                    <text class="text-white">B</text>
                </view>
                <view class="flex-item flex-item-V uni-bg-blue">
                    <text class="text-white">C</text>
                </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>