Page 1 of 1

如何正确使用物料 LampModuleSchedule

Posted: 2024年 Apr 11日 15:13
by kkopite

按照该文档 所描述的方法,安装相关依赖并导入:

项目是直接 在 tuya-mini-app 的ide 新建的 sdm模板

Code: Select all

yarn add @ray-js/lamp-module-schedule

home/inex.tsx

Code: Select all

import React from 'react';
import { View } from '@ray-js/ray';
import LampModuleSchedule from '@ray-js/lamp-module-schedule';

// 根据需求自行调整
const actionList = [
  {
    label: '开启', // 开启
    dpList: [
      {
        value: true,
        code: 'switch',
        id: 1,
      },
    ],
  },
  {
    label: '关闭', // 关闭
    dpList: [
      {
        value: false,
        code: 'switch',
        id: 1,
      },
    ],
  },
];

export function Home() {
  const { query } = ty.getLaunchOptionsSync();
  console.log(query);
  return (
    <View>
      <LampModuleSchedule
        devId={query.deviceId}
        supportCloudTimer
        timingConfig={{
          actionList,
          timerLimitNum: 6,
        }}
        themeConfig={{
          theme: 'dark',
          // 整体背景色
          background: '#0E263E',
          // 品牌色
          brandColor: '#00BE9B',
          // 字体颜色
          fontColor: {
            titlePrimary: '#FFFFFF', // 主要标题文字颜色
            textPrimary: '#FFFFFF', // 主要文字颜色
            textRegular: 'rgba(255, 255, 255, 0.5)', // 常规文字颜色
          },
          // 卡片样式
          card: {
            background: 'rgba(35, 58, 82, 0.78)',
            borderColor: 'rgba(255, 255, 255, 0.102054)',
            textPrimary: '#fff',
            textRegular: 'rgba(255, 255, 255, 0.5)',
          },
          // 时间选择器样式
          timer: {
            background: '#0E263E', // 背景色
            timerPickerBorderColor: '#1f3040', // 分割线颜色
            customStyle: {
              color: '#fff', // 自定义周期文字颜色
              borderColor: 'rgba(255, 255, 255, 0.102054)', // 自定义周期边框颜色
              background: 'rgba(35, 58, 82, 0.78)', // 自定义周期卡片背景色
            },
          },
        }}
        onBeforeTimerChange={(res, type, timerList) => {
          console.log(res, type, timerList, 'onBeforeTimerChange');
          // 支持异步
          // return new Promise(resolve => {
          //   setTimeout(() => {
          //     resolve(true);
          //   }, 100);
          // });
          // 同步
          return true;
        }}
        onCountdownToggle={(_countdown: number) => {
          console.log(_countdown, '_countdown_countdown');
        }}
        onRtcTimeAdd={timerData => {
          console.log(timerData, 'onRtcTimeAdd');
        }}
        onRtcTimeRemove={timerData => {
          console.log(timerData, 'onRtcTimeRemove');
        }}
        onRtcTimeUpdate={timerData => {
          console.log(timerData, 'onRtcTimeUpdate');
        }}
      />
    </View>
  );
}

export default Home;

package.json

Code: Select all

{
  "name": "public-sdm-template",
  "version": "1.0.1",
  "description": "Panel SDM Template",
  "main": "index.js",
  "private": true,
  "author": "Tuya.inc",
  "license": "MIT",
  "scripts": {
    "start": "ray start --target tuya --bundler=webpack",
    "build": "ray build --target tuya --bundler=webpack",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix"
  },
  "dependencies": {
    "@ray-js/lamp-module-schedule": "^0.2.9",
    "@ray-js/panel-sdk": "^1.10.0",
    "@ray-js/ray": "^1.4.45",
    "@ray-js/ray-error-catch": "^0.0.20",
    "@reduxjs/toolkit": "^1.9.3",
    "clsx": "^1.2.1",
    "react-redux": "^7.2.1",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "@commitlint/cli": "^7.2.1",
    "@commitlint/config-conventional": "^9.0.1",
    "@ray-js/cli": "^1.4.45",
    "@types/lodash-es": "^4.17.6",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "core-js": "^3.29.1",
    "eslint-config-tuya-panel": "^0.4.1",
    "husky": "^1.2.0",
    "lint-staged": "^10.2.11",
    "typescript": "^4.4.3"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "eslint --fix",
      "git add"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write",
      "git add"
    ]
  }
}

然后 ide 上提示如下错误

1712819530600.png

Re: 如何正确使用物料 LampModuleSchedule

Posted: 2024年 Apr 11日 16:19
by crisiron

麻烦更新到最新版本 v0.2.16


Re: 如何正确使用物料 LampModuleSchedule

Posted: 2024年 Apr 11日 17:48
by kkopite
crisiron 2024年 Apr 11日 16:19

麻烦更新到最新版本 v0.2.16

升级后能正常显示了,但点击添加 报了如下错误

077911e3aa2d6b3ab0ac46a56f5aeee.png

package.json

Code: Select all

{
  "name": "public-sdm-template",
  "version": "1.0.1",
  "description": "Panel SDM Template",
  "main": "index.js",
  "private": true,
  "author": "Tuya.inc",
  "license": "MIT",
  "scripts": {
    "start": "ray start --target tuya --bundler=webpack",
    "build": "ray build --target tuya --bundler=webpack",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix"
  },
  "dependencies": {
    "@ray-js/lamp-module-schedule": "0.2.16",
    "@ray-js/panel-sdk": "1.10.2",
    "@ray-js/ray": "1.4.58",
    "@ray-js/ray-error-catch": "0.0.22",
    "@reduxjs/toolkit": "^1.9.3",
    "clsx": "^1.2.1",
    "react-redux": "^7.2.1",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "@commitlint/cli": "^7.2.1",
    "@commitlint/config-conventional": "^9.0.1",
    "@ray-js/cli": "^1.4.45",
    "@types/lodash-es": "^4.17.6",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "core-js": "^3.29.1",
    "eslint-config-tuya-panel": "^0.4.1",
    "husky": "^1.2.0",
    "lint-staged": "^10.2.11",
    "typescript": "^4.4.3"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "eslint --fix",
      "git add"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write",
      "git add"
    ]
  }
}

Re: 如何正确使用物料 LampModuleSchedule

Posted: 2024年 Apr 11日 18:04
by crisiron

你好 文档用法有更新,需要按照文档用法来使用,重新复制代码