智能小程序怎么使用物料里面的开启了useEventChannel 属性下的方法

[陈先生]

需要获取到移动时当前位置在色盘上的颜色值

Code: Select all

Render({
  // 其他xxx
  renderChannel() {
    const eventChannelName = 'lampCirclePickerColorEventChannel';
    this.instance.eventChannel.on(eventChannelName, e => {
      // 此处可以接收到当颜色变化时传递的颜色数据
      const {
        rgba, // [r, g , b, a]
        touchType, // : 'start' | 'move' | 'end'
        pos,
      } = e;
      console.log('eventChannel get', e);
    });
  },
});

[智能小程序开发者]

请查看物料平台对应组件的示例代码，有写

[陈先生]

请查看物料平台对应组件的示例代码，有写

你好，我看见他的获取颜色的代码，但是不会在项目里面运用

[智能小程序开发者]

我猜你可能不清楚RJS的相关概念，可以看一下这个文档，或许能对你有所帮助。如果还不清楚如何使用可以把文档看不懂的地方告诉我们
https://developer.tuya.com/cn/miniapp/d ... ork/render

[陈先生]

获取原生组件实例报错

Code: Select all

/* eslint-disable prettier/prettier */
import { location, usePageInstance , usePageEvent } from 'ray'

import React from 'react'
import { Button, View, Text } from '@ray-js/components'
import { LampHuePicker, LampCirclePickerColor } from '@ray-js/components-ty-lamp'

import Render from './index.rjs';
import { IProps, TProps, HS } from './props'
import styles from './index.module.less'

export default function Home() {
  const fooRef = React.createRef()

  const [hs, setHS] = React.useState({ h: 266, s: 1000 })

  React.useEffect(() => {
    console.info('home did mount', location)
    console.log(fooRef.current)
    


  }, [])
  


  const handleTouchStart = (hsRes: HS) => {
    setHS(hsRes)
  }
  const handleTouchMove = (hsRes: HS) => {
    console.log(hsRes, 'handleTouchMove')
    console.log(hs, 'hs')
    // setHS(hsRes);
  }
  const handleTouchEnd = (hsRes: HS) => {
    setHS(hsRes)

  }
  const ctx = usePageInstance();
  usePageEvent('onShow', () => {
    const compInst = ctx.selectComponent('#PickerColors'); 
    const render = new Render(compInst);
    

console.info('home onShow')
  })

  usePageEvent('onHide', () => {
    console.info('home onHide')
  })

  usePageEvent('onPageScroll', (event: any) => {
    console.info('onPageScroll', event)
  })

  usePageEvent('onReachBottom', () => {
    console.info('onReachBottom')
  })

  usePageEvent('onResize', (event: any) => {
    console.info('onResize', event)
  })

  return (
        

<View className={styles.view} >
  <View className={styles.PickerColor} >
    <View className={styles.InnerCircle}><Text className={styles.TextM}>M</Text></View>
    <LampCirclePickerColor
    id='PickerColors[attachment=1]Snipaste_2024-07-25_11-13-56.png[/attachment][attachment=2]Snipaste_2024-07-25_10-02-59.png[/attachment]'
      hs={hs}
      thumbRadius={5}
      radius={120}
      whiteRange={0.1}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      onTouchMove={handleTouchMove}
      useEventChannel
    />
  </View>
</View>
  )
}

Code: Select all

export default Render({
  renderChannel() {
    const eventChannelName = 'lampCirclePickerColorEventChannel';
    this.instance.eventChannel.on(eventChannelName, e => {
      const {
        rgba, 
        touchType, 
        pos,
      } = e;
      console.log('eventChannel get', e);
    });
  },
});

[智能小程序开发者]

这个是ts类型定义报错

[陈先生]

这个是ts类型定义报错

绑定一个id名都要定义ts类型吗

[智能小程序开发者]

目前是需要的，或者你可以 ignore忽略

[陈先生]

定义了id的ts类型为字符串，还是获取不到LampCirclePickerColor组件的实例，该如何使用？

[crisiron]

https://www.npmjs.com/package/@ray-js/l ... veTab=code 可以参照这里的示例，一般情况下使用不到eventChannel, 只有在多个Rjs 组件需要传递颜色信息时才会用到；正常使用参考没有eventChannel 的示例，后续的照明组件会陆续将 example 开放出去，npm 或 yarn 安装后在 node_modules 下对应的组件中的 "example" 文件夹下可以看到具体的示例