前端开发框架“taro”从入门到爆哭--taro组件库(一)

前言

学习过Android开发的应该熟悉xml中的之类的标签,学习过前端html开发的,也熟悉

之类的标签。同样的taro中也有自己的一套组件库。

taro的组件库以微信小程序的组件库为标准,结合jsx语法定制。

在使用React开发的时候,我们需要从taro的标准组件库"@tarojs/components"中引用组件。(不过现在直接使用标签,一般会自动引入)

通用属性

下表中介绍了一些组件中通用的属性,请进行基础的了解,后续组件介绍过程中会使用到其中的部分属性。

参数 类型 说明
id string 组件的唯一标示, 保持整个页面唯一
className string 同 class;绑定组件样式css(scss、sass等)文件。它接受一个字符串作为值,这个字符串包含一个或多个 CSS 类名,类名之间用空格分隔。引用的是外部的组件样式。
style any 组件样式;直接写样式,也就是使用的组件内部的样式。
key string or number 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,
需要使用key 来指定列表中项目的唯一的标识符。
hidden boolean 组件是否显示, 所有组件默认显示
animation { actions: TaroGeneral.IAnyObject[]; } 动画属性
ref LegacyRef 引用,相当与把当前组件赋值给这个ref,后面就可以用这个ref来调用当前组件的方法之类的。
dangerouslySetInnerHTML { __html: string; }

插入HTML,存在安全隐患。

PS:

  1. id是用来标记当前组件唯一标志符。而key是用在list中,用来优化React渲染list用的。 key最好不要使用数组的index,容易出现一些bug,最好使用item自己带的一些特定的唯一属性,如人类-身份证号之类的。
  2. className和style都是用来定义组件样式的,但是className是引用的外部的样式文件,而style是自己在组件上直接定义的样式。推荐使用style,因为看起来更直观一点。当然使用外部样式方便其他地方直接复用,有助于统一全局样式。
  3. 关于ref和id,ref是相当与直接声明了一个引用来获取当前组件,而id其实也可以被用来找到当前组件。但是更建议使用ref。

 通用事件

参数 类型 说明
onTouchStart (event: TouchEvent) => void 手指触摸动作开始
onTouchMove (event: TouchEvent) => void 手指触摸后移动
onTouchCancel (event: TouchEvent) => void 手指触摸动作被打断,如来电提醒,弹窗
onTouchEnd (event: TouchEvent) => void 手指触摸动作结束
onClick (event: ITouchEvent) => void 手指触摸后马上离开
onLongPress (event: CommonEvent) => void 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
onLongClick (event: CommonEvent) => void 手指触摸后,超过350ms再离开(推荐使用 longpress 事件代替)

常用组件

常用组件中我介绍的属性,一般只介绍H5支持的属性,其他只有部分小程序支持的属性,本文暂不描述。

View

View 组件是用于包裹其他组件的容器组件。它类似于 HTML 中的

元素,用于组织和布局页面的结构。View 可以包含文本、图像、其他 Taro 组件等,帮助你构建小程序页面的层次结构。

基本用法示例:

import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';

function MyComponent() {
  return (
    
      Hello, Taro!
      
    
  );
}

export default MyComponent;

上述例子中,View 组件包含了一个文本组件 Text 和一个图片组件 Image,它们都被嵌套在 View 内部。className=“container”引用了名为container的组件样式。

View使用的属性,一般情况下就是上文中通用属性和通用事件会用的比较多。

参数 类型 默认值 说明
hoverClass string none 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hoverStartTime number 50 按住后多久出现点击态,单位毫秒
hoverStayTime number 400 手指松开后点击态保留时间,单位毫秒

Text

Text 组件用于显示文本内容。类似于 HTML 中的文本节点,Text 组件可以包含纯文本或内联样式。

以下是一个简单的例子:

import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';

function MyComponent() {
  return (
    
      Hello, Taro!
    
  );
}

export default MyComponent;

