灵境工坊用户中心

Appearance

接入到小程序 ​

申请插件权限 ​

  • 首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件，通过 AppID wx33b4f056bf74d649 查找插件并添加。
  • 或者在微信小程序开发者工具中，导入示例 Demo 以后，等开发工具提示需要插件权限时，点击『申请』

插件使用 ​

  1. 在 app.json 中申明插件 ​

    image-20250226103539645

    json
    "plugins": {
    "mirror-plugin": {
        "version": "4.1.0",
        "provider": "wxb2e0f389e1c20a5f"
    }
},

  2. 使用插件 ​

    插件目前对外提供了一个 scene-page 页面和一个 scene 组件。

    使用 scene-page 页面 ​

    用于快速使用，已经做好的 page ，UI 同预览小程序，带参数跳转即可使用。

    image-20250226104342527

    如上图，直接在需要的位置，通过跳转到插件的 scene-page 页面，并带上 appKey、appSecret、sceneId 即可。

    image-20250226104723037

    使用 scene 组件 ​

    功能组件，没有 UI，需要定制 UI 可使用组件方式使用

    创建一个页面承载这个组件，在页面 json 文件中申明调用的组件

    image-20250226110647745

    在 wxml 使用组件

    image-20250226110752120

    xml
    <mirror-scene id="plugin_comp" sceneObj="{{sceneObj}}" debug="{{false}}" showLoading="{{true}}" bind:imgTrackerSwitch="handleImgTrackerSwitch" bind:assetLoaded="handleAssetLoaded" bind:assetProgress="handleAssetProgress"></mirror-scene>

    组件接受的参数：

    参数类型描述
    sceneObjObject场景的信息
    debugBoolean是否输出调试 log
    showLoadingBoolean是否显示微信自带的 loading

    回调事件：

    参数描述
    imgTrackerSwitch当检测到识别图或者丢失识别图时回调
    assetLoaded场景加载完成回调
    assetProgress模型加载进度（加载完成的元素个数/场景中总元素个数）
    sceneDetail回调场景的信息，包含识别图、识别图尺寸等
    handleTouchElement用户点击元素回调

    组件对外方法

    拍照 ​
    javascript
    this.plugin = this.selectComponent('#plugin_comp');
const res = await this.plugin.takePhoto();
    录制视频 ​
    • 开始拍摄视频
    javascript
    this.plugin = this.selectComponent('#plugin_comp');
const videoBitsPerSecond = 3000;
await this.plugin.recordStart(videoBitsPerSecond)
    • 结束拍摄视频
    javascript
    const res = await this.plugin.recordFinish();
    • 获取拍摄状态
    javascript
    const isRecording = this.plugin.getRecordState();

示例代码 ​

mirror_sample_4.3.1.zip