一、前言
最近要基于微信小程序实现一个具备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页面。