Wmzy-mobile NPM

npm.io

next.js+rematch.js+koa2 🎉🎉🎉

next：http://preview.pro.ant.design
rematch：http://pro.ant.design/index-cn

项目结构

├── .doc                     # 组件文档打包输出文件
├── .vscode                  # vscode项目配置
├── build                    # next.js打包输出文件client,server
├── bundles                  # npm run analyze生成的分析文件
├── config                   # 项目配置文件
│   ├── services             # 服务相关配置文件
│   │   ├── default          # 默认服务配置（wmzy）
│   │   ├── oem              # oem服务配置
│   ├── config.dev.json      # 开发环境配置
│   ├── config.prod.json     # 生产环境配置
├── log                      # koa日志
├── mock                     # mock数据文件夹
├── public                   # 根路径静态资源
├── server
│   ├── api                  # node层转发接口（需要加密处理的接口才转发）
│   ├── middleware           # node层中间件
│   ├── routers              # node层接口路由
│   ├── utils                # node层工具类
│   ├── app.js               # koa2入口文件
├── src
│   ├── assets               # 代码引用资源
│   ├── components           # 公共组件
│   ├── containers           # 存放页面组件与model，和pages平行
│   ├── hooks                # hooks
│   ├── models               # 全局model
│   ├── pages                # next指定页面路由，页面级container
│   ├── services             # 浏览器接口请求
│   ├── store                # rematch sotre middleware
│   ├── utils                # 工具库
├── .babelrc                 # baber相关配置说明
├── .dockerfile              # docker基础镜像包构建文件
├── .dockerignore            # docker构建忽略配置文件
├── .editorconfig            # 编辑器配置文件
├── .fatherrc.js             # 组件文档配置文件
├── .eslintignore            # eslint忽略配置文件
├── .eslintrc                # eslint配置文件
├── .prettierrc              # prettie配置文件
├── .stylelintrc             # styleint配置文件
├── .babelrc.js              # babel配置文件
├── Dockerfile               # docker基础镜像包构建文件
├── next.congfig.js          # next.js的配置文件
├── next-env.d.ts            # next.js 类型引用
├── tsconfig.json            # typescript配置文件
├── package.json             # 项目信息
├── polyfills.js             # polyfills配置
├── process.yml              # pm2配置文件
├── README.md                # 项目说明

命令说明

安装依赖。

$ npm install

如果网络状况不佳，可以使用 cnpm 进行加速。

开发

$ npm run dev

生产模式

$ npm run start

构建

$ npm run build

分析

$ npm run analyze

代码格式检查

$ npm run lint

格式自动美化

$ npm run prettier

生成组件文档并自动打开

$ npm run docz:dev

打包输出组件文档

$ npm run docz:build

配置说明

项目相关配置

{
  "port": 5102, //端口号
  "service": "wmzy", //部署的服务归属（目前有wmzy/oem/zxs、会根据service拉对应的services配置）
  "proxy": { // 本地开发接口代理配置
    "/gw": {
      "target": "http://192.168.150.19:18100/gw",
      "pathRewrite": {
        "^/gw": ""
      },
      "changeOrigin": true
    }
  },
  "backendServer": { // 后台服务配置
    "/zxs": "http://192.168.150.19:18002",
    "/gw": "http://192.168.150.19:18100"
  },
  "assetPrefix": "", // js资源前缀
  "staticPrefix": "", // 静态资源前缀
  "shouldNoCache": true, // 是否不使用页面缓存
  "hasMockData": true, // 是否使用mock数据
  "log": {  // node日志配置
    "level": "info",
    "dir": "log"
  },
  "public": { // 服务端&浏览器端共用配置
    "loadWpkReporter": false, // 是否加载WpkReporter（质量监控）
    "showVconsole": false,    // 是否加载vconsole（开发、测试环境开启）
    "defaultChannelKey": "ios", // 默认的渠道前端标识
    "requestTimeout": 10000,  // 超时时间
    "track": {
      "track_data_length": 16,
      "track_url": "https://collector.wmzy.com/log-collect/app-behavior-upload"
    },
    "share": {
      "description": "完美志愿是教育部旗下网站「中国教育在线」唯一推荐的高考志愿填报服务，已帮助393万考生成功填报志愿。",
      "img": "https://storage-node.ipin.com/modules/wmzy_logo.jpg"
    }
  }
}

