基于umi+antd-mobile的移动端项目模板

umi-antd-mobile 如果本项目对你有帮助，请不要吝啬你的star

以 UMI + DVA 为底层框架，包含完整的前端工程化实践

参考了 ant-pro

目录结构

|-- config # umi配置，包含路由配置 |-- mock # 本地模拟数据 |-- chrome-mac # chrome，用来支持E2E测试 |-- public | |-- favicon.png # Favicon | |-- iconfont # 字体图标资源 |-- src # 开发目录 | |-- assets # 本地静态资源 | |-- components # 业务组件 | |-- layout # 布局组件 | |-- models # 全局dva model | |-- services # 接口服务 | |-- pages # 页面模板 | |-- tests # 单元测试 | |-- e2e # 冒烟测试／ui测试 | |-- global.css # 全局css |-- .gitignore # git忽略文件 |-- .editorconfig # 编辑器代码风格配置 |-- .eslintignore # eslint忽略文件 |-- .eslintrc # eslint规则 |-- .prettierignore # 代码风格配置忽略文件 |-- .prettierrc # 代码风格配置文件 |-- .stylelintrc # 样式风格配置文件 |-- package.json # 依赖及配置 |-- README.md # 简介 使用

// 安装项目 git clone --depth=1 https://github.com/jinjinwa/umi-antd-mobile.git my-project cd my-project // 检出依赖 yarn // 运行 yarn start // 打包 yarn build // 更多命令可在package.json中查看 测试

单元测试你需要掌握的几个库

Google Chrome官方出品的无洁面chrome工具： puppeteer

FaceBook推出的javascript单元测试框架，可搭配别的一起使用： jest

Airbnb推出的React测试框架: enzyme

1:puppeteer 下载问题：env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

2:启动Chromium问题，请手动下载Chromium对应版本（和puppeteer对应），并在puppeteer.launch的executablePath配置中对应路径。 https://npm.taobao.org/mirrors/chromium-browser-snapshots/Mac/

(在 node_modules 中找到puppeteer，在package.json中找到对应的chromium_revision依赖版本，在以上链接下载。然后保存至根目录 chrome-mal)

ps：参考 https://juejin.im/post/5b99c9ece51d450e51625630

样式

使用less作为样式语言，在使用期前，可以了解一下less的相关特性。Less

为了避免样式的全局污染和多人开发带来的命名冲突，推荐使用Css modules模块化方案。 Css Modules 严格区分全局样式，局部样式，以及组件库样式覆盖。

业务图标库

使用阿里 iconfont 图标库，在这里创建项目，Font class方式使用。开发阶段可以使用在线链接，发布时候采用，将源文件下载至本地。/src/public/iconfont 目录下。

1:在 /src/pages/document.ejs 引入iconfont目录下css文件(在线链接)。

//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.css <link href="/iconfont/iconfont.css" rel="stylesheet" />

2: 在 /src/components简单封装了图标组件，你可以这样使用

import BizIcon from '../BizIcon' <BizIcon type="xxx" /> 移动端滚动问题

避免使用 外层容器设置overflow:hidden模拟的滚动，在ios下会很卡顿，加了-webkit-overflow-scrolling : touch；之后，会引起更多的问题。详情请看这里 深入研究-webkit-overflow-scrolling:touch以及ios滚动

正确的姿势：

通过布局技巧，使用body滚动。如本项目中，我对tabBar组件嵌套路由的处理。 �封装滚动容器实现局部滚动。目前封装了 better-scroll iPhone x兼容处理 例子 第一步：设置网页在可视窗口的布局方式

<meta name="viewport" content="width=device-width, viewport-fit=cover"> 第二步：页面主体内容限定在安全区域内

body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } fixed元素适配。示例：

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

参考： iphone X 适配方案

<!-- 布局例子 --> <div className="container"> <div className="box"></div> <div className="fixed-bottom footer"></div> </div>

/* 定义在global.css，可以直接使用 */ .fixed-bottom{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); position: fixed; z-index: 10; background-color: #fff; /* 具体应用位置，通过叠加css确定元素本身样式 width: 100%; left: 0px; right: 0px; bottom: 0px; height: 50px; */ } .footer{ width:100%; height:50px; left:0px; right:0px; bottom:0px; } .box{ padding-bottom: calc(50px + env(safe-area-inset-bottom)); } 支持环境

iOS Safari	Android
iOS 7+	Android 4.4+

FAQ 1、运行git commit后发现 less文件 length-zero-no-unit报错。

由于开启了stylelint以及git precommit验证，触发验证规则则无法提交。可参考 length-zero-no-unit 解决验证问题。

TODO tabBar嵌套路由 集成nprogress进度条 部署示例 封装滚动容器 支持TypeScript 支持pwa 封装antd-mobile没有的常用组件 mock数据示例 具体业务覆盖单元测试例子 与我联系