昨天我们已经完成了移动端的适配，今天我们就引入 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 开发中社区一直强调组件复用的原因。
感谢阅读，今天的内容先对比较简单，但是希望我的整个阐述，能够给你提供一点思路，在工作中，只要你自己觉得麻烦，重复，枯燥，繁琐等等念头的时候，你就可以停下来，好好思考下，是不是有其他解法。新的解法实现之后，同步到你的整个团队中，那就是“提效”了。
