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

bigbird 发布于7月前 阅读70次
0 条评论

目前社区没有较为优秀的 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规范。

预览

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

在线Demo

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

在线Demo

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

API文档

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

代码示例

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

进度与计划

1.x 版本

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

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

2.x 版本

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

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

使用

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

在线文档

安装

组件库已发布到 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进一步优化升级

查看原文: 基于Weui的React组件库mt-weui-react发布了

  • goldenostrich
  • redmouse
  • tinylion
  • goldenelephant
  • yellowduck
  • brownmeercat
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。