uniapp+vue3+vite+ts+xr-frame实现ar+vr渲染踩坑记

这个坑真的好深，如果有产品经理给你提这个需求，能把他打一顿就打一顿吧，反正这玩意真的挺费事的，而且这玩意在实际应用中没有太大的用处，只会拉垮小程序的性能，我个人认为是画蛇添足，但是又能怎么办呢，现在还没有实现财富自由

如果像参考的，可以看我的开源地址：https://github.com/Sjj1024/uniapp-vue3

注意：如果只是安装依赖后，还不一定能正常使用，因为需要修改一下uniapp底层的编译代码

就是这个路径下的customElements这个数组里面，要添加上你的xr组件！！！！！很重要

创建XR组件和配置

在pages同级目录创建一个wxcomponents目录，里面创建微信原生的xr组件：

然后在pages.json中将这些组件添加到你要展示的页面中：

这里的路径要注意一定是：../../开头的，因为这个组件最终编译后，要在微信小程序中引入的，而不是根据pages.json文件的路径来说的

还要在manifest.json中配置上usingComponents和lazyCodeLoading为true：

还有特别注意的是，这些xr组件中的index.json里面要配置：

添加展示页面和渲染

因为渲染的时候，需要用到容器的宽高和渲染的宽高，所以需要先在全局App.vue中获取到手机屏幕尺寸信息：

获取到这些信息后，存储到本地缓存中，然后在别的组建中就可以使用了，这里比较重要的就是：

创建一个vue页面来展示并渲染这些场景，并引入刚才获取到的屏幕宽高：

这里拿到宽高之后，要给到xr-ar-tracker这个组件，但是需要注意：一定要先修改uniapp底层的编译代码，修改的文件/node_modules/@dcloudio/uni-mp-weixin/dist/uni.compiler.js里面的customElements变量：

然后你通过属性设置的宽高才会生效！这是uniapp的回答，所以一定要注意！

整体的vue组件内容如下：

<template><view class="content"><xr-ar-tracker:width="renderWidth":height="renderHeight":style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></xr-ar-tracker></view>
</template><script>
import {screenWidth,screenHeight,renderWidth,renderHeight,windowWidth,windowHeight,
} from '@/utils/comm'export default {data() {return {width: windowWidth,height: windowHeight,renderWidth: renderWidth,renderHeight: renderHeight,screenWidth: screenWidth,screenHeight: screenHeight,}},onLoad() {console.log('windowWidth', windowWidth)console.log('windowHeight', windowHeight)console.log('renderWidth', renderWidth)console.log('renderHeight', renderHeight)},methods: {},
}
</script><style>
.content {display: flex;flex-direction: column;align-items: center;justify-content: center;
}
</style>

使用Vue3的setup也可以

换成使用vue3的setup函数也可以正常使用，代码简洁了不少：

<template><xr-ar-tracker:width="renderWidth":height="renderHeight":style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></xr-ar-tracker>
</template><script setup lang="ts">
import {screenWidth,screenHeight,renderWidth,renderHeight,
} from '@/utils/comm'
</script><style>
.content {display: flex;flex-direction: column;align-items: center;justify-content: center;
}
</style>

其他的组件也可以正常使用，这应该算是第一个讲解怎么在uniapp的vue3种正常使用xr-frame的教程了，希望能帮到大家少走弯路