Тяжелый! Выпущена первая мультитерминальная библиотека компонентов пользовательского интерфейса — Taro UI!

предисловие

TaroЭто решение для разработки с несколькими терминалами, созданное JD·Bump Labs и позволяющее запускать набор кодов на нескольких терминалах. После выпуска Taro 1.0 он также стал поддерживать ссылки на сторонние библиотеки компонентов небольших программ, такие как iView, vant-weapp, echarts-for-weixin, но на рынке по-прежнему отсутствует набор мультитерминальных библиотек компонентов пользовательского интерфейса. написал Таро. Чтобы еще больше обогатить экосистему разработки Taro и позволить разработчикам получить лучший опыт разработки и более высокую скорость разработки, Bump Labs самостоятельно разработала набор пользовательского интерфейса. Библиотека компонентов, после более чем двухмесячной доработки, была наконец официально выпущена в Taro версии 1.0.

Taro UI

Taro UI — это многотерминальная библиотека компонентов пользовательского интерфейса, созданная Bump Labs и написанная на основе Taro. Помимо высокой ценности, самой большой изюминкой Taro UI является поддержка работы с несколькими терминалами. Благодаря функции Taro, поддерживающей работу с несколькими терминалами, пользовательский интерфейс Taro можно адаптировать для работы на апплете WeChat / H5 / ReactNative и других мультитерминалах только путем устранения разницы в производительности CSS на разных платформах.

Github:GitHub.com/nerv JS/таро…

Документация:taro-ui.aotu.io/

Предварительный просмотр версии H5:

Предварительный просмотр мини-программы WeChat:

Первая версия компонентов имеет в общей сложности шесть модулей и тридцать три компонента.В будущем компоненты будут продолжать обогащаться и будут добавлены некоторые общие бизнес-компоненты.

характеристика

Простой в использовании: Поддержка установки npm, автоматическая обработка зависимостей между ресурсами npm.
Поддержка фреймворка: На основе компонентов развития Таро, бесшовная связь с Таро
Мультитерминальная адаптация: Набор компонентов может быть адаптирован для работы на апплетах WeChat / H5 / ReactNative и других терминалах.
красивый стиль: Брат Сяомин (AT-UIДизайнер, основная программа) лично проектирует, проверяет детали, в соответствии с эстетикой современного плоского дизайна
Богатые компоненты: Предоставляет широкий выбор базовых компонентов, охватывающих большинство сценариев использования и отвечающих различным функциональным требованиям.
Цитирование по запросу: Независимые компоненты могут использоваться по мере необходимости, нет необходимости вводить все файлы и могут быть минимально внедрены в проект.
Несколько наборов тем: Встроенные несколько наборов цветов темы, которые вы можете выбрать (эта функция будет открыта в версии 1.1)

быстрый старт

Установить Таро

Установите Taro Dev Tools @tarojs/cli

Установите глобально, используя npm или yarn, или напрямуюnpx

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

Инициализировать проект

Создайте проект шаблона с помощью команды

$ taro init myApp

Установить интерфейс Таро

$ cd myApp
$ npm i taro-ui

использовать

в кодеimportкомпоненты и использовать их в соответствии с документацией

import { AtButton } from 'taro-ui'

Пример

существует/myApp/src/pages/index/index.jsxфайл добавьте следующий код

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

Компиляция и предварительный просмотр

Войдите в каталог проекта, чтобы начать разработку, вы можете выбрать режим предварительного просмотра апплета или режим предварительного просмотра H5.Если вы используете режим предварительного просмотра апплета WeChat, вам необходимо загрузить и открыть инструмент разработчика WeChat самостоятельно и выбрать корень проекта предварительного просмотра. каталог.

Режим предварительного просмотра компиляции апплета WeChat

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

Режим предварительного просмотра компиляции H5

# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx用户也可以使用
$ npx taro build --type h5 --watch

Обратная связь

Если у вас есть замечания или предложения, добро пожаловать наGithubСоздайте вопрос, спасибо за вашу поддержку и вклад.