uni-app subNvue组件打包后里面的元素不显示

uni-app subNvue组件打包后里面的元素不显示

开发环境 版本号 项目创建方式
Windows windows11 HBuilderX

操作步骤：

  • 离线打包

预期结果：

  • 正常显示subNvue

实际结果：

  • subNvue只剩下背景色

bug描述：

使用真机和模拟器调试均可正常显示subNvue组件，离线打包后组件内元素不显示，只剩下pages.json中配置的背景色。

<template>  
  <div>  
    <text class="title">ceshi</text>  
    <image src="../../../static/imgs/bz2.png"></image>  
  </div>  
</template>  

<script>  
export default {  
  data() {  
    return {  

    }  
  },  
  methods: {  

  }  
}  
</script>  

<style lang="scss">  
.title{  
  font-size: 16rpx;  
  color: #007AFF;  
}  
</style>  

onReady() {  
  const testSub = uni.getSubNVueById('testSub')  
  testSub.show('fade-in', 200)  
}

更多关于uni-app subNvue组件打包后里面的元素不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

我也是，但是我只有iphoneX不显示，其余都显示

更多关于uni-app subNvue组件打包后里面的元素不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也遇到这问题了。请问解决了吗？

在 uni-app 中，subNVue 是一种原生子窗体的实现方式，通常用于高性能的原生渲染场景。如果你在打包后发现 subNVue 组件中的元素不显示，可能是由于配置问题或代码逻辑不正确导致的。以下是一些可能的原因和解决方案：

1. 检查 subNVue 的配置

确保在 pages.json 中正确配置了 subNVue，并且路径和样式设置正确。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "subNVue": [
          {
            "id": "subNVueId", // 子窗体的唯一标识
            "path": "pages/subNVue/index", // 子窗体的路径
            "style": {
              "position": "absolute",
              "top": "0",
              "left": "0",
              "width": "100%",
              "height": "100%",
              "background": "transparent"
            }
          }
        ]
      }
    }
  ]
}

2. 检查 subNVue 页面的代码

确保 subNVue 页面的代码逻辑正确，并且元素已经正确渲染。

<template>
  <view class="sub-nvue-container">
    <text>Hello, subNVue!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
.sub-nvue-container {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

3. 确保 subNVue 被正确显示

在父页面中，确保通过 uni.getSubNVueById 获取到 subNVue 实例并调用 show 方法。

const subNVue = uni.getSubNVueById('subNVueId');
subNVue.show();

4. 检查 subNVue 的样式

subNVue 的样式默认是透明的，如果背景色为透明，可能会导致元素看起来不显示。可以尝试设置背景色：

.sub-nvue-container {
  background-color: white;
}
回到顶部