---
title: 照明情景库扩展
summary: 介绍照明情景库扩展的安装和使用方法，支持云端情景库和本地情景库的开发。
questions:
  - 情景库扩展适用于哪些品类和 DP？
  - 如何安装情景库扩展？
  - 云端情景库如何进行代码注入？
  - 本地情景库如何选择和注入效果？
  - 使用在线情景库需要什么条件？
  - 云端情景库跳转失败怎么解决？
  - 如何在项目中引用注入的情景库代码？
---

## 功能介绍

### 前置条件

#### 适用范围

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

#### 适用场景
- 产品存在情景 dp（scene_data\mix_light_scene\dreamlight_scene_mode），同时需求上要开发情景功能。

### 功能

- 云端情景库
- 本地情景库

## 使用流程

### 安装

1. 在 Tuya MiniApp Tools 中，打开设备工具，授权登录后，在设备列表中选择一个设备。点击进入设备页面。

<Image src="/images/panel-plugins/dev-property/1.png" style={{zoom:'50%'}} />

2. 在设备页面，点击右上角“扩展管理”，进入扩展市场，在扩展市场中，找到 “情景库扩展”，点击安装。

<Image src="/images/panel-plugins/dev-scene/scene1.png" style={{zoom:'100%'}} />


### 使用

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

<Image src="/images/panel-plugins/dev-scene/scene2.png" style={{zoom:'100%'}} />

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

**2.1 云端情景库**

  2.1.1 切到云端情景库后<br/>
  2.1.2 点击情景库代码能力注入<br/>
  <Image src="/images/panel-plugins/dev-scene/scene5.png" style={{zoom:'100%'}} />
  <br/>
  2.1.3 如果已经注入过，弹出确认框，确认后将代码覆盖注入到项目中
  <Image src="/images/panel-plugins/dev-scene/scene4.png" style={{zoom:'100%'}} />
  2.1.4 在项目中引用对应代码，即可完成开发
```tsx
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 切到本地情景库<br/>
  2.2.2 选中需要的情景效果，可单选也可全选<br/>
  2.2.3 选好需要的效果项目后，点击情景库代码能力注入<br/>
  <Image src="/images/panel-plugins/dev-scene/scene3.png" style={{zoom:'100%'}} />
  <br/>
  2.2.4 如果已经注入过，弹出确认框，确认后将代码覆盖注入到项目中
  <Image src="/images/panel-plugins/dev-scene/scene4.png" style={{zoom:'100%'}} />
  2.2.5 在项目中引用对应代码，即可完成开发 (如果有自定义开发需求，可在 `@/standModel/sceneModel/LocalScene` 文件夹下修改对应的代码适配)

```tsx
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` 中是否已经配置
```json
"functionalPages": {
  "rayPlayCoolFunctional": {
    "appid": "tyg0szxsm3vog8nf6n"
  }
}
```

## 发布日志
- 2024.10.25 - v0.0.9
    - 支持云端情景库
    - 支持本地情景库