比如使用Noticebar 通告栏,使用了代码
import { AtNoticebar } from 'taro-ui'
一般用法
<AtNoticebar>这是 NoticeBar 通告栏</AtNoticebar>
然后就显示错误,在微信开发者工具里显示不出来,这是什么问题呢?
感谢各位大佬!!!
比如使用Noticebar 通告栏,使用了代码
import { AtNoticebar } from 'taro-ui'
一般用法
<AtNoticebar>这是 NoticeBar 通告栏</AtNoticebar>
然后就显示错误,在微信开发者工具里显示不出来,这是什么问题呢?
感谢各位大佬!!!
使用前准备
在使用之前,推荐学习 Taro
和 ES2015
,并正确配置 Node.js
v8.x 或以上版本
如何使用
1. 安装 Taro 脚手架工具
安装 Taro
开发工具 @tarojs/cli
使用 npm
或者 yarn
全局安装,或者直接使用 npx
$ npm install -g @tarojs/cli<br />
$ yarn global add @tarojs/cli
2. 初始化项目
使用命令创建模板项目
$ taro init myApp
3. 安装 Taro UI
$ cd myApp<br />
$ npm install taro-ui
P.S.因为要支持自定义主题功能,需要将样式从组件中抽离出来,在微信小程序中依赖 globalClass 功能,所以需要微信基础库版本在 v2.2.3 以上。
配置需要额外编译的源码模块
由于引用 node_modules
的模块,默认不会编译,所以需要额外给 H5 配置 esnextModules
,在 taro 项目的 config/index.js
中新增如下配置项:
h5: {<br />
esnextModules: ['taro-ui']<br />
}
4. 使用 Taro UI
引入所需组件
在代码中 import
需要的组件并按照文档说明使用
// page.js<br />
import { AtButton } from 'taro-ui'<br />
// 除了引入所需的组件,还需要手动引入组件样式<br />
// app.js<br />
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
引入组件样式的三种方式
taro-ui
所有的样式import 'taro-ui/dist/style/index.scss' // 引入组件样式 - 方式一
app.scss
样式文件中 import
组件样式并按照文档说明使用@import "~taro-ui/dist/style/index.scss"; // 引入组件样式 - 方式二
import
需要的组件样式@import "~taro-ui/dist/style/components/button.scss"; // 引入所需的组件样式 - 方式三
具体的组件样式文件请查看 组件样式列表
示例
在 /myApp/src/pages/index/index.tsx
文件添加以下代码
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
文件中添加如下代码
@import "~taro-ui/dist/style/index.scss"; // 引入组件样式,仅需引入一次即可
按需引入
如果你只希望引入部分组件,比如 Button,那么可以只 @import
需要的样式文件
@import "~taro-ui/dist/style/components/button.scss";
编译并预览
进入项目目录开始开发,可以选择小程序预览模式,或者 h5 预览模式,若使用小程序预览模式,则需要自行下载并打开对应的小程序开发者工具,并选择预览项目根目录。
微信小程序编译预览模式
# npm script<br />
$ npm run dev:weapp<br />
# 仅限全局安装<br />
$ taro build --type weapp --watch<br />
# npx用户也可以使用<br />
$ npx taro build --type weapp --watch
支付宝小程序编译预览模式
# npm script<br />
$ npm run dev:alipay<br />
# 仅限全局安装<br />
$ taro build --type alipay --watch<br />
# npx 用户也可以使用<br />
$ npx taro build --type alipay --watch
百度小程序编译预览模式
# npm script<br />
$ npm run dev:swan<br />
# 仅限全局安装<br />
$ taro build --type swan --watch<br />
# npx 用户也可以使用<br />
$ npx taro build --type swan --watch
H5 编译预览模式
复制代码
# npm script<br />
$ npm run dev:h5<br />
# 仅限全局安装<br />
$ taro build --type h5 --watch<br />
# npx 用户也可以使用<br />
$ npx taro build --type h5 --watch