antd-mobile v3 建设

[doxiaodong]

3.0.0-alpha.8 2020-11-19
https://next.mobile.ant.design

经过一段时间的前期工作， antd-mobile v3 正式启动，主要在以下方面

视觉规范

遵循最新的 alipay-design 视觉规范 https://design.alipay.com，对各个组件的使用以及实现彻底的更新，当然，由于视觉变更很大，因此 v3 版本基本上都是破坏性的升级
新版设计稿见 sketch 插件 https://dapollo.alipay.com

代码升级

新版本全部采用 Function-base 组件写法，也就是 react-hooks ，这样从根本上解决 react 新版本关于 Class-base 组件的生命周期提示

新的交互 Touchable

在 v2 版本中，基础交互事件是 onClick ，我们推荐引入 fastclick 来解决古老设备上点击延时的体验问题。本来这没什么问题来着，但是我们的一些依赖组件中使用了 touch 为基础的事件交互，导致出现过非常多的点击穿透 issue 。同时由于 fastclick 也是很长时间没有维护，考虑到我们本身定位移动设计，因此全面切换到 touch 事件交互，这个实现是从 react-native-web 的 Pressable 修改而来。

样式上的收敛

删除所有的 props.style，考虑 style 修改样式的能力有限（深层次的样式无能为力）。但是尽可放心的是你仍然可以快捷的修改样式，通过外挂 className
同时抽取全局变量与组件级别变量，同时配合变量自定义的平台，可以实现快速定制皮肤的需求

按需加载

经常使用 antd 相关的同学应该都知道一个插件 babel-plugin-import，虽然它很优秀，但是还是有一些理解成本的。现在我们把这个理解成本降到了 0 ，因为我们不再需要它了。
我们的包遵从 webpack 的 tree-shaking 规范，因此，你只需要按最简单的使用方式，即可自动做到按需加载 比如以下使用只会把 Button 相关的代码打包

import { Button } from 'antd-mobile'
<Button></Button>

当然，前提是你的构建工具得开启 tree-shaking。值得高兴的是，现代构建工具基本上都可以轻松支持

更新的 Icon , 更丰富的 Icon

类似 antd v4 的设计，支持图标的按需加载，同时支持自定义的 iconfont

import { Right } from 'antd-mobile-icons'
<Right size="md" />

// 或者
import { Icon } from 'antd-mobile'

const MyIcon = Icon.createFromIconfontCN(
  '//at.alicdn.com/t/font_1511412_ksruzvafwng.js',
)
export default () => <MyIcon type="close-fill" color="red" />

多语言设计

组件的文字信息支持中英文显示(默认中文)，实现依赖于 Context，仅需要在应用最外层包裹一次即可全局生效

import { LocaleProvider } from 'antd-mobile'
import { en_US, zh_CN } from 'antd-mobile-languages'
const [lang, setLang] = React.useState(zh_CN)
<LocaleProvider value={lang}>
<!-- ... -->
</LocaleProvider>

暗黑模式

目前 dark-mode 已经成为了每个 app 的标配，作为基础 ui 组件，自然是需要支持的

数据统计

轻量级的数据统计，由各组件挂载组件使用统计的钩子，但是官方不提供钩子的具体实现，由使用者自行实现上报方法
之所以做数据统计，是为了大家对自己的页面有更好的监控手段，能及时发现组件的问题。当然也能反映出组件的使用热度

官方绝对不会默认内置任何上报方法

官网设计

采用 dumi 方案，但是需要做好 iframe 预览以及二维码预览的方案
有条件的话可以实现 组件实时构建与预览

组件迁移

v2 版本中有不少优秀的组件在新版设计稿中没有体现，我们需要逐步地把这些组件迁移过来




基本上就是这些了，我们将在不久的将来新建 next 分支，并往上开始添加代码，希望新版本的实现能带给大家带来更好的体验
以上任何问题可以直接在下边留言

[fred8617]

流弊

[daydayhappychao]

考虑啥时候开源，想参与一下

[flyingcrp]

希望尽快能把roadmap规划好,在react上,移动端antd-mobile是一个非常好的选择,可以借助社区的力量进行完善和升级.
感谢团队带来这么优秀的库. :)

[doxiaodong]

现在 react 的最佳测试代码的实践有推荐么

[citrusjunoss]

今年能落地么

[chenqincheng]

希望尽快能把roadmap规划好 +1
今年能落地么 +1

[memotail]

迫不及待，roadmap、第一个版本

[afc163]

antd-mobile-icons

这个和 antd 的 icons 有啥区别，能不能共享一份就行？

[afc163]

- import { en_US, zh_CN } from 'antd-mobile-languages'
+ import { en_US, zh_CN } from 'antd-mobile/locales';

建议这样，多发一个包没什么意义，而且版本容易对不上。

---

可能是考虑到 tree-shaking 的需求，那确实只能这样，但是两个版本确实比较麻烦。

[afc163]

包名 antd-mobile 考虑改成 @ant-design/mobile 不？另外其他衍生包也可以考虑放 @ant-design 下。

[flyingcrp]

antd-mobile-icons

这个和 antd 的 icons 有啥区别，能不能共享一份就行？

现在自带的icon太少,只能通过iconfont来自定义实现为了整体的样式统一还是需要内置

[flasco]

非常期待。目前 react 在移动端的 ui 库方面感觉比较欠缺

