example-mobile-client

af-example-mobile-web

af-example-mobile-web 是基于v4架构和react-base-client脚手架的移动端示例项目，你可以通过 af-example-mobile-web 快速搭建一个基于v4架构的移动端项目。

关于 开发规范 请查看 开发规范

主要功能

• web前端项目示例

主要引用框架

https://ant.design/index-cn https://mobile.ant.design/zh https://umijs.org/

af-example-mobile-web模块

af-example-mobile-web
    .
    ├── docs //项目文档
    ├── config
    │   └── config.ts //基础配置,非必要请勿修改,https://umijs.org/docs/api/config
    ├── dist //打包文件输出目录
    ├── src
    │   ├── .umi //项目启动后生成,勿动
    │   ├── .umi-production //项目打包时生成,勿动
    │   ├── layouts //基础布局 https://umijs.org/docs/guides/routes#%E5%85%A8%E5%B1%80-layout
    │   ├── models //全局数据 https://umijs.org/docs/max/data-flow#%E5%88%9B%E5%BB%BA-model
    │   ├── pages //页面
    │   │   ├── index.less
    │   │   └── index.tsx
    │   ├── utils 工具类
    │   ├── services // 推荐目录
    │   ├── app.(ts|tsx) //入口文件
    ├── package.json
    ├── tsconfig.json 
    └── typings.d.ts

页面请放在pages目录下,建立文件夹

如何构建

• 使用最新的nodejs，npm和pnpm版本 af-example-mobile-web 使用 pnpm 来构建，最快的使用方式是将本项目 clone 到idea，然后执行以下脚本

pnpm install
pnpm run dev

如何使用

最快的使用方式是在本项目的gitlab主页点击派生按钮，即可复制一份本项目结构

1.修改AppConfig.tsx

{
  path: 'example',
  key: 'example',
  routes: [
    {
      key: 'example-testpage',
      path: 'testPage',
      component: '../pages/testPage',
      page: page: React.lazy(()=>import('./pages/testPage')),,
    },
  ],
};
example改为自己项目 例如
{
  path: 'safecheck',
  key: 'safecheck',
  routes: [
    {
      key: 'safecheck-testpage',
      path: 'testPage',
      component: '../pages/testPage',
      page: page: React.lazy(()=>import('./pages/testPage')),,
    },
  ],
};

2.修改ImageConfig.ts用来设置每个页面的图标 没有可不设置 最外层页面图标必须设置

export default {
  example: {
    testPage: require('./assets/icon/流程监控.png'),
  },
};

example改为自己项目 例如
export default {
  safecheck: {
    testPage: require('./assets/icon/流程监控.png'),
  },
};

3.修改index.ts

export default {
  ExampleAppConfig: AppConfig,
  ExampleImageConfig: ImageConfig,
};
修改名称，仅为区分在打包项目中的引入

export default {
  SafeCheckAppConfig: AppConfig,
  SafeCheckImageConfig: ImageConfig,
};


4.修改package.json中模块名称