background

At present, there is no excellent weUI + React framework in the community, but we use the old version of React0.13. The new React framework is not compatible. Although WeUI provides standard visual specification components, it is not encapsulated into UI interaction components used in projects.

Therefore, we decided to maintain and develop a set of component library based on WeUI +React by ourselves, so as to realize business requirements in a fast and high-quality way by building building blocks in project development.

An overview of the

Mt-weiu-react V1.0 contains 37 basic components, including basic components, interactive feedback, data display, data entry, navigation, etc. More basic components and service components will be added in the future to enhance data interaction and display.

  • The component development refers to Vux2.5 version of the excellent mobile component library. Vux has been improved in the continuous application practice, which is a sample library worth learning, so that our component development takes fewer detours, and has more ease of use, stability and expansibility.
  • Detailed usage documentation is provided, with detailed instructions and sample code for each function point of each component. If you need to apply it to a project, just copy the code from the documentation.
  • Support on demand reference, using the Bable plug-in babel-plugin-import simple configuration, can optimize the code volume, load components on demand, improve front-end performance.
  • Use the WeUI style library to unify the standard visual specification.

The component library will provide standard basic component services for C-side business development, improve the speed and quality of business development, optimize project code, improve maintainability, extensibility and provide unified UI specifications.

preview

The online Demo

The online Demo

The API documentation

Code sample

Progress and planning

1. X version

This version mainly focuses on the development of basic components and provides basic component services for future business development

2. X version

This version will extend some basic components, but will mainly develop business components, provide more customized standard components for business requirements, so as to facilitate the rapid implementation of similar services in the future

use

The component library provides complete Chinese documentation and code samples for quick review of applications.

Online documentation

The installation

Component libraries have been published to the NPM repository and installed directly into the project using NPM

npm install mt-weui-react --saveCopy the code

reference

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'));Copy the code

On-demand reference

When used in non-SPA applications, it is better to use the on-demand reference method to load the required components to save loading resources. There are two ways to reference on-demand

Direct reference

import Button from 'mt-weui-react/lib/components/button'Copy the code

Use the Babel plugin to compile the above method

Install babel-plugin-component Babel plug-in

npm i babel-plugin-component --save-devCopy the code

Add the configuration in the file.babelrc

"plugins": [["component", {"libraryName": "mt-weui-react"."libDir":"lib/components"."style": false}]]Copy the code

The relevant components are then imported into the project as normal, and are eventually compiled to be imported on demand

import { Button } from 'mt-weui-react'

// The plugin translates to:
import Button from 'mt-weui-react/lib/components/button'Copy the code

Version management

  • BUG fixes, UI tweaks and component enhancements released in small version 0.1.x,package.jsonUse prefixes in~Update at installation
  • Release subversion 0.x.1 when removing components or making changes to component apispackage.jsonUse prefixes in^Update at installation
  • Stable release major x.1.1,package.jsonTo manually update the version number

Version updates must be logged, documentation built, and published to Github with the project

Some facts about version numbers:

  • Alpha: Internal beta. Alpha is the first Greek letter, indicating the earliest version, general users do not download this version, this version contains many bugs, features are not complete, mainly for developers and testers to test and find bugs.

  • Beta: Public beta. Beta is the second Greek letter. As the name suggests, this version was released later than Alpha, mainly for “tribal” users and loyal users. It still has a lot of bugs, but it’s a bit more stable than Alpha. This version of the software will continue to add new features. If you are an enthusiast, you can download this version.

  • Rc: full write: Release Candidate. This Release is further from the beta, with no additional features, as in the final Release. This version is a bit like a similar preview before the final release, and this release indicates that the final release is not far off. As a regular user, if you are in a hurry to use the software, you can also download this version.

  • Stable: Stable version. In open source software, there is stable version. This is the final release of open source software, and users can use it freely.

Local development

Fork the project in the Github repository of Mt-weiu-React

Clone the project locally

Add the component

Add the component under the project directory SRC/Components

Component directory file

Index.js // Component main file index.less // style metas.yml // Component descriptionCopy the code

Metas.yml is used to describe the component, and a description of the component is generated

Metas.yML

# attribute description
props:
  list:
    type: Array default: [] desc: list of images options:type: Object
    default: {}
    desc: ' 'Photoswipe' Settings'
# Event DescriptionEvents: onClose: desc: closed callback# method description
methods:
  show:
    params: '(index)'Desc: index of picture close: params:'(index)'Desc: Index of the pictureComponent update descriptionChanges: v0.1.15: -'[new] New component image viewer, click to enlarge the image 'Copy the code

The [new] in Changes is used to identify component change types. There are several built-in types:

  • featureAdd new features
  • fixFix the bug
  • newFor the new component
  • changeUpdate functionality, such as changing styles
  • enhanceEnhancements, such as new apis
  • deprecatedRemove a feature

Export the component in the file SRC /index.js

Write a sample

  • To the directoryexample/pagesAdd a component sample page
  • toexample/index.jsExport page module in
  • toexample/app.jsAdd a route to the file
  • toexample/pages/home/index.jsAdd component link under home page file

Sample page

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>Open the download</span></span>;
        return(<Page title="Switch"> <Group title=" General use "> <Switch label=" flight mode "Checked ={false} onChange={this.changeEv}/> <Switch Label =" Bluetooth "Checked onChange={this.changeEv}/> <Switch label=" Disable cache" checked={true} onChange={this.changeEv}/> </Group> <Group title=" disabled "> <Switch label=" Bluetooth "checked disabled onChange={this.changeEv}/> <Switch Label =" Disabled cache" Checked ={false} disabled onChange={this.changeEv}/> </Group> <Group title=" Custom label"> <Switch Label ={cusLabel} checked onChange={ this.changeEv }/> </Group> </Page> ); }}); export default DemoCopy the code

Preview build

  • Start the project NPM run start with the default access address http://localhost:8081

  • To change the version, change the version number in the package.json and SRC /version.js files

  • Run the NPM run build command to build an ES5 component

  • To build the sample, run the command NPM run build:example to build the component Demo sample project

  • Run the NPM run build:docs command to build the documentation of the component

Submit to merge

After pushing the project to your Github repository, submit the PR

An updated version

NPM update MT-weiU-react or YARN upgrade Mt-weiu-react upgrade version is used in this project

conclusion

There are many more things to do:

  • Add some basic extension components and business components
  • Continuously improve the ease of use and stability of components
  • Will be used with the UI group to make the components more formal and beautiful in detail
  • Update old components in the project to standard components in the component library
  • Root with the actual application, the API of the component library is further optimized and upgraded

Making portal