TZo UI

快速上手

使用前准备

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

如何使用

一 、通过Taro脚手架工具安装

1. 安装 Taro 脚手架工具

安装 Taro 开发工具 @tarojs/cli

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

$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

2. 初始化项目

使用命令创建模板项目

$ taro init myApp

3. 安装 TZo UI

$ cd myApp
$ npm install @lylb/tzo-ui
# 如果需要使用taro3版本
$ npm install @lylb/tzo-ui@beta

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

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

h5: {
  esnextModules: ['@lylb/tzo-ui'];
}

二 、通过Tzo-cli脚手架工具安装

1. 安装 Tzo-cli 脚手架工具

安装 tzo-ui 脚手架 @lylb/tzo-cli

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

$ npm install -g @lylb/tzo-cli
$ yarn global add @lylb/tzo-cli

2. 初始化项目

使用命令创建模板项目

$ tzo-cli create myApp
## 或者
$ tzo create myApp

根据命令选择创新项目的配置（tzo-ui版本选择等）

3. 进入目录

进入上一步使用命令创建模板项目（myApp） 运行项目

使用组件库

1. 使用 TZo UI

引入所需组件

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

// page.js
import { ZoNavBar } from '@lylb/tzo-ui';


// 除了引入所需的组件，还需要手动引入组件样式
// app.js
import '@lylb/tzo-ui/dist/style/index.scss'; // 全局引入一次即可

引入组件样式的三种方式

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

示例

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

import Taro, { Component, Config } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { AtButton } from '@lylb/tzo-ui';


import './index.scss';


export default class Index extends Component {
  render() {
    return (
      <View className="index">
        <AtButton type="primary">按钮文案</AtButton>
      </View>
    );
  }
}

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

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

按需引入

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

@import '~@lylb/tzo-ui/dist/style/components/button.scss';

编译并预览

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

TZo UI10:24
2/14/2023 15:29:37