uni-app中使用nvue页面是否还有必要使用条件编译APP-NVUE

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app中使用nvue页面是否还有必要使用条件编译APP-NVUE

使用nvue开发页面时是否有必要写条件编译？

在页面里还有没有必要写条件编译？例如官方HelloUniapp项目的写法：

<!-- #ifdef APP-NVUE -->
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<!-- #endif -->

nvue模板示例

<template>
    <view class="tabs">
        <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
            <view v-for="(tab, index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabtap">
                <text class="uni-tab-item-title" :class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
            </view>
        </scroll-view>
        <view class="line-h"></view>
        <swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
            <swiper-item class="swiper-item" v-for="(tab, index1) in newsList" :key="index1">
                <!-- #ifdef APP-NVUE -->
                <list class="scroll-v list" enableBackToTop="true" scroll-y loadmoreoffset="15" @loadmore="loadMore(index1)">
                    <refresh class="refresh" @refresh="onrefresh(index1)" @pullingdown="onpullingdown" :display="tab.refreshing ? 'show' : 'hide'">
                        <div class="refresh-view">
                            <image class="refresh-icon" :src="refreshIcon" :style="{width: (tab.refreshing || pulling) ? 0: '30px'}" :class="{'refresh-icon-active': tab.refreshFlag}"></image>
                            <loading-indicator class="loading-icon" animating="true" v-if="tab.refreshing"></loading-indicator>
                            <text class="loading-text">{{tab.refreshText}}</text>
                        </div>
                    </refresh>
                    <cell v-for="(newsitem, index2) in tab.data" :key="newsitem.id">
                        <media-item :options="newsitem" @close="close(index1, index2)" @click="goDetail(newsitem)"></media-item>
                    </cell>
                    <cell class="loading-more" v-if="tab.isLoading || tab.data.length > 4">
                        <text class="loading-more-text">{{tab.loadingText}}</text>
                    </cell>
                </list>
                <!-- #endif -->
                <!-- #ifndef APP-NVUE -->
                <scroll-view class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
                    <view v-for="(newsitem, index2) in tab.data" :key="newsitem.id">
                        <media-item :options="newsitem" @close="close(index1, index2)" @click="goDetail(newsitem)"></media-item>
                    </view>
                    <view class="loading-more" v-if="tab.isLoading || tab.data.length > 4">
                        <text class="loading-more-text">{{tab.loadingText}}</text>
                    </view>
                </scroll-view>
                <!-- #endif -->
            </swiper-item>
        </swiper>
    </view>
</template>


Harmonyos Next教程
3 回复

看你实际的需求 如果你这个nvue页面 需要兼容h5和app的话 可能会用到条件编译 因为有些组件只能在app端使用 例如你截图的list组件 只能在app端使用 h5端只能用scroll-view 所以就要用到条件编译了


谢谢了，在非 app 端，uni-app 编译模式的 nvue 文件也会被编译

在uni-app中，使用nvue页面主要是为了利用Weex引擎提供的原生渲染能力，以提升页面性能，特别是在处理复杂UI组件或需要高频刷新的场景中。nvue页面与普通的vue页面在渲染机制上有本质区别，前者使用原生组件渲染，后者则是使用WebView渲染。

条件编译#ifdef APP-NVUE或#ifndef APP-NVUE在uni-app中用于区分不同平台或不同渲染模式下的代码逻辑。尽管nvue页面在某些性能关键场景下有其独特优势，但在决定是否在nvue页面中使用条件编译APP-NVUE时，需要考虑几个关键因素：

  1. 平台兼容性：如果你的应用需要同时支持小程序、H5以及App等多个平台，并且某些功能或组件仅在App（特别是nvue页面）中可用，那么条件编译就非常必要。例如，你可能需要在nvue页面中使用某些原生组件或API，而这些在vue页面中不可用。

  2. 代码维护性：过度使用条件编译可能会导致代码结构复杂，难以维护。因此，建议仅在确实需要区分不同平台或渲染模式时才使用条件编译。

以下是一个简单的代码示例，展示了如何在nvue页面中使用条件编译：

<template>
  <div>
    <text>{{ message }}</text>
    <!-- 仅在nvue页面中显示的组件 -->
    #ifdef APP-NVUE
    <native-component></native-component>
    #endif
    <!-- 仅在非nvue页面中显示的组件（理论上这部分代码不会出现在nvue文件中，仅作为示例） -->
    #ifndef APP-NVUE
    <web-view src="https://example.com"></web-view>
    #endif
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, nvue!'
    };
  }
};
</script>

<style scoped>
/* nvue页面的样式使用flex布局 */
div {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>

在这个例子中，<native-component>是一个假想的原生组件，它仅在nvue页面（即App平台使用Weex引擎渲染的页面）中可用。而<web-view>组件则通常用于vue页面，因为它依赖于WebView渲染环境。

综上所述，是否在nvue页面中使用条件编译APP-NVUE取决于你的具体需求。如果需要在nvue页面中利用原生渲染优势或访问特定原生功能，那么条件编译是一个有效的工具。然而，应谨慎使用以避免代码复杂性增加。

回到顶部