【Taro开发】-taro-ui（三）

Taro小程序开发

系列文章的所有文章的目录

【Taro开发】-初始化项目（一）

【Taro开发】-路由传参及页面事件调用（二）

【Taro开发】-taro-ui（三）

【Taro开发】-带token网络请求封装（四）

【Taro开发】-自定义导航栏NavBar（五）

【Taro开发】-formData图片上传组件（六）

【Taro开发】-封装Form表单组件和表单检验（七）

【Taro开发】-tabs标签页及子组件的下拉刷新（八）

【Taro开发】-简易的checkBoxGroup组件（九）

【Taro开发】-页面生成二维码及保存到本地（十）

【Taro开发】-宣传海报，实现canvas实现圆角画布/图片拼接二维码并保存（十一）

【Taro开发】-分享给好友/朋友圈（十二）

【Taro开发】-小程序自动打包上传并生成预览二维码（十三）

【Taro开发】-全局自定义导航栏适配消息通知框位置及其他问题（十四）

---

---

前言

基于Taro的微信小程序开发，主要组件库为Taro-ui
Taro-ui：基于 Taro 开发 UI 组件
一套组件可以在 微信小程序，支付宝小程序，百度小程序，H5 多端适配运行（ReactNative 端暂不支持）
提供友好的 API，可灵活的使用组件

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.安装

yarn add taro-ui
/npm install taro-ui

由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：

h5: {
  esnextModules: ['taro-ui']
}

2.使用

在代码中 import 需要的组件

// page.js
import { AtButton } from 'taro-ui'

// 除了引入所需的组件，还需要手动引入组件样式

// app.js
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可

引入组件样式的三种方式

全局引入（JS中）： 在入口文件中引入 taro-ui 所有的样式

import 'taro-ui/dist/style/index.scss' // 引入组件样式 - 方式一

全局引入（CSS中）： 在 app.scss 样式文件中 import 组件样式并按照文档说明使用

@import "~taro-ui/dist/style/index.scss"; // 引入组件样式 - 方式二

按需引入： 在页面样式或全局样式中 import 需要的组件样式

@import "~taro-ui/dist/style/components/button.scss"; // 引入所需的组件样式 - 方式三

3.编译报错

如果编译后发现报错，可尝试

yarn remove taro-ui
/npm uninstall taro-ui
//重新安装
yarn add taro-ui@3.0.0-alpha.3

或直接在初始化项目时选择taro-ui模版