【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小程序开发
  • 前言
    • 1.安装
    • 2.使用
    • 3.编译报错


前言

基于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模版

你可能感兴趣的:(Taro微信小程序开发,ui,javascript,前端)