基于 WeUI 的 React 组件库 mt-weui-react 发布了

背景

目前社区没有较为优秀的 weui+react 框架，而咱们使用的是 React0.13 的老版本，新版 React 框架并不兼容，weui 虽然提供了标准的视觉规范组件，但并无封装成运用于项目的UI交互组件。

因此咱们决定本身维护开发一套基于 weui+React 的组件库，以便在项目开发中使用搭积木的方式快速高质量的实现业务需求。

概述

mt-weui-react v1.0 版本包含基础类、交互反馈类、数据展现类、数据录入类、导航类等多，已有 37 个基础组件，将来还会添加更多基础组件和业务组件以加强数据交互和展现。

• 组件开发参考了优秀的移动端组件库 Vux2.5版本 ，Vux在不断的应用实践中跌代完善，是值得借鉴学习的样本库，让咱们的组件开发少走不少弯路，也更加具备易用性、稳定性和扩展性。
• 提供了详细的 使用文档，每一个组件各个功能点都有详细的说明和示例代码，若是须要应用到项目，直接复制文档上的代码便可。
• 支持按需引用，使用Bable插件 babel-plugin-import 简单配置，能够优化代码体积，按需加载组件，搞高前端性能。
• 使用 weui 样式库，统一标准的视觉规范。

组件库将为C端业务开发提供标准基础组件服务，将提高业务开发的速度和质量，同时能够优化项目代码，提高维护性、扩展性并提供统一的UI规范。

预览

在线Demo

在线Demo

API文档

代码示例

进度与计划

1.x 版本

该版本主要以基础组件开发为主，为之后的业务开发提供基础组件服务

2.x 版本

该版本会扩展部分基础组件，但会以业务组件开发为主，为业务需求提供定制更多标准组件，以便之后类似业务的快速实现

使用

组件库提供了完善的中文文档及代码示例，以便快速查阅应用。

在线文档

安装

组件库已发布到 NPM 仓库，直接使用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 babel插件

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'复制代码

版本管理

• BUG修复、UI调整及组件加强发布小版本 0.1.x, package.json 中使用前缀 ～ 安装时更新
• 删除组件或对组件API作调整时发布子版本 0.x.1, package.json 中使用前缀 ^ 安装时更新
• 稳定版本发布大版本 x.1.1, package.json 中手动更新版本号

版本更新必须记录日志，构建文档，随项目一块儿发布到Github

关于版本号的小知识:

• alpha版：内部测试版。α是希腊字母的第一个，表示最先的版本，通常用户不要下载这个版本，这个版本包含不少BUG，功能也不全，主要是给开发人员和 测试人员测试和找BUG用的。

• beta版：公开测试版。β是希腊字母的第二个，顾名思义，这个版本比alpha版发布得晚一些，主要是给“部落”用户和忠实用户测试用的，该版本任然存 在不少BUG，可是相对alpha版要稳定一些。这个阶段版本的软件还会不断增长新功能。若是你是发烧友，能够下载这个版本。

• rc版：全写：Release Candidate（候选版本），该版本又较beta版更进一步了，该版本功能再也不增长，和最终发布版功能同样。这个版本有点像最终发行版以前的一个相似 预览版，这个的发布就标明离最终发行版不远了。做为普通用户，若是你很急着用这个软件的话，也能够下载这个版本。

• stable版：稳定版。在开源软件中，都有stable版，这个就是开源软件的最终发行版，用户能够放心大胆的用了。

本地开发

到 mt-weui-react 的 github仓库 中fork项目

将项目克隆到本地

添加组件

在项目目录 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 修复了bug
• 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 升级版本

总结

接下来要作的事情还有不少:

• 增长一些基础扩展组件及业务组件
• 在组件的易用性、稳定性上不断提高和改良
• 会和UI组使用，在细节上让组件更加规范、漂亮
• 更新项目中旧的组件为组件库中的标准组件
• 根跟实际应用，对组件库的API进一步优化升级

Github 传送门