功能介绍

前置条件

适用范围

本扩展适用于存在情景功能的照明品类,实现开发过程的可视化同时大幅开发效率提升。

适用场景

  • 产品存在情景 dp(scene_data\mix_light_scene\dreamlight_scene_mode),同时需求上要开发情景功能。

功能

  • 云端情景库
  • 本地情景库

使用流程

安装

  1. 在 Tuya MiniApp Tools 中,打开设备工具,授权登录后,在设备列表中选择一个设备。点击进入设备页面。
  1. 在设备页面,点击右上角“扩展管理”,进入扩展市场,在扩展市场中,找到 “情景库扩展”,点击安装。

使用

1. 安装成功后,在设备页面中,顶部导航栏中会出现“情景库”入口, 点击“情景库”,进入情景库管理页面。

2. 在情景库管理页面中,可以进行云端情景库、本地情景库的开发。

2.1 云端情景库

2.1.1 切到云端情景库后
2.1.2 点击情景库代码能力注入


2.1.3 如果已经注入过,弹出确认框,确认后将代码覆盖注入到项目中

2.1.4 在项目中引用对应代码,即可完成开发

import { useDevice } from '@ray-js/panel-sdk';
import { jumpToCoolBar } from '@/standModel/sceneModel/CloudScene';

type Props = {};

export const Demo: React.FC<Props> = ({ style }) => {
  const { devInfo } = useDevice();

  const handleJumpToCoolBar = () => {
    const { devId, groupId } = devInfo || {};
    jumpToCoolBar(devId, groupId);
  };

  return (
    <View onClick={handleJumpToCoolBar}>
      跳转在线情景库
    </View>
  );
};

2.2 本地设备情景

2.2.1 切到本地情景库
2.2.2 选中需要的情景效果,可单选也可全选
2.2.3 选好需要的效果项目后,点击情景库代码能力注入


2.2.4 如果已经注入过,弹出确认框,确认后将代码覆盖注入到项目中

2.2.5 在项目中引用对应代码,即可完成开发 (如果有自定义开发需求,可在 @/standModel/sceneModel/LocalScene 文件夹下修改对应的代码适配)

import LocalScene from '@/standModel/sceneModel/LocalScene';

export const Scene: React.FC<Props> = ({ style }) => {
  return (
    <View style={style} className={styles.list}>
      <LocalScene />
    </View>
  );
};

注意事项

  • 注意⚠️:在线情景库需要开通高级能力,可直接在官方群咨询或 https://tuyaos.com/viewforum.php?f=10 发帖咨询
  • 注意⚠️:如果云端情景库跳转失败,请查看 app.config.ts 中是否已经配置
"functionalPages": {
  "rayPlayCoolFunctional": {
    "appid": "tyg0szxsm3vog8nf6n"
  }
}

发布日志

  • 2024.10.25 - v0.0.9
    • 支持云端情景库
    • 支持本地情景库