Ray 开发框架——小程序框架配置开发（三）

自定义组件

大家可以在 Ray 组件中直接使用小程序的自定义组件。包括支持原生 UI 组件库，如：miniapp-components-plus, weui 等等。

示例代码

以智能小程序的扩展组件库 miniapp-components-plus 为例：

import * as React from 'react';
import { View } from '@ray-js/ray';
import Cells from '@tuya-miniapp/miniapp-components-plus/cells';
import Cell from '@tuya-miniapp/miniapp-components-plus/cell';
 
export default () => (
  <View>
    <Cells title="带说明的列表项">
      <Cell value="标题文字" footer="说明文字"></Cell>
      <Cell>
        <View>标题文字（使用slot）</View>
        <View slot="footer">说明文字</View>
      </Cell>
    </Cells>
  </View>
);

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

注意事项

1. 对于小程序自定义组件的事件，请使用 bind 开头的事件。

   示例

   import React from 'react';
   import { View } from '@ray-js/ray';
   import ActionSheet from '@tuya-miniapp/miniapp-components-plus/actionSheet';
   export default function Demo() {
     const [isShowAtionSheet, setIsShowAtionSheet] = React.useState(false);
     const groups = [
       { text: '示例菜单', value: 1 },
       { text: '示例菜单', value: 2 },
       { text: '示例菜单', type: 'warn', value: 3 },
     ];
     return (
       <View>
         <Button
           onClick={() => {
             setIsShowAtionSheet(true);
           }}
         >
           点击弹出actionsheet
         </Button>
         <ActionSheet
           bindactiontap={(e) => {
             console.log('点击 ActionSheet 的按钮项', e);
           }}
           bindclose={(e) => {
             console.log('点击关闭');
             setIsShowAtionSheet(false);
           }}
           show={isShowAtionSheet}
           actions={groups}
           title="这是一个标题，可以为一行或者两行。"
         ></ActionSheet>
       </View>
     );
   }

2. 对于带有具名 slot 的组件，具名 slot 部分的最外层只能用 View 组件。

   错误示例

   import React from 'react';
   import { View } from '@ray-js/ray';
   import Badge from '@tuya-miniapp/miniapp-components-plus/badge';
   export default () => (
     <View>
       <Badge>
         <Text slot="inner">Ray</Text>
       </Badge>
     </View>
   );

   正确示例

   import React from 'react';
   import { View } from '@ray-js/ray';
   import Badge from '@tuya-miniapp/miniapp-components-plus/badge';
   export default () => (
     <View>
       <Badge>
         <View slot="inner">Ray</View>
       </Badge>
     </View>
   );

3. 不能在小程序自定义组件上使用 “Spread Attributes”。

   错误示例

   import React from 'react';
   import { View } from '@ray-js/ray';
   import Badge from '@tuya-miniapp/miniapp-components-plus/badge';
   export default () => {
     const badgeProps = {
       text: 1,
     };
     return (
       <View>
         <Badge {...badgeProps}>
           <View slot="inner">Remax</View>
         </Badge>
       </View>
     );
   };

   正确示例

   import React from 'react';
   import { View } from '@ray-js/ray';
   import Badge from '@tuya-miniapp/miniapp-components-plus/badge';
   export default () => {
     return (
       <View>
         <Badge text={1}>
           <View slot="inner">Remax</View>
         </Badge>
       </View>
     );
   };

 

公共文件

公共文件是指在多个页面中共享的图片资源文件，如：logo.png banner.jpg 等。

此类文件不需要经过构建器打包, 直接放置在 public/ 目录下即可。

目录结构

public 目录与 src 目录同级, 其结构如下:

public
└── images
    └── logo.png
src
  └── ...

使用公共文件

使用公共文件时, 以 / 开头的绝对路径引用即可。不需要包含 public 目录名。

在样式文件中使用

.logo {
    background-image: url('/images/logo.png');
}

在脚本文件中使用

import { Image } from '@ray-js/ray';
import React from 'react';
export default function Page(props) {
  return <Image src={'/images/logo.png'} />;
};

与编译文件的区别

public 公共文件	打包文件
使用绝对路径表示, 以 public/ 下的路径, 直接字符串描述	以相对路径引用, 如 ../images/logo.png。 脚本文件中需导入 (require import)
public/ 目录下的内容直接拷贝到 dist/tuya 目录下	编译文件会经过构建器打包, 会被压缩文件名加上 hash 值打包到 dist/tuya/assets 目录下。
文件不存在不影响构建	文件不存在会导致构建报错

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。