Page 1 of 2

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

Posted: 2024年 Jul 26日 16:54
by 陈先生

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

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);
    });
  },
});

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

Posted: 2024年 Jul 31日 10:24
by 智能小程序开发者

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


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

Posted: 2024年 Aug 1日 15:04
by 陈先生
智能小程序开发者 2024年 Jul 31日 10:24

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

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


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

Posted: 2024年 Aug 1日 15:13
by 智能小程序开发者

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


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

Posted: 2024年 Aug 1日 15:26
by 陈先生

获取原生组件实例报错

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);
    });
  },
});
Snipaste_2024-07-25_10-02-59.png

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

Posted: 2024年 Aug 1日 15:39
by 智能小程序开发者

这个是ts类型定义报错


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

Posted: 2024年 Aug 1日 15:52
by 陈先生
智能小程序开发者 2024年 Aug 1日 15:39

这个是ts类型定义报错

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


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

Posted: 2024年 Aug 1日 17:31
by 智能小程序开发者

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


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

Posted: 2024年 Aug 2日 09:20
by 陈先生

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

Snipaste_2024-07-25_10-02-59.png
微信图片_20221226224616.png

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

Posted: 2024年 Aug 2日 10:10
by crisiron

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