EasyAR 微信小程序 快速入门

一、开发前准备

  1. 下载“微信开发者工具”:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

  2. 获取“AppID(小程序ID)”,如果没有,请注册微信公众平台账号:https://mp.weixin.qq.com/;或申请测试账号:https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html

  3. 本文假设你已熟悉使用“微信开发者工具”。工具使用说明:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

  4. EasyAR开发账号,如没有,请注册:https://www.easyar.cn/

二、开发步骤

  1. 申请试用或购买云识别

_images/0101.png _images/0102.png
  1. 上传识别图

_images/0201.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
  1. 创建 apiKey, apiSecret

_images/0301.png _images/0302.png
  1. 下载示例,解压到你的目录

_images/0401.png
  1. 导入微信开发者工具

_images/0501.png

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

_images/0502.png

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

_images/0503.png

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

_images/0504.png
  1. 修改代码中配置信息(app.js)

_images/0601.png

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

_images/0602.png

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

_images/0603.png

如果你的开发机上有相机,可以点击“识别体验”按钮体验

  1. 点击“预览”,不要使用“真机调试”

_images/0701.png

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

_images/0702.jpg

扫描二维码在手机上预览

_images/0703.jpg

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

  1. 识别图片如下

_images/m-model.png _images/m-video.png

二、常见问题

  1. 网络请求404错误

    如果在识别过程出现“POST https://205e...7f7.cn1.crs.easyar.com:8443/search 404 NOT Found”错误,是指未识别到目标,识别过程中不要剧烈晃动相机。

  2. 模型加载错误

    建议使用gltf、glb等格式模型,小程序中与网页中加载不同,请调整模型。

  3. 画面中看到不模型

    调整threejs中相机坐标、模型坐标或模型大小。

  4. 域名不在合法域名列表中

    {"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

  5. 黑屏或异常退出

    可能是你的手机不支持XR-FRAME,XR-FRAME官方DEMO如下:

  1. 微信开发工具不支持AR系统

    微信开发工具不支持AR系统,请在手机上预览。

    控制台上提示如“[xr-frame] Error: ar-system is only supported in wx-mini-program!”

三、相关资源

EasyAR没有微信小程序的3D引擎,你可以使用XR-FRAME或threejs等。

  1. 微信XR-FRAME, https://developers.weixin.qq.com/miniprogram/dev/framework/xr-frame

  2. threejs微信移植版,https://github.com/wechat-miniprogram/threejs-miniprogram