Выпущена библиотека компонентов React на основе WeUI mt-weui-react

задний план

Нет лучшего сообществаweui+reactрамки, и мы используемReact0.13старая версия, новая версияReactфреймворки несовместимы,weuiХотя стандартные компоненты визуальной спецификации предоставляются, они не инкапсулированы в компоненты взаимодействия с пользовательским интерфейсом, применяемые к проекту.

Поэтому мы решили поддерживать и развивать наборweui+ReactБиблиотеки компонентов, позволяющие быстро и качественно реализовать потребности бизнеса в способе разработки проекта.

Обзор

mt-weui-react v1.0Версия включает базовые классы, классы интерактивной обратной связи, классы отображения данных, классы ввода данных, классы навигации и т.д.37Это базовый компонент, и в будущем будут добавлены дополнительные базовые компоненты и бизнес-компоненты для улучшения взаимодействия и отображения данных.

Разработка компонентов относится к превосходной библиотеке мобильных компонентов.Версия Vux2.5, Vux был улучшен в непрерывной практике приложений.Это пример библиотеки, которую стоит изучить, что делает нашу разработку компонентов менее обходной и более удобной, стабильной и масштабируемой.
предоставляет подробныеРабота с документацией, каждая функциональная точка каждого компонента имеет подробное описание и пример кода.Если вам нужно применить его к проекту, вы можете напрямую скопировать код в документ.
Поддержка ссылок по запросу, используйте плагин Bablebabel-plugin-importПростая конфигурация позволяет оптимизировать размер кода, загружать компоненты по запросу и повышать производительность внешнего интерфейса.
использоватьweuiБиблиотека стилей, единая стандартная визуальная спецификация.

Библиотека компонентов будет предоставлять стандартные базовые службы компонентов для развития бизнеса на стороне C, что повысит скорость и качество развития бизнеса, оптимизирует код проекта, улучшит удобство обслуживания, масштабируемость и предоставит унифицированные спецификации пользовательского интерфейса.

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

Онлайн-демонстрация

Документация API

пример кода

прогресс и план

Версия 1.х

Эта версия в основном ориентирована на разработку основных компонентов и предоставляет базовые услуги компонентов для будущего развития бизнеса.

2.x версия

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

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

Библиотека компонентов содержит полную китайскую документацию и примеры кода для быстрого доступа к приложениям.

онлайн-документация

Установить

Библиотека компонентов опубликована наNPMWarehouse, установка прямо в проект с помощью npm

npm install mt-weui-react --save

Цитировать

import React from 'react'
import { Button, Flex } from 'mt-weui-react'
const FlexItem = Flex.FlexItem

let App = React.createClass({
  render() {
      return (
        <Flex>
          <FlexItem><Button>hello wechat</Button></FlexItem>
          <FlexItem><Button>hello wechat</Button></FlexItem>
        </Flex>
      );
  }
})

ReactDOM.render((
    <App/>
), document.getElementById('container'));

Цитирование по запросу

Для использования в приложениях, отличных от SPA, лучше всего загружать требуемые компоненты способом ссылки по мере необходимости для экономии ресурсов загрузки.Существует два способа ссылки на ссылку по требованию.

прямая цитата

import Button from 'mt-weui-react/lib/components/button'

Используйте плагин Babel для компиляции в указанный выше метод.

Установитьbabel-plugin-componentПлагин Бабель

npm i babel-plugin-component --save-dev

в файле.babelrcДобавить конфигурацию в файл

"plugins": [
 ["component", {"libraryName": "mt-weui-react", "libDir":"lib/components", "style": false }]
]

Затем соответствующие компоненты обычно вводятся в проект и, наконец, компилируются в метод импорта по запросу.

import { Button } from 'mt-weui-react'

// 经过插件转译为：
import Button from 'mt-weui-react/lib/components/button'

Управление версиями

Исправления ОШИБОК, настройки пользовательского интерфейса и улучшения компонентов выпущены в минорной версии 0.1.x,package.jsonиспользовать префикс в～Обновление при установке
Выпуск Subversion 0.x.1 при удалении компонентов или внесении изменений в API компонентов,package.jsonиспользовать префикс в^Обновление при установке
Стабильная версия выпускает основную версию x.1.1,package.jsonВручную обновите номер версии в

Обновления версий должны быть зарегистрированы, собраны документация и опубликованы на Github вместе с проектом.

Немного знаний о номерах версий:

