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

[afc163]

我建议是新包名都放 @ant-design 这个 scope 下，可以找我加 npm 权限。

[doxiaodong]

好，我把 Form 写了开始 alpha，到时候找你

[panZongLin]

期待中，加油啊

[liucien]

DatePicker 与 Calendar 组件能支持到秒数么，现在没有秒的选项

[doxiaodong]

DatePicker 与 Calendar 组件能支持到秒数么，现在没有秒的选项

👌

[chenqincheng]

什么时候可以通过npm install 使用呢

[doxiaodong]

什么时候可以通过npm install 使用呢

如果现在像尝试早期版本的话，我晚点时候发一个 alpha 包吧

[zitup]

@doxiaodong 请问V3是什么规划？想参与一下，有什么我能做的吗

[doxiaodong]

@doxiaodong 请问V3是什么规划？想参与一下，有什么我能做的吗

可以看一下这里 https://github.com/ant-design/ant-design-mobile/projects/5

[chenqincheng]

什么时候可以通过npm install 使用呢

如果现在像尝试早期版本的话，我晚点时候发一个 alpha 包吧

@doxiaodong 发一个 alpha 包，想尝试早期版本，如果有issue，也能及时反馈给社区，谢谢了~

[hopperhuang]

长期跟中此issue

[lirunwin]

说好的的alpha呢

[chenqincheng]

说好的的alpha呢

@doxiaodong 我也在等alpha版本

[doxiaodong]

尝试好几天了，公司的电脑和家里的 windows 都不行

[lirunwin]

尝试好几天了，公司的电脑和家里的 windows 都不行

vpn香

[doxiaodong]

手动发布 @ant-design/mobile 3.0.0-alpha.1

[qhanw]

手动发布 @ant-design/mobile 3.0.0-alpha.1

还没有发布好么？

[benx-wang]

大佬，升级文档，能否给一个？

手动发布 @ant-design/mobile 3.0.0-alpha.1

[zhaoy0221]

期待V3落地，跟Vue的比起来的确感觉react的mobile端好少~~

[Wuguanghua]

啥时候能落地呀，迫不及待想要用了，react的移动端组件库太少了~

[moonlitusun]

第一次用v2 就用了几个组件 bug也太多了 希望有时间和精力的话可以处理下

[doxiaodong]

大佬，升级文档，能否给一个？

手动发布 @ant-design/mobile 3.0.0-alpha.1

没有升级文档，变动很大。

[callqh]

很期待啊，会持续关注的，希望有机会可以参与到项目的建设中来~

[Rannie]

支持，持续关注下，辛苦了~

[citrusjunoss]

ListView 好像新版找不到了

[feibi]

v3 主题如何改

[spikespiegel5112]

迫切希望对表单功能做完善。现在的表单验证只能验证input控件，我需要能对radio，picker，checkbox，以及自定义组件的表单验证机制。现在的这个漏洞百出。 目前用rc-form可以让每一个加了getFieldProps的Listitem在验证的时候具有一个error的className，但是UI框架却并没有给出一致ui反馈，这完全就是一种缺陷。

[arcsin1]

什么时候正式版啊