一 研 为定 2021-02-04 10:41 采纳率: 80%
浏览 311
已采纳

taro-ui官网模板怎样使用

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

import { AtNoticebar } from 'taro-ui'

一般用法

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

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

感谢各位大佬!!!

  • 写回答

2条回答 默认 最新

  • 歇歇 2021-02-04 13:28
    关注

    使用前准备

    在使用之前,推荐学习 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
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 电脑出问题了,说是usbmom注册表没
  • ¥20 需要步骤截图(标签-服务器|关键词-map)
  • ¥50 gki vendor hook
  • ¥15 灰狼算法和蚁群算法如何结合
  • ¥15 这是一个利用ESP32自带按键和LED控制的录像代码,编译过程出现问题,请解决并且指出错误,指导如何处理 ,协助完成代码并上传代码
  • ¥20 stm32f103,hal库 hal_usart_receive函数接收不到数据。
  • ¥20 求结果和代码,sas利用OPTEX程序和D-efficiency生成正交集
  • ¥50 adb连接不到手机是怎么回事?
  • ¥20 抓取数据时发生错误: get_mooncake_data() missing 1 required positional argument: 'driver'的问题,怎么改出正确的爬虫代码?
  • ¥15 vs2022无法联网