开发注意事项

loading 处理说明

客户端请求 默认添加顶部loading

**需要不显示默认loading的请求，需要添加参数no_loading=true

eq：处理翻页请求
const res = await getRankInfo({
  rank_type,
  page: page + 1,
  page_size,
  no_loading: page + 1 > 1, //翻页的请求不需要loading
});

图片资源处理

1. 用<Img>组件替换原始的<img>标签（方便路径处理、统一错误图片以及 loading 处理等）

a) 引入图片组件 import Img from '@/components/Img'; b) 直接引用路径(不用拼接\${getPublicConfig('staticPrefix')}) src="/web/images/xxx" c) 关于样式向组件内部传递样式方法(通用、适用于所有组件的样式传递)：需要定义成一次性全局样式（One-off global selectors、只在当前场景有效）

<style jsx>
  {`
    //用法一：在最外层 需要嵌套在别的原始标签内部
    div :global(.logo) {
      width: 100px;
    }

    .info {
      //用法二：已经被嵌套的 直接添加:global()
      :global(.logo2) {
        height: 100px;
      }
    }
  `}
</style>

d) 其他使用和 img 标签一致

2. css 样式引入图片资源： background-image: url(\${getPublicConfig('staticPrefix')}/web/images/xxx.png);

border 1px 处理说明

关于 border 1px 处理：做了 postcss 插件自动编译处理。

注意事项：

1. 会对静态 css 里所有的 border-width 为 1px 的样式进行处理。
2. 动态添加的 style 不会做处理
3. 实现原理为加了伪类+ transform 做对应描边。因此 需要对 border-color 或者 border-width 进行动态处理的会处理失败。所以得加/_no_/注释。

插件 postcss-retina-1px 地址： https://github.com/xifanii/postcss-retina-1px

字体说明

采用系统默认字体，样式不单独设置font-family
设计稿字体转换：
font-family: PingFangSC-Regular; -> 默认font-weight，不额外添加；
font-family: PingFangSC-Medium; -> font-weight: 500;

其他

rematch 插件说明

:loading: 自动生成 loading: 自动为 effects 生成 loading,不用手写 loading
:updated: 节流: 针对 effects 进行防抖，对于高频率请求进行节流
:immer: immer：reducer 中不可变数据
:selectors: 选择器：

支持环境

现代浏览器及 IE10+。

IE / Edge	Firefox	Chrome	Safari	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

浏览器兼容性（文章）：
https://react.docschina.org/docs/javascript-environment-requirements.html
https://juejin.im/post/5d887a9c518825094b34f41d

FAQ

为什么有一个 containers 目录?
因为 next.js 约束 pages 文件下必须存在 react 组件导出，如果 component 和 model 放在 pages 目录下会被认为是组件
为什么推荐 reducer 中直接修改 state？
```
 receiveVipInfo(state, payload) {
    state.vipInfo = payload;
    return state;
  },
  increment(state, payload) {
    return {
      ...state,
      couter: state.couter + payload,
    };
  },
```
因为使用了 rematch 的 immer 插件，相对于...(扩展运算符)更高效,对于深层嵌套数据可以直接修改,感兴趣的可以看一下这个immer 介绍
针对组件的 state 也可以通过 immer 来改写
```
import produce from "immer";
```

之前 task 支持 cb,ramatch 的 effects 如何支持回调?

name:'congfig',
effects: {
  async getBusinessConfig(payload, rootState) {
    const resp = await API.get('/locals/getBusinessConfig');
    if (resp.code === 0) {
        this.getBusinessConfigSuc(resp.data);
    }
    return resp;
  },
},
// 使用
dispatch({ type:'congfig/getBusinessConfig' }).then(res=>{
     if(res.code===200){
     // doSomething()
     }
})

框架的优点和遇到问题&解决方案

自动切换服务端渲染&客户端渲染 -- next.js 首屏服务端渲染，在客户端的页面跳转都是客户端渲染
next.js 框架实现了热更新
服务端代码和客户端代码分离，发出请求用的同一套代码
用户相关基础信息存储到全局 model 里，在首屏渲染的时候回进行加载
配置相关的也会存到全局 model 里，开放全局配置加载接口&局部配置加载接口
资源缓存，生产资源加载配置到 cdn，脚本可实现自动上次资源到 aliyun --打包生成的 js 资源 --static 资源
日志
组件库