基於 WeUI 的 React 元件庫 mt-weui-react 釋出了

Aitter發表於2017-10-20
UIReact元件

背景

目前社群沒有較為優秀的 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 傳送門

相關文章