uni-app使用小程序的xr-frame在父组件中引用时传递的width，height参数未生效

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

uni-app使用小程序的xr-frame在父组件中引用时传递的width，height参数未生效

产品分类

uniapp/小程序/微信

开发环境信息

项目 信息
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
第三方开发者工具版本号 1.06.2405020
基础库版本号 3.53
项目创建方式 CLI
CLI版本号 @vue/cli 5.0.8

示例代码

新建一个 xr-start 组件

新建一个后缀名是 .wxml 的文件：

<xr-scene id="xr-scene" bind:ready="handleReady">  
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">  
    <xr-asset-load type="gltf" asset-id="gltf-just_a_girl" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/just_a_girl/index.glb" />  
  </xr-assets>  
  <xr-node>  
    <xr-node node-id="camera-target" position="0 0 0"></xr-node>  
    <xr-gltf node-id="gltf-just_a_girl" position="0 -0.5 0" rotation="0 0 0" scale="0.01 0.01 0.01" model="gltf-just_a_girl"></xr-gltf>  
    <xr-camera  
      id="camera" node-id="camera" position="0 0.4 1.6" clear-color="0.9 0.9 0.9 1"  
      target="camera-target"  
      camera-orbit-control=""  
    ></xr-camera>  
  </xr-node>  
  <xr-node node-id="lights">  
    <xr-light type="ambient" color="1 1 1" intensity="0.3" />  
    <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="2" />  
  </xr-node>  
</xr-scene>

新建一个后缀名是 .json 的文件：

{  
  "component": true,  
  "renderer": "xr-frame",  
  "usingComponents": {}  
}

新建一个后缀名是 .js 的文件：

Component({  
    behaviors: [require('../common/share-behavior').default],  
    properties: {  
        a: Number,  
    },  
    data: {  
        loaded: false  
    },  
    lifetimes: {},  
    methods: {  
        handleReady({detail}) {  
            const xrScene = this.scene = detail.value;  
            console.log('xr-scene', xrScene);  
        },  
        handleAssetsProgress: function({detail}) {  
            console.log('assets progress', detail.value);  
        },  
        handleAssetsLoaded: function({detail}) {  
            console.log('assets loaded', detail.value);  
            this.setData({loaded: true});  
        },  
        handleRaf: function({detail}) {  
            console.log('raf', detail.value);  
        }  
    }  
});

在 test.vue 页面引入该组件：

<template lang="pug">  
view.test  
  xr-start#main-frame(  
    disable-scroll  
    :url="testSrc"  
    :width="renderWidth"  
    :height="renderHeight"  
    :style="{width:`${width}px`, height:`${height}px`, display: 'block'}"  
  )  
</template>

打包后，width 和 height 属性没有展示在标签上，被删除。

操作步骤

按照小程序官方 xr-frame 文档操作就可以复现，出来的 3D 模型模糊，width 和 height 没有设置成功的问题。

预期结果

能够设置 width 和 height。

实际结果

不能够设置 width 和 height。

相关链接


Harmonyos Next教程
13 回复

可以临时在 // node_modules@dcloudio\uni-mp-weixin\dist\uni.compiler.js 文件， customElements 数组内多加一个 ‘xr-start’ 标签解决


无@dcloudio\uni-mp-weixin\dist\uni.compiler.js 怎么操作

回复 2***@qq.com: cli项目的话，就在根目录 node_modules找起，如果是hbuilderX项目的话，可以从hbuilder应该的目录下，从\plugins\uniapp-cli-vite\node_modles 目录找起

回复 BFC: 按照这个办法解决了，感谢，请问这个bug 什么时候修复

好的，谢谢

回复 BFC: "应该的目录下"是什么意思

回复 1***@qq.com: 不好意思，写错了， 是hbuilder应用的安装目录

你好，已确认bug， 感谢反馈。

HBuilderX 版本 4.27.2024091308-alpha 已修复

为啥我更新到 4.32.2024110103-alpha 版本也不行呢， width和height属性不出来

自己实验出来了，vue2 版本确实么问题，但是vue3版本还是没有

不是，为什么我这个还是模糊的，最新的版本了

在uni-app中使用小程序的xr-frame组件时，如果在父组件中传递的width和height参数未生效，可能是由于数据绑定或组件使用方式不正确导致的。以下是一个基本的代码示例，展示如何在父组件中正确传递width和height参数给xr-frame组件，并确保这些参数在子组件中生效。

父组件 (Parent.vue)

<template>
  <view>
    <xr-frame :width="frameWidth" :height="frameHeight" @load="onFrameLoad"></xr-frame>
  </view>
</template>

<script>
import XrFrame from './XrFrame.vue'; // 假设子组件名为XrFrame.vue

export default {
  components: {
    XrFrame
  },
  data() {
    return {
      frameWidth: 640, // 设置默认宽度
      frameHeight: 480 // 设置默认高度
    };
  },
  methods: {
    onFrameLoad() {
      console.log('xr-frame loaded');
    }
  }
};
</script>

<style scoped>
/* 样式根据需要调整 */
</style>

子组件 (XrFrame.vue)

<template>
  <view class="xr-frame-container" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }">
    <!-- xr-frame的具体内容，这里仅为示例 -->
    <canvas canvas-id="xrCanvas" style="width: 100%; height: 100%;"></canvas>
  </view>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    }
  },
  computed: {
    frameWidth() {
      return this.width;
    },
    frameHeight() {
      return this.height;
    }
  },
  mounted() {
    console.log('XrFrame mounted with width:', this.frameWidth, 'height:', this.frameHeight);
    // 初始化xr-frame相关逻辑，如创建WebGL上下文等
  }
};
</script>

<style scoped>
.xr-frame-container {
  position: relative;
  overflow: hidden;
}
</style>

注意事项

  1. 确保props正确传递：在父组件中，通过:width="frameWidth"和:height="frameHeight"将frameWidth和frameHeight传递给子组件。
  2. 在子组件中使用props：子组件通过props接收width和height，并在计算属性中返回，以确保可以在模板中使用。
  3. 样式绑定：在子组件的模板中，使用:style绑定宽度和高度，确保它们能够动态更新。
  4. 初始化逻辑：在子组件的mounted钩子中，可以添加初始化xr-frame相关的逻辑，如创建WebGL上下文等。

通过以上方式，确保父组件传递的width和height参数能够在子组件中正确生效。

回到顶部