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

大家好，我的开源项目PakePlus可以将网页/Vue/React项目打包为桌面/手机应用并且小于5M只需几分钟，官网地址：pakeplus.com

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

如果像参考的，可以看我的开源地址：github.com/Sjj1024/uni...

注意：如果只是安装依赖后，还不一定能正常使用，因为需要修改一下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组件内容如下：

javascript 复制代码

<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函数也可以正常使用，代码简洁了不少：

javascript 复制代码

<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的教程了，希望能帮到大家少走弯路
大家好，我是1024小神，技术群 / 私活群 / 股票群或交朋友都可以私信我。如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~