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/
二、开发步骤¶
申请试用或购买云识别
![_images/0101.png](_images/0101.png)
![_images/0102.png](_images/0102.png)
上传识别图
![_images/0201.png](_images/0201.png)
![_images/0202.png](_images/0202.png)
WebAR中未使用到“宽度”,输入“1”即可,“Meta”一般用于存储AR内容信息, 例如识别物的JSON信息等。本文档sample使用的识别图地址:https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png, 3D模型的Meta为:{"modelUrl": "https://staticfile-cdn.sightp.com/easyar/webar/mini-tracking/xiaoxiongmao.glb", "scale": 0.4};视频的Meta为:{"videoUrl":"https://sightp-tour-cdn.sightp.com/mini/EasyAR-Mega-v0.3-s.mp4"}
![_images/0203.png](_images/0203.png)
创建 apiKey, apiSecret
![_images/0301.png](_images/0301.png)
![_images/0302.png](_images/0302.png)
下载示例,解压到你的目录
![_images/0401.png](_images/0401.png)
导入微信开发者工具
![_images/0501.png](_images/0501.png)
选择下载的sample,并选择一个AppId,如果没有,请注册(请查看开发前准备)。
![_images/0502.png](_images/0502.png)
在详情设置中勾选“不检验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”
![_images/0503.png](_images/0503.png)
“微信开发者工具”中览效果
![_images/0504.png](_images/0504.png)
修改代码中配置信息(app.js)
![_images/0601.png](_images/0601.png)
获取apiKey, apiSecret(开发中心左侧菜单:授权 -> 云服务API KEY)
![_images/0602.png](_images/0602.png)
获取crsAppId, clientEndUrl(开发中心左侧菜单:云服务 -> 云识别管理)
![_images/0603.png](_images/0603.png)
如果你的开发机上有相机,可以点击“识别体验”按钮体验
点击“预览”,不要使用“真机调试”
![_images/0701.png](_images/0701.png)
重要提示: 如果你未将域名添加到合法请求列表中,请开启“开发调试”。打开方法如下:
![_images/0702.jpg](_images/0702.jpg)
扫描二维码在手机上预览
![_images/0703.jpg](_images/0703.jpg)
点击“识别体验”,将相机对着识别图,识别成功后将播放3D内容,效果如下:
识别图片如下
![_images/m-model.png](_images/m-model.png)
![_images/m-video.png](_images/m-video.png)
二、常见问题¶
网络请求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如下:
![](https://res.wx.qq.com/wxdoc/dist/assets/img/1.697d997f.png)
微信开发工具不支持AR系统
微信开发工具不支持AR系统,请在手机上预览。
控制台上提示如“[xr-frame] Error: ar-system is only supported in wx-mini-program!”
三、相关资源¶
EasyAR没有微信小程序的3D引擎,你可以使用XR-FRAME或threejs等。