基於 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 傳送門