uni-app nvue 跳转另一个预加载的 nvue 页面之后，打开 popup 组件报错且 popup 样式异常

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

uni-app nvue 跳转另一个预加载的 nvue 页面之后，打开 popup 组件报错且 popup 样式异常

开发环境信息

项目 详情
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 10 专业版 22H2（19045.4780）
HBuilderX类型 Alpha
HBuilderX版本号 4.43
手机系统 Android
手机系统版本号 Android 15
手机厂商 小米
手机机型 红米 K70
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码

A 页面（tabbar页面）

onLoad(() => {  
    uni.preloadPage({url: "/pages/wallet/withdraw/record"})  
})

B 页面

<u-popup :show="isShowStatusPicker" mode="top" :round="8" @close="isShowStatusPicker = false">  
    <u-navbar title="提现记录" bg-color="#fff"></u-navbar>  
    <view class="status-picker">  
        <view class="filter">  
            <view class="filter-item" @click="isShowStatusPicker = false">  
                <text class="filter-item-text">提现状态：{{ statusList[currentStatusIndex].label }}</text>  
                <m-icon name="arrow-top-fill" color="#333" :size="10"></m-icon>  
            </view>  
        </view>  
        <view class="list">  
            <view class="list-item" :class="{active: index === currentStatusIndex, nomargin: (index+1)%4===0}" v-for="(item, index) in statusList" :key="index" @click="currentStatusIndex = index">  
                <text class="list-item-text" :class="{active: index === currentStatusIndex }">{{item.label}}</text>  
            </view>  
        </view>  
        <view class="action">  
            <m-button text="取消" :customStyle="btnStyle" @click="isShowStatusPicker = false"></m-button>  
            <m-button text="确认" type="primary" bold :customStyle="btnStyle" @click="setStatus"></m-button>  
        </view>  
    </view>  
</u-popup>

操作步骤

A nvue 跳转预加载的 B nvue 后打开 popup

预期结果

打开 popup 不报错，样式正常显示

实际结果

打开 popup 报错，样式异常

bug描述

两个都是 nvue 页面，由于 A 页面跳转到 B 页面会有一段短暂的白屏所以用了预加载，白屏问题是解决了但是打开 B 页面中的 popup 时报错了，且 popup 的圆角失效了，里面的 navbar 组件也消失了。修改代码热更新后再次报错，A 页面直接白屏。

报错

16:47:03.126 [Vue warn]: Unhandled error during execution of render function  
 at <UNavbartitle="提现记录"bg-color="#fff">  
 at <UTransitionshow=truecustomStyle={"zIndex":10075,"position":"fixed","display":"flex","top":0,"left":0,"right":0}mode="slide-down" ...>  
 at <UPopupshow=truemode="top"round=8 ...>  
 at <Record__pageId=4__pagePath="pages/wallet/withdraw/record"__pageQuery={}>
16:47:03.126 TypeError: e.$getAppWebview is not a function  
16:47:03.126 [Vue warn]: Unhandled error during execution of render function  
 at <USafeBottomkey=2>  
 at <UTransitionshow=truecustomStyle={"zIndex":10075,"position":"fixed","display":"flex","top":0,"left":0,"right":0}mode="slide-down" ...>  
 at <UPopupshow=truemode="top"round=8 ...>  
 at <Record__pageId=4__pagePath="pages/wallet/withdraw/record"__pageQuery={}>
16:47:03.126 TypeError: e.$getAppWebview is not a function  

reportJSException >>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught TypeError: e.$getAppWebview is not a function  
 at wf (uni-jsframework.js:45:123029)  
 at  (uni-jsframework.js:45:123831)  
 at  (uni-jsframework.js:45:254)  
 at  (uni-jsframework.js:45:126105)  
 at  (uni-jsframework.js:45:254)

Harmonyos Next教程
4 回复


评论可以正常插入图片

所以现在 nvue 的 bug 也直接不管了是吗

在uni-app中使用nvue页面进行页面跳转时，确实可能会遇到一些与原生组件相关的兼容性问题，特别是当涉及到像popup这样的组件时。这类问题通常与组件的生命周期管理、页面栈管理或样式隔离有关。以下是一个简化的代码示例，展示如何在nvue页面之间进行跳转，并在目标页面中正确显示popup组件。

主页面 (main.nvue)

首先，我们创建一个简单的nvue页面，其中包含一个按钮用于跳转到另一个nvue页面。

<template>
  <div>
    <button @click="navigateToDetail">Go to Detail Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToDetail() {
      uni.navigateTo({
        url: '/pages/detail/detail.nvue',
        events: {},
        success: function() {},
        fail: function() {}
      });
    }
  }
}
</script>

目标页面 (detail.nvue)

在目标页面中，我们将尝试显示一个popup组件。这里需要注意的是，nvue中的popup组件需要特别处理样式，因为nvue页面使用的是Weex引擎，其CSS处理与Vue页面有所不同。

<template>
  <div>
    <popup ref="myPopup" :modal="true" position="center">
      <div class="popup-content">
        Hello, this is a popup!
      </div>
    </popup>
    <button @click="showPopup">Show Popup</button>
  </div>
</template>

<script>
export default {
  methods: {
    showPopup() {
      this.$refs.myPopup.show();
    }
  }
}
</script>

<style>
.popup-content {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  color: white;
}
</style>

注意事项

  1. 样式处理：在nvue中，样式可能需要使用特定的前缀或不同的属性名。例如，使用flex-direction而不是display: flex。
  2. 组件生命周期：确保popup组件在页面完全加载后再进行操作。如果popup组件在页面跳转后立即显示，可能会因为页面尚未完全渲染而导致样式异常。
  3. 平台差异：不同平台（如iOS和Android）上，nvue组件的行为可能有所不同。测试时需在多平台上验证。

以上代码提供了一个基本的框架，用于在nvue页面间跳转并显示popup组件。如果遇到具体的样式错误或功能问题，请检查控制台日志，查找可能的错误或警告信息，并根据这些信息调整代码。

回到顶部