Wx-uni-h5 NPM | npm.io

项目运行

    tnpm install 
    // 项目启动会选择对应请求转发的服务器，非特殊情况（例如线上才能复现的bug），请尽量不要选择线上服务器        
    tnpm run start

不要使用React State来传递业后台数据，只用来控制当前组件的数据

单页面内跳转不允许使用a标签进行页面跳转，所有页面跳转请使用标签

目录说明

Mobx + React + React-Router

根Component目录（如果有新项目启动，会各个项目之间通过submodule共享，本目录下组件严禁耦合任何后端请求数据）

页面结构

每个页面的结构由Layout + Router组成

layout为公共template，一般不需要单独开发，若需要单独开发layout，请参考目录中已有的实现

大多数开发只需要开发Router即可

基本开发

1.声明路由和路由的组成

    // 根路由暂时不作任何使用 / 跟路由会重定向到 路由的第一个页面
    // 页面真正的访问路径由 rootPath 和 route.path组成
    // model为此结构数据来源
    
    export default [
    {
            path: "/h5/404",
            component: createComponent("NotFount")
    },
    {
            path: "/h5",
            component: createComponent("EmptyLayout"),
            routes: [
                    {
                            path: "/result/success",
                            component: createComponent("ResultPage"),
                            model: require("Router/ResultPage/model"),
                    },
                    {
                            path: "/uni-add-admin",
                            component: createComponent("UniAddAdmin"),
                            model: require("Router/UniAddAdmin/model"),
                    },
                    {
                            path: "/edit",
                            component: createComponent("UniAddAdmin"),
                            model: require("Router/UniAddAdmin/model"),
                    }
            ]
    }
    ]

默认为非layout类型的页面，每个页面单独一个路由；

如果需要添加layout，可以使用嵌套路由的方式，例如：

        export default [
                {
                        path: "/uni-layout",
                        component: createComponent("UniLayout"),
                        model: require("Layout/UniLayout/model"),
                        routes: [
                                {
                                        path: "/uni-add-admin",
                                        component: createComponent("UniAddAdmin"),
                                        model: require("Router/UniAddAdmin/model"),
                                }
                        ]
                }
        ]

Router声明规范例如需要建一个Login的页面，在Router文件目录下声明

    Login(文件夹)
            Login.js
            Login.css
            model.js

    login.js 为页面组件部分

    //页面样式为cssModule的使用方式，局部样式，命名方式完全自由化，更多详情参考css-module
    import React, {Component} from "react";
    import {observer, inject} from "mobx-react";
    import {dispatch} from "Utils/observe";
    import styles from "./Login.css";

    @inject("login") //注入的数据结构，可以传递多个，参数名称和modle中的namespace的value一致
    @observer
    export default class extends Component {
            componentDidMount() {
                    //分发的事件名称为 namespace + "/" + model.js中声明的函数名称
                    dispatch("login/getLogin", {
                            test: 123
                    });
            }

            render() {
                    console.log(this.props.login)

                    return <div className={style.login}>login</div>
            }
    }

    Login.css 页面样式，不解释

    modle.js

    export default {
            //请命名保持跟文件夹一致
            namespace: "login",

            //对应的数据结构，请注意设计好该页面需要使用的数据结构
            //使用mobx @inject注入此数据结构
            state: {
                    qrcode: null
            },

            //改变数据结构的方法，返回promise对象
            //promise对象返回和state对应结构需要改变的数据结构新值
            //对应的组件会自动触发变化
            //通过dispatch函数触发(非dispath函数触发不会触发页面刷新)
            //args-1: 为dispatch的所传递的参数
            getLogin(args-1) {
                    return new Promise((resolve, reject) => {
                            resolve({
                                    qrcode: "123"
                            });
                    }).then((data) => {
                            return {
                                    qrcode: data.qrcode
                            };
                    });
            }
    }

Mobx-React 核心方法

import {observer, inject} from "mobx-react";
import {dispatch} from "Utils/observe";

observer将React组件变为可观测
inject将所对应model注入
dispatch触发对应model数据的变化

使用方式参考2

Utils说明

所有的工具方法，请直接引用Utils如若遇见没有的工具方法也请简单封装utils

尽可能不要直接在项目中直接引用第三方工具库源码（非UI库），目前已经封装request请求（基于axios）和 dispath工具方法

Todo

[] 新建页面的cli