項目準備

1.node環(huán)境

2.react + typescript + antd + webpack + mobx + inversify + styled-components

• https://ant.design/index-cn
• https://cn.mobx.js.org/
• https://www.styled-components.com/

項目運行

git clone git@gitlab.jiangzheinfo.cn:weixin-web/weixin-sample.git

npm install

npm start

功能開發(fā)

返回的用戶信息用于展示

{
  "code": 200,
  "msg": "獲取成功",
  "data": {
    "name": "張三",
    "age": 22,
    "sex": 1
  }
}

1.定義Service

@bean($PeopleService)
export class $PeopleService {

    public getInfo = () => {
        return AjaxUtils.post('/demo', {})
    };

}

2.定義Bean

@bean($People)
export class $People extends $BaseEntity {
    @observable
    public name: string;
    @observable
    public age: number;
    @observable
    public sex: Sex;
}

3.定義MV

@bean($PeopleMV)
export class $PeopleMV {

    @autowired($PeopleService)
    public $peopleService: $PeopleService;

    @observable
    public $people: $People;

    @action
    public getInfo = () => {
        this.$peopleService.getInfo()
            .then(responseHelper)
            .then(data => this.$people = new $People(data))
    }
}

4.UI組件渲染

@observer
class Index extends React.Component<any, any> {

    @autowired($Theme)
    public $theme: $Theme;

    @autowired($PeopleMV)
    public $peopleMV: $PeopleMV;

    constructor(props) {
        super(props);
        this.state = {};
    }

    public componentDidMount() {
        this.$peopleMV.getInfo();
    }

    public render() {
        const { $people } = this.$peopleMV;
        return (
            <SPeopleDiv>
                <div>姓名：{$people && $people.name}</div>
                <div>年齡：{$people && $people.age}</div>
                <div>性別：{$people && SexMap[$people.sex]}</div>
            </SPeopleDiv>
        );
    }
}

export default withRouter(Index);

5.樣式組件styled-components簡單使用

const SPeopleDiv = styled.div`// styled
  & {
    position: relative;
    padding: 0.3rem;
    line-height: 2;
  }
`;