稀土 2017-11-29
目前社区没有较为优秀的 weui+react
框架,而我们使用的是 React0.13
的老版本,新版 React
框架并不兼容,weui
虽然提供了标准的视觉规范组件,但并没有封装成运用于项目的UI交互组件。
所以我们决定自己维护开发一套基于 weui+react
的组件库,以便在项目开发中使用搭积木的方式快速高质量的实现业务需求。
mt-weui-react v1.0
版本包含基础类、交互反馈类、数据展示类、数据录入类、导航类等多,已有 37
个基础组件,未来还会添加更多基础组件和业务组件以增强数据交互和展示。
组件库将为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-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'
package.json
中使用前缀 ~
安装时更新package.json
中使用前缀 ^
安装时更新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
修复了bugnew
为新增组件change
更新功能,如更改了样式enhance
增强功能,如添加了新的apideprecated
去掉某功能在文件 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>开启下载; 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
升级版本
接下来要做的事情还有很多:
Github 传送门