Installation - 安装

React-weui是react的一个组件组，基于微信官方的weui. 安装前提需要你的项目使用Webpack环境. React-weui使用ES2015拟写,目前需要用babel和less来输出.

以下是样式的webpack 配置

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'babel-polyfill',
    './src/example/index.js',
  ],
  output: {
      path:'./dist',
      filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.jsx', '.less', '.js', '.json']
  },
  module: {
    loaders: [
      { 
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        loader: 'babel',
        query: {
          presets: ['es2015','react']
        }
      },
      { 
        test: /\.less$/,
        loader: "style!css!autoprefixer!less"
      },
    ]
  }
};

安装

React-weui可以用npm安装

npm install --save n7-react-weui

基础用法

虽然有其他途径的使用方法，还是推荐使用Webpack带上Babel Loader, CSS Loader and Less Loader

当你把环境都设置好后你可以用以下方法提供组件

import React from 'react';
//读取组件
import Button from 'n7-react-weui/lib/button';

//创建一个自定义迷你绿色按钮
const CustomButton = () => {

  return (
        <Button type="primary" mini>按钮</Button>
  );
}

export default CustomButton;

自定义样式

因为weiui是用css制作，所以改变样式也非常简单

通过className来改变

每个组建都会有一个className属性，你可以通过这个属性加载进自己的样式

const CustomButton = () => (
  <Button className='customized />
);

在你的css里头你就可以添加

.customized {
  color: green;
  font-weight: bold;
}