在这个例子中,Text 组件包含了文本内容 "Hello, Taro!"。

Text 的属性和用法:

  • selectable 设置为 true 时,文本内容可以被用户选中(类似于 user-select: text)。

  • space 控制文本空格的显示,可选值有 'ensp'(中文字符空格宽度的一半)、 'emsp'(中文字符空格宽度相同)、'nbsp'(根据字体设置的空格大小)

注意事项:

  • Text 组件不支持样式属性(如 colorfontSize 等),如果需要样式,请使用 View 组件包裹文本,并在 View 上应用样式。

  • 在 Taro 中,Text 组件主要用于显示纯文本,而对于富文本和样式化文本,可以使用 RichText 组件。 RichText 组件支持 HTML 标记,并且能够渲染富文本内容。

RichText

RichText 组件用于显示富文本内容,支持 HTML 标签和样式。它允许你在小程序中渲染包含格式、链接和其他 HTML 元素的文本。

import { View, RichText } from '@tarojs/components';

function MyComponent() {
  const richTextContent = '
Hello, Taro!
'; return ( ); } export default MyComponent; // 或者下述 class App extends Components { state = { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'Hello World!' }] }] } render () { return ( ) } }

在这个例子中,`RichText` 组件通过 `nodes` 属性接受包含 HTML 标签的文本内容,并将其渲染为富文本。

RichText常用属性:

  • nodes:节点列表/ HTML String

  • space:和上文Text组件的space相同。控制文本空格的显示,可选值有 'ensp'(中文字符空格宽度的一半)、 'emsp'(中文字符空格宽度相同)、'nbsp'(根据字体设置的空格大小)

注意事项:

- `RichText` 组件主要用于渲染富文本内容,支持一部分 HTML 标签和样式,但不支持所有 HTML 特性。并且在小程序中的支持程度有限,某些特殊标签和样式可能不会得到正确渲染。在使用时请注意测试和验证。

Image

Image 组件用于显示图片。该组件对应小程序平台的 组件,并在不同平台上进行适配转换。

以下是一个简单的使用示例:

import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components';

function MyComponent() {
  return (
    
      
    
  );
}

export default MyComponent;

在这个例子中,Image 组件用于显示路径为 "/path/to/image.jpg" 的图片。

常见的 Image 组件属性:

  • src 图片资源地址,可以是本地路径或远程 URL。

  • mode 图片裁剪、缩放的模式,可选值为

    参数 说明
    scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
    aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
    aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
    widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
    heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变
    top 裁剪模式,不缩放图片,只显示图片的顶部区域
    bottom 裁剪模式,不缩放图片,只显示图片的底部区域
    center 裁剪模式,不缩放图片,只显示图片的中间区域
    left 裁剪模式,不缩放图片,只显示图片的左边区域
    right 裁剪模式,不缩放图片,只显示图片的右边区域
    top left 裁剪模式,不缩放图片,只显示图片的左上边区域
    top right 裁剪模式,不缩放图片,只显示图片的右上边区域
    bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域
    bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域
  • lazy-load 是否懒加载,默认值为 false。。只针对 page 与 scroll-view 下的 image 有效。

  • show-menu-by-longpress 是否开启长按图片显示识别小程序码菜单,默认值为 false

  • onLoadonError 等事件: 提供图片加载成功、失败等事件的回调函数。

Button

Button 组件用于创建按钮。该组件对应小程序平台的 ); } export default MyComponent;

在这个例子中,Button 组件被嵌套在 View 组件内,通过 onClick 属性设置了按钮点击事件的处理函数。

常见的 Button 组件属性:

  • size 按钮大小,可选值为 'default'(默认大小)'mini'(小尺寸)

  • type 按钮类型,可选值为 'default'(白色)'primary'(绿色)'warn'(红色)

  • plain按钮是否镂空,背景色透明。

  • disabled 是否禁用按钮。

你可能感兴趣的:(taro)