[doxiaodong]

@xiaohuoni 功能就是 多起一个 server 来运行带 hd 等移动端特有的配置，然后通过 iframe 加载。

[doxiaodong]

@偏右

另外其他衍生包也可以考虑放 @ant-design 下

改名是可以的，本来就因为要考虑 2和3 可能共存的情况也要改个名

antd-mobile-icons

现在是设计上传了大概 100 个 icon 到 ICON FONT， 所以单独实现了个。和 antd 融合的话，看以什么方式，现在这些图标命名有点奇怪，分类不够明确

[doxiaodong]

预计下周三上传初版代码

[lauhuawei]

样式变量是否考虑使用css变量，更方便换肤已经重新定制

[leesama]

顶

[ypli0629]

预计下周三上传初版代码

期待

[ditoukanyun]

终于有更新了,期待

[DreamPWJ]

1. 新版有没有新增组件或者对 组件属性增强
2. 新版是否探索微信或支付宝小程序原生组件上运行 而不是H5嵌入方式 @doxiaodong

[chenqincheng]

预计下周三上传初版代码

等不到啊` 今天周四

[doxiaodong]

here: https://github.com/ant-design/ant-design-mobile/tree/next

[shuaizhouliu]

只要没太监就行，能等😂

[liaokaime]

要为react移动端的荣誉而战

[awmleer]

要为react移动端的荣誉而战

嗯嗯目标就是做全世界最好的React移动端组件库

[CaicoLeung]

现在React的移动端UI组件都没有vue的丰富啊, 求antd mobile3快出

[codedart2018]

要为react移动端的荣誉而战

嗯嗯目标就是做全世界最好的React移动端组件库

听你吹牛逼

[zemelLeong]

要为react移动端的荣誉而战

嗯嗯目标就是做全世界最好的React移动端组件库

加油啊，为移动端而战的大哥哥

[ppbl]

@awmleer 重写是把现在放出来的的 3.x 的 alpha 版本也给推翻了吗

[awmleer]

@ppbl 是的

[lzm0x219]

@ppbl 是的

底层基础组件也都自己写？不用rc-component?

[awmleer]

@0x219 只有非常少量的依赖

[lzm0x219]

@0x219 只有非常少量的依赖

可以的。仓库地址有计划什么时候公开嘛？

[awmleer]

@0x219 目前还没有准确的计划

[G-G-boy]

@awmleer 支持RN吗？

[awmleer]

@awmleer 支持RN吗？

不支持

[damonyoungcc]

@awmleer 支持RN吗？

不支持

请问这个放出来的V5版本就是新版本的吗？

[atom258]

5.0是重新写的？

[awmleer]

请问这个放出来的V5版本就是新版本的吗？

@yangdepp 是的，还在开发中

[awmleer]

5.0是重新写的？

@atom-shanghai 是的

[uptonking]

只有非常少量的依赖

@awmleer
那太好了，ant-design里的组件普遍依赖太多了，理解和修改都会搞得人心态爆炸；
希望antd-mobile能高内聚一点；
我最近对adobe的react-spectrum组件库看得比较多，最大的feature是花了巨大的精力实现a11y(键盘导航、焦点管理、screen reader)，对移动端支持也很好，将组件的样式、行为、状态尽可能拆开复用，我觉得适合antd-mobile可以先直接拿过来用，以后再用自研的替换他们的

[awmleer]

@uptonking 嗯嗯可以多交流交流～未来 antd-mobile 也肯定是需要支持 a11y 的

[lifegit]

老哥，继续用 https://next.mobile.ant.design/ 是不是不太美妙呀！
要是有人用了上个版本在生产里。那人家现在修个bug，连个文档都没了。。
@awmleer

[awmleer]

老哥，继续用 https://next.mobile.ant.design/ 是不是不太美妙呀！
要是有人用了上个版本在生产里。那人家现在修个bug，连个文档都没了。。
@awmleer

@lifegit 部署到另一个站点了：https://antd-mobile-v3.surge.sh
后面我在文档上也注明一下，感谢反馈～

[steady-join]

恕我直言，UI需要优化。

[awmleer]

恕我直言，UI需要优化。

嗯嗯我们还会再仔细打磨的

[JiangJingxuan]

v5版本跟umi一起使用会报错，请问有解决办法吗
`* antd-mobile/es/button in ./src/pages/index.tsx

• antd-mobile/es/button/style in ./src/pages/index.tsx`
  @awmleer

[awmleer]

v5版本跟umi一起使用会报错，请问有解决办法吗
`* antd-mobile/es/button in ./src/pages/index.tsx

• antd-mobile/es/button/style in ./src/pages/index.tsx`
  @awmleer

@JiangJingxuan 把 babel-plugin-import 关掉就可以了，现在 v5 还不支持 babel-plugin-import，文档上我也写一下

[JiangJingxuan]

v5版本跟umi一起使用会报错，请问有解决办法吗
`* antd-mobile/es/button in ./src/pages/index.tsx

• antd-mobile/es/button/style in ./src/pages/index.tsx`
  @awmleer

@JiangJingxuan 把 babel-plugin-import 关掉就可以了，现在 v5 还不支持 babel-plugin-import，文档上我也写一下

搞定了，谢了，生产环境在用，希望越来越完善

[awmleer]

如果需要访问 v3 的文档站点的话，可以去这里：https://antd-mobile-v3.surge.sh/