UniApp での nvue ボックスモデルの使用開始

音

nvueとはnative vueの略で、つまり「ネイティブレンダリング」です。ピュアネイティブレンダリングモードを有効にすると、アプリ側のパッケージサイズが削減され、使用中のメモリ使用量が削減されます。

nvueを有効にする

新しいプロジェクトでこの機能を使用することをお勧めします。既存のプロジェクトでこの機能を有効にすると、奇妙な問題が発生します。

manifest.jsonファイル内で、 HBuilderXによるアプリ共通設定を選択し、纯 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 Dafa を使用することもできます)。

common/uni.css
common/uni-nvue.css
static/customicons.css
static/customicons.ttf
static/uni.ttf

サンプルプロジェクトに応じて、上記5 つのファイルを同じ場所に配置できます。

アプリの白いステータスバーの問題を修正

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>

共通ディレクトリには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.nvuepages.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>