昨天我们已经完成了移动端的适配，今天我们就引入 antd-mobile 组件，当作我们的基础组件，加快我们的开发效率。
Ant Design Mobile 是由支付宝设计团队基于蚂蚁集团的众多业务实践，亿万用户的验证反馈，抽象构建出的移动端资产库。
2020 年 9 月 18 日，antd-mobile 发布了 2.3.4 版本，也是 v2 的最后一个版本，时隔近一年半，官方终于发布了全新的 5.0（白杨）版本。又经过了大半年的维护，现在 antd-mobile 已经提供了非常多功能完善的组件供用户使用了。
使用 2 倍组件的高清方案
因为我们使用的是高清方案，根绝官网提供的两种方案，第一种方案是将 import 引导 2x 目录下，例如：
import { Button } from 'antd-mobile'
// ⬇️
import { Button } from 'antd-mobile/2x'
import 'antd-mobile/es/global'
// ⬇️
import 'antd-mobile/2x/es/global'
第二种方案使用 webpack 的别名设置，将 antd-mobile 映射到 antd-mobile/2x 上。
先来说说这两种方案，在项目交付中都有什么问题吧，第一种，就是过于麻烦，也很难懂 /2x 是啥意思，某一个特殊版本吗？
第二种，在使用一些特殊加速手段缓存的时候，比如 umi 中很重要的 mfsu，别名映射会出现找不到包引入错误的问题。
所以我们可以用一种更加“高效”有趣的方式来实现。在昨天的屏幕适配中我们提到，我们通过 postcss 的插件将 px 转换成 rem 单位，然后既然我们的 px 都要经过一次转化了，那是不是就可以直接通过它，将 antd-mobile 的 px 值直接放大一倍呢？
根绝这个思路，我在 postcss-plugin-px2rem 的基础上增加了 selectorDoubleRemList: [/.adm-/] 。antd-mobile 的类名都是以 .adm- 开头的，因此会被匹配中，将 px 转化成两倍的 rem，比如按钮的默认 font-size 就是 34 px 即 0.68rem。这样即实现了，在不修改任何使用和新增任何环节的情况下，完成了使用高清组件的目的，这就是我所指的 “高效”。
运行验证
cd examples/app
pnpm i antd-mobile
修改 examples/app/src/pages/home.tsx
import { Button } from 'antd-mobile';
// 略，随便放到页面中
<Button color="primary">Click Me!</Button>
运行 dev 服务
pnpm dev
使用谷歌浏览器的手机模拟器，Dimensions: iPhone 6/7/8 访问 http://127.0.0.1:8888，打开控制台查看 elements
，可以看到 adm-button 样式中的 px 都被转成 2 倍的 rem 了： padding: 0.14rem 0.24rem; font-size: 0.34rem;。
2分钟画完两个页面
好了既然引入了 antd-mobile 那我们随便写两行代码完成两个页面吧！
编写全局 layout
修改我们约定的全局 layout，要编写全局 layout 首先一定要分清楚那一部分的内容是所有页面公用的，而哪一部分的内容是页面私有的。这里我们将头部的 NavBar 和底部的 TabBar 放到，全局 layout 中编写。可以借助 @alita/flow 提供的几个布局组件，快速的将页面分为上中下结构。
import { Page, Content, Header, Footer } from '@alita/flow';
import { Badge, TabBar, NavBar } from 'antd-mobile';
import { AppOutline, UnorderedListOutline } from 'antd-mobile-icons';
<Page className='malita-layout'>
<Header><NavBar>{titleHash[activeKey]}</NavBar></Header>
<Content>
{element}
</Content>
<Footer>
<TabBar onChange={value => {
setActiveKey(value)
navigate(value)
}} activeKey={activeKey} >
{tabs.map((item: any) => (
<TabBar.Item
key={item.key}
icon={item.icon}
title={item.title}
badge={item.badge}
/>
))}
</TabBar>
</Footer>
</Page>
编写 home 页面
我们随便仿照现在流行的一些页面布局，随手写下整体的页面，这真没什么好说的，只要你熟悉 antd-mobile 的组件用法就好了，再构造一点数据。
import { Image, Swiper, Toast, Grid, Space, List } from 'antd-mobile';
<Swiper>{items}</Swiper>
<Space></Space>
<Grid columns={3} gap={8}>
{grids}
</Grid>
<List header='用户列表'>
{users.map(user => (
<List.Item
key={user.name}
prefix={
<Image
src={user.avatar}
style={{ borderRadius: 20 }}
fit='cover'
width={40}
height={40}
/>
}
description={user.description}
>
{user.name}
</List.Item>
))}
</List>
编写列表页面
import { IndexBar, List } from 'antd-mobile';
<IndexBar>
{groups.map(group => {
const { title, items } = group
return (
<IndexBar.Panel
index={title}
title={`标题${title}`}
key={`标题${title}`}
>
<List>
{items.map((item, index) => (
<List.Item key={index}>{item}</List.Item>
))}
</List>
</IndexBar.Panel>
)
})}
</IndexBar>
可以通过上面的实现看出我们只是简单的引用了几个组件，便可以完成我们的需求，当然实际需求中页面设计的定制化会更高一点，实现起来也要复杂一点，但是却是比我们自己纯手写要快的多，特别在一些功能比较复杂的组件实现上。这就是引入比较好的第三方组件作为基础组件的优势。
当然你可以基于这些基础组件进行二次封装开发，形成你们自己的基础组件或者业务组件，在同一个项目中的不同页面，你就可以仅仅引用你自己已经封装好的组件来高效的完成需求了，如果你们的设计师在多个项目中按统一的风格输出，那你还可以在多个项目中共用这些组件，来大大提高开发效率，这就是现在 React 开发中社区一直强调组件复用的原因。
感谢阅读，今天的内容先对比较简单，但是希望我的整个阐述，能够给你提供一点思路，在工作中，只要你自己觉得麻烦，重复，枯燥，繁琐等等念头的时候，你就可以停下来，好好思考下，是不是有其他解法。新的解法实现之后，同步到你的整个团队中，那就是“提效”了。
