跳转到内容

演练场

Web端插件

打开场景演练场

打开合辑演练场

演练场用于在线体验 Kivicube iframe插件。你可以直接选择一个 API 示例,填写参数,修改源码并立即查看预览结果,适合用来快速验证接入方式、调试参数或熟悉高级 API 的调用方式。

使用方式

进入页面后,按下面的顺序使用即可:

  1. 在顶部右侧选择 SceneCollection
  2. 在左侧选择想测试的 API。
  3. 在顶部输入想要接入的场景ID或合辑ID,也可用官方默认的。
  4. 在中间编辑器输入想运行的代码。
  5. 点击右上角 Run 开始预览,验证代码运行结果。

顶部参数说明

  • Scene 模式需要填写 Scene ID
  • Collection 模式需要填写 Collection ID
  • Collection 模式下的 Scene ID 为可选项,不填时会按示例默认方式进入场景。

如果源码里保留了这些占位符:

  • __PLAYGROUND_SCENE_ID__
  • __PLAYGROUND_COLLECTION_ID__
  • __PLAYGROUND_COLLECTION_SCENE_ID__

则会自动使用顶部工具栏中填写的值。你也可以直接把占位符改成固定的ID,方便反复测试属于你的场景或合辑。

编辑与预览

  • 左侧列表用于切换不同 API 示例。
  • 中间区域是示例源码编辑器,可以直接改 HTML / JS / CSS。
  • 右侧区域是预览窗口,用于运行当前代码。
  • Run 会按当前代码重新加载预览。
  • Close 会关闭当前预览内容。
  • Live Preview 开启后,修改代码会自动刷新预览。

常用功能

  • Auto Save Drafts:自动保存(存在localStorage)修改后的草稿代码,刷新页面后不丢失。如果清理浏览器缓存,则会彻底删除!
  • Reset:恢复当前示例代码为官方初始源码。
  • 下载按钮:将当前示例源码下载到本地。
  • 复制按钮:复制当前示例源码。

使用建议

  • 先在左侧找到需要接入或测试的API,然后熟悉现有代码,可运行体验一下。最后再按自己需求修改代码进行测试。
  • 如果示例里有 console 输出,请打开浏览器开发者工具,在Console中查看。
  • 需要验证不同 API 时,可以先确认当前模式是否正确:场景能力看 Scene,合辑能力看 Collection

微信小程序插件

而微信小程序插件的接入体验,需要先准备好手机,登录好微信,和PC上的微信开发者工具

完全不支持在线体验。

  • 如果你想快速体验

可先下载官方提供的quick-start源码,然后导入微信开发者工具,再预览生成二维码,手机扫描打开。

  • 如果你想了解不同的接入方式

可先下载官方提供的接入示例,然后导入微信开发者工具,再预览生成二维码,手机扫描打开。

  • 如果你想仔细了解每个API的细节

可先下载官方提供的api demo源码,然后导入微信开发者工具,再预览生成二维码,手机扫描打开。

  • 如果你想体验更复杂的示例

可先下载官方提供的api sample源码,然后导入微信开发者工具,再预览生成二维码,手机扫描打开。

  • 如果你想体验实战级的案例

可先下载官方提供的cases源码,然后导入微信开发者工具,再预览生成二维码,手机扫描打开。

微信开发者工具使用说明

  1. 导入下载下来的源码。如果下载的是ZIP包需要先解压。 导入源码

  2. 配置好你的小程序AppID,还未注册微信小程序的,可使用个人测试号。 配置小程序AppID

  3. 注意:不支持真机预览,请使用普通预览不支持真机预览

  4. 使用手机扫描预览二维码打开,即可体验 手机扫描