EasyAR 微信小程序 快速入门¶
一、开发前准备¶
下载“微信开发者工具”:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
获取“AppID(小程序ID)”,如果没有,请注册微信公众平台账号:https://mp.weixin.qq.com/;或申请测试账号:https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html
本文假设你已熟悉使用“微信开发者工具”。工具使用说明:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
EasyAR开发账号,如没有,请注册:https://www.easyar.cn/
二、开发步骤¶
申请试用或购买云识别


上传识别图


WebAR中未使用到“宽度”,输入“1”即可,“Meta”一般用于存储AR内容信息, 例如识别物的JSON信息等。本文档sample使用的识别图地址:https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png, 3D模型的Meta为:{"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4};视频的Meta为:{"videoUrl":"https://sightp-assets.sightp.com/crs-mini/EasyAR-Mega.mp4"}

创建 apiKey, apiSecret


下载示例,解压到你的目录

导入微信开发者工具

选择下载的sample,并选择一个AppId,如果没有,请注册(请查看开发前准备)。

在详情设置中勾选“不检验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”

“微信开发者工具”中览效果

修改代码中配置信息(app.js)

获取apiKey, apiSecret(开发中心左侧菜单:授权 -> 云服务API KEY)

获取crsAppId, clientEndUrl(开发中心左侧菜单:云服务 -> 云识别管理)

如果你的开发机上有相机,可以点击“识别体验”按钮体验
点击“预览”,不要使用“真机调试”

重要提示: 如果你未将域名添加到合法请求列表中,请开启“开发调试”。打开方法如下:

扫描二维码在手机上预览

点击“识别体验”,将相机对着识别图,识别成功后将播放3D内容,效果如下:
识别图片如下


二、常见问题¶
网络请求404错误
如果在识别过程出现“POST https://205e...7f7.cn1.crs.easyar.com:8443/search 404 NOT Found”错误,是指未识别到目标,识别过程中不要剧烈晃动相机。
模型加载错误
建议使用gltf、glb等格式模型,小程序中与网页中加载不同,请调整模型。
画面中看到不模型
调整threejs中相机坐标、模型坐标或模型大小。
域名不在合法域名列表中
{"errno":600002,"errMsg":"request:fail url not in domain list"}
请将域名“uac.easyar.com”与“....cn1.crs.easyar.com:8443”(你的云识别clientEndUrl)加入request合法域名列表中。 配置说明:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
黑屏或异常退出
可能是你的手机不支持XR-FRAME,XR-FRAME官方DEMO如下:

微信开发工具不支持AR系统
微信开发工具不支持AR系统,请在手机上预览。
控制台上提示如“[xr-frame] Error: ar-system is only supported in wx-mini-program!”
三、相关资源¶
EasyAR没有微信小程序的3D引擎,你可以使用XR-FRAME或threejs等。