2021/03/15

升级到 React17 + webpack5

简介

• 基于 WeUI v1.1.2 及 React 0.13.3
• 依赖 pubsub-js

在线文档

重要

该UI组件库使用的是老版本的 0.13.3 的 React 库，由于老版与新版 React 存在很多不兼容的 API，所以该库也不兼容新版 React，如果你希望使用该库，请自行下载源码，重新调整编写，主要兼容性在于老版自动绑定了组件 this 的上下文，而新版需要手动绑定

样式及适配

• weui的样式请自行在项目中引用，该库并没有引用
• 组件中使用了 rem 单位，参考比例是 375屏宽下，根字体大小为 100px

index.html 的head中加入下面这段JS，以便动态计算 REM

(function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var h=e.clientWidth||320;var f=e.classList;var g=h<320?320:h>450?450:h;var i=100*(g/375);c.REM=i;e.style.fontSize=i+"px";e.style.opacity=1};e.style.opacity=0;c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false);c.rem2px=function(f){return parseFloat(f)*c.REM};c.px2rem=function(f){return parseFloat(f)/c.REM}})(document,window);

示例Demo

在线Demo

安装使用

安装

yarn add mt-weui-react

全部引用

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'

本地开发

yarn run start

启动本地开发，打开 http://localhost:8081 预览

打包

yarn run build
yarn run build:example

示例Demo发布到 /dist 目录下

文档

生成文档

yarn run build:docs

预览文档

yarn run docs

打开 http://localhost:8087 预览文档

TODO LIST

• [x] Divider

• [x] Group

• [x] Cell

• [x] Header

• [x] Badge

• [x] Message

• [x] dialog

• [x] toast

• [x] GroupTitle

• [x] Button

• [x] Checkbox

• [x] Flex

• [x] FlexItem

• [x] Grid

• [x] GridItem

• [x] Input

• [x] Msg

• [x] Offcanvas

• [x] Sticky

• [x] Swiper

• [x] SwiperItem

• [x] Switch

• [x] Tab

• [x] TabItem

• [x] Textarea

• [x] Tip

• [x] FormPreviex

• [x] Picker

• [x] Previewer

• [x] Circle

• [x] Marquee

• [x] PopupHeader

• [x] Datetime

• [x] Clocker

• [x] Countup

• [x] PopupPicker

• [x] PopupRadio

• [x] PopupAddress

• [x] XNumber

• [x] Range

• [x] Progress

• [ ] qrcode

• [ ] scroller

感谢

• 本项目主要参考了 weui 官方的 weui 及 react-weui 及 Vux(Vue版本的WeUI)
• Api风格与 vux 基本一致