taro-ui官网模板怎样使用

比如使用Noticebar 通告栏，使用了代码

import { AtNoticebar } from 'taro-ui'

一般用法

<AtNoticebar>这是 NoticeBar 通告栏</AtNoticebar>

然后就显示错误，在微信开发者工具里显示不出来，这是什么问题呢？

感谢各位大佬！！！

使用前准备

在使用之前，推荐学习 Taro 和 ES2015，并正确配置 Node.js v8.x 或以上版本

如何使用

1. 安装 Taro 脚手架工具

安装 Taro 开发工具 @tarojs/cli

使用 npm 或者 yarn 全局安装，或者直接使用 npx

 
  1. $ npm install -g @tarojs/cli<br /> $ yarn global add @tarojs/cli

2. 初始化项目

使用命令创建模板项目

 
  1. $ taro init myApp

3. 安装 Taro UI

 
  1. $ cd myApp<br /> $ npm install taro-ui

P.S.因为要支持自定义主题功能，需要将样式从组件中抽离出来，在微信小程序中依赖 globalClass 功能，所以需要微信基础库版本在 v2.2.3 以上。

配置需要额外编译的源码模块

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

 
  1. h5: {<br /> esnextModules: ['taro-ui']<br /> }

4. 使用 Taro UI

引入所需组件

在代码中 import 需要的组件并按照文档说明使用

 
  1. // page.js<br /> import { AtButton } from 'taro-ui'<br /> // 除了引入所需的组件，还需要手动引入组件样式<br /> // app.js<br /> import 'taro-ui/dist/style/index.scss' // 全局引入一次即可

引入组件样式的三种方式

  • 全局引入（JS中）： 在入口文件中引入 taro-ui 所有的样式
 
  1. import 'taro-ui/dist/style/index.scss' // 引入组件样式 - 方式一
  • 全局引入（CSS中）： 在 app.scss 样式文件中 import 组件样式并按照文档说明使用
 
  1. @import "~taro-ui/dist/style/index.scss"; // 引入组件样式 - 方式二
  • 按需引入： 在页面样式或全局样式中 import 需要的组件样式
 
  1. @import "~taro-ui/dist/style/components/button.scss"; // 引入所需的组件样式 - 方式三

具体的组件样式文件请查看 组件样式列表

示例

在 /myApp/src/pages/index/index.tsx 文件添加以下代码

 
  1. import Taro, { Component, Config } from '@tarojs/taro'<br /> import { View } from '@tarojs/components'<br /> import { AtButton } from 'taro-ui'<br /> import './index.scss'<br /> export default class Index extends Component {<br /> config: Config = {<br /> navigationBarTitleText: '首页'<br /> }<br /> <br /> render () {<br /> return (<br /> <View className='index'><br /> <AtButton type='primary'>按钮文案</AtButton><br /> </View><br /> )<br /> }<br /> }

在 /myApp/src/app.scss 文件中添加如下代码

 
  1. @import "~taro-ui/dist/style/index.scss"; // 引入组件样式，仅需引入一次即可

按需引入

如果你只希望引入部分组件，比如 Button，那么可以只 @import 需要的样式文件

 
  1. @import "~taro-ui/dist/style/components/button.scss";

编译并预览

进入项目目录开始开发，可以选择小程序预览模式，或者 h5 预览模式，若使用小程序预览模式，则需要自行下载并打开对应的小程序开发者工具，并选择预览项目根目录。

微信小程序编译预览模式

 
  1. # npm script<br /> $ npm run dev:weapp<br /> # 仅限全局安装<br /> $ taro build --type weapp --watch<br /> # npx用户也可以使用<br /> $ npx taro build --type weapp --watch

支付宝小程序编译预览模式

 
  1. # npm script<br /> $ npm run dev:alipay<br /> # 仅限全局安装<br /> $ taro build --type alipay --watch<br /> # npx 用户也可以使用<br /> $ npx taro build --type alipay --watch

百度小程序编译预览模式

 
  1. # npm script<br /> $ npm run dev:swan<br /> # 仅限全局安装<br /> $ taro build --type swan --watch<br /> # npx 用户也可以使用<br /> $ npx taro build --type swan --watch

H5 编译预览模式

 复制代码
  1. # npm script<br /> $ npm run dev:h5<br /> # 仅限全局安装<br /> $ taro build --type h5 --watch<br /> # npx 用户也可以使用<br /> $ npx taro build --type h5 --watch

使用指南

在 Taro 文件中引入组件

 
  1. import { AtNoticebar } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

 
  1. @import "~taro-ui/dist/style/components/noticebar.scss";

一般用法

 
  1. <AtNoticebar>这是 NoticeBar 通告栏</AtNoticebar>

文字滚动

 
  1. <AtNoticebar marquee><br /> 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏<br /> </AtNoticebar>

带图标

 
  1. <AtNoticebar icon='volume-plus'><br /> 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏<br /> </AtNoticebar>

Noticebar 参数

参数说明类型可选值默认值close是否需要关闭按钮Boolean-falsesingle内容是否单行Boolean-falsemarquee内容是否滚动（内容只能单行）Boolean-falsespeed内容滚动速度 （默认速度100px/秒）Number-100showMore“查看更多”是否显示（内容只能单行）Boolean-falsemoreText“查看更多”链接文本String-查看详情icon内容前的icon图标String参考icon组件-

Noticebar 事件

事件名称说明返回参数onClose关闭时触发-onGotoMore点击”查看更多“时触发-

Noticebar通告栏 - 图1