alpha版: Внутренняя бета-версия. α — первая из греческих букв, обозначающая самую раннюю версию. Как правило, пользователям не следует скачивать эту версию. Эта версия содержит много ошибок и имеет неполные функции. В основном она используется разработчиками и тестировщиками для тестирования и поиска ошибок.
beta版: общедоступная бета-версия. β - вторая буква греческой буквы. Как следует из названия, эта версия была выпущена позже, чем альфа-версия, в основном для «племенных» пользователей и лояльных пользователей для тестирования. В этой версии все еще много ошибок, но она более стабильнее, чем альфа-версия. На этом этапе программного обеспечения будут добавляться новые функции. Если вы аудиофил, вы можете скачать эту версию.
rc版: Все написано: Release Candidate (версия-кандидат), эта версия дальше бета-версии, и функции этой версии больше не добавляются, а функции финальной релизной версии те же. Эта версия немного похожа на аналогичную предварительную версию перед окончательным выпуском, и этот выпуск означает, что он недалек от окончательного выпуска. Как обычный пользователь, если вы спешите использовать это программное обеспечение, вы также можете загрузить эту версию.
stable版:стабильная версия. В программном обеспечении с открытым исходным кодом существует стабильная версия, которая является окончательной версией программного обеспечения с открытым исходным кодом, и пользователи могут с уверенностью ее использовать.

местное развитие

прибытьmt-weui-reactизрепозиторий githubПроект среднего форка

Клонировать проект локально

добавить компоненты

в каталоге проектаsrc/componentsдобавить компоненты под

файл каталога компонентов

index.js   // 组件主文件
index.less // 样式
metas.yml  // 组件描述

metas.ymlОн используется для описания компонента, и, наконец, будет создана документация компонента.

metas.ymlОписание структуры:

# 属性说明
props:
  list:
    type: Array
    default: []
    desc: 图片列表
  options:
    type: Object
    default: {}
    desc: '`photoswipe` 的设置'
# 事件说明
events:
  onClose:
    desc: 关闭的回调
# 方法说明
methods:
  show:
    params: '(index)'
    desc: 图片的索引
  close:
    params: '(index)'
    desc: 图片的索引
# 组件更新说明
changes:
  v0.1.15:
    - '[new] 新组件 图片查看器，点击放大查看图片'

changesсередина[new]Используются для определения типа изменения компонента. Встроены следующие типы:

featureдобавить новые функции
fixошибка устранена
newдля добавления компонентов
changeОбновленные функции, такие как изменения стиля
enhanceУлучшения, такие как добавление новых API
deprecatedудалить функцию

в файлеsrc/index.jsкомпоненты экспорта

написать пример

в каталогexample/pagesДобавить пример страницы компонента
прибытьexample/index.jsмодуль экспорта страницы
прибытьexample/app.jsДобавить маршрут в файл
прибытьexample/pages/home/index.jsДобавьте ссылку на компонент под файлом домашней страницы

пример страницы

import React from 'react'
import { Group, Cell, Switch } from '../../../src'
import Page from '../../component/page'

var Demo = React.createClass({
    changeEv(checked){
      console.log(checked);
    },
    render: function() {
      const cusLabel = <span><i className="weui-icon-download"></i><span>开启下载</span></span>;
        return (
          <Page title="Switch">
            <Group title="一般使用">
              <Switch label="飞行模式" checked={ false }  onChange={ this.changeEv }/>
              <Switch label="蓝牙"  checked onChange={ this.changeEv }/>
              <Switch label="禁用缓存" checked={ true }  onChange={ this.changeEv }/>
            </Group>

            <Group title="禁用">
              <Switch label="蓝牙"  checked disabled onChange={ this.changeEv }/>
              <Switch label="禁用缓存" checked={ false } disabled onChange={ this.changeEv }/>
            </Group>

            <Group title="自定义label">
              <Switch label={ cusLabel }  checked onChange={ this.changeEv }/>
            </Group>
          </Page>
        );
    },
});

export default Demo

Предварительная сборка

Стартовый проектnpm run start, адрес доступа по умолчаниюhttp://localhost:8081
Изменить версию в файлеpackage.jsonа такжеsrc/version.jsИзменить номер версии
Сборка компонентов, выполнение командnpm run buildСоздавайте компоненты какES5Версия
Соберите пример, выполните командуnpm run build:exampleкомпоненты сборкиDemoпример проекта
выполнить команду сборки документацииnpm run build:docsДокументация на строительные компоненты

зафиксировать слияние

подтолкнуть проект к себеgithubПосле репозитория отправьтеPR

обновленная версия

используется в проектеnpm update mt-weui-reactилиyarn upgrade mt-weui-reactобновленная версия

Суммировать

Дальше предстоит еще много чего сделать:

Добавьте некоторые основные компоненты расширения и бизнес-компоненты.
Постоянно улучшайте и повышайте удобство использования и стабильность компонентов
Он будет использоваться с группой пользовательского интерфейса, чтобы сделать компоненты более стандартизированными и красивыми в деталях.
Обновите старые компоненты в проекте до стандартных компонентов в библиотеке компонентов.
На основе фактического приложения API библиотеки компонентов дополнительно оптимизируется и обновляется.

Гитхаб-портал