组件库说明

Taro 以 微信小程序组件库 为标准,结合 jsx 语法规范,定制了一套自己的组件库规范。

基于以上原则,在小程序端,我们可以使用所有的小程序原生组件,而在其他端,我们提供了对应的组件库实现

  • H5 端,@tarojs/components,同时也是需要引入的默认标准组件库

在使用时,React 中我们需要先从 Taro 标准组件库 @tarojs/components 引用组件,再进行使用,例如使用 <View /><Text /> 组件,而 Vue 我们则无需引入

  • React
  • Vue
  1. import React, { Component } from 'react'
  2. import { View, Text } from '@tarojs/components'
  3. export default class C extends Component {
  4. render () {
  5. return (
  6. <View className='c'>
  7. <Text>c component</Text>
  8. </View>
  9. )
  10. }
  11. }
  1. <template>
  2. <view class="c">
  3. <text>c component</text>
  4. </view>
  5. </template>

注意

在组件的详细文档中列出了组件在不同端的支持程度,以及基本的使用示例。 部分未列出示例的,标明仅在小程序端支持的组件的用法可以直接参考小程序组件文档

需要注意的是仍需遵循 Taro 的开发规范:

首字母大写与驼峰式命名

例如,使用 H5 端尚未支持的 map 组件

  1. import React, { Component } from 'react'
  2. import Taro from '@tarojs/taro'
  3. // 引入 map 组件
  4. import { Map } from '@tarojs/components'
  5. class App extends Components {
  6. onTap () {}
  7. render () {
  8. return (
  9. <Map onClick={this.onTap} />
  10. )
  11. }
  12. }

组件的事件传递都要以 on 开头

在微信小程序中 bind 开头这样的用法,都需要转成以 on 开头的形式。