一、前言

最近要基于微信小程序实现一个具备AR功能的APP，在进行技术选型时，发现小程序本身自带了XR-FRAME这个框架，

从描述上来看：

没有比它更“合适”的，用来进行AR功能开发的框架了 本来想使用 Vibe Coding 无痛完成开发，但是却在实际使用中，发现大模型写不太来 wxml 和<xr-...>相关的代码

于是在此开了一个系列文章，用来记录我遇到的坑 😓

二、从 1 到 1.x

个人的建议，一开始不从0到1，而是从1到1.x，即基于现有的demo二次开发一个

否则，如果想在学习完下方所有<xr->相关的基础元素，再开始代码编写，着实头疼

官方文档里提供了扫码即可查看的示例

不过呢，没放源码的链接，这边我通过github找到了大概就是官方文档示例的源码仓库，地址如下：

dtysky/xr-frame-demo: Demos for xr-frame system in wx-mini-program.

运行后的效果如下：

三、动手试试

需求背景：我期望实现一个基础的AR功能，即扫描一张自定义的图片，然后能够出现一个自定义的元素

编码工具：Trae-CN

3.1 如何用【Trae】帮忙编写【微信开发者工具】里的工程代码

习惯了vibe coding后，【微信开发者工具】并不像VSCODE一样，也不能说通过IDEA插件的方式安装AI IDE工具 多少有点寸步难行，真的不想 古法编程 😭

---

其实很简单，在【微信开发者工具】里新建一个工程之后

在Trae里打开此工程即可

然后Trae里写代码，【微信开发者工具】里负责 编译 即可

3.2 基于现有页面完成自定义改造

我们将刚刚git clone下来的项目的源码直接替换掉新建的示例工程的代码，

然后运行它，选择下方标签

然后再选择此功能页

可以看到，此功能页的实际效果，就符合了我们在本章节初的需求背景

扫描具体的某一张图片（鹿的图片），然后出现自定义元素（蝴蝶）

我们快速在源码中定位到相关页面的

但是却发现怎么JS里面几乎是空的？

查阅文档后我们明白behaviors有点类似 Vue 中的mixins，

那显然，我们暂时不用关心sceneReadyBehavior中到底有什么

接着看别的文件，我们发现了在JSON中的这个

一开始我没仔细看，我还纳闷为什么这个组件还要引用自己 😓

然后才发现这里命名都很一致，不过一个是 pages/... 一个是 components/... 😓

不过也可以取巧，试着🎲赌一下被识别的图片名称和官网示例的链接是一致的

你还真别说，还真的一致，😀

这种另辟蹊径的方式，也能帮我这位老眼昏花的人，找到核心JS代码的位置 miniprogram\components\template\xr-template-markerLock\index.js

3.3 资源替换

3.3.1 识别图替换

由于微信小程序对打包上传的代码有严格的大小限制，不超过2MB，

🙅‍因此图方便使用静态图片放在工程里，走不通

这里我用某云的对象存储解决这个问题，提供一个公有读，私有写的链接即可

不过说个题外话，我发现生成的链接粘贴到浏览器里会触发立刻下载，

而不是和微信官网示例的鹿的图片一样，可以网页预览，

好奇的同时去学习了一下，发现是 Header 的问题， 我们设置 Content-Disposition 为 inline 即可实现网页预览了

3.3.2 展示元素替换

我期望将原来的模型换成视频，这时候就可以利用Tare基于工程上下文去帮我们实现，同样运行demo工程 找到应用视频的页面，定位到源码位置

我们不需要去了解 xr.XRGLTF 切换到 xr.XRMesh 需要注意什么，Trae 会去了解的

3.3.3 成果

四、总结

在本篇文章，我们实现了最基础的AR功能，在下一篇文章，我们会将模型、视频、图片相结合，实现拥有更多功能的AR页面。