Ant-design-mobile: 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]

流弊

[Magin-CC]

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

[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

[TnWah]

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

[Wuguanghua]

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

[moonlitusun]

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

[doxiaodong]

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

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

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

[liuqh0609]

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

[Rannie]

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

[citrusjunoss]

ListView 好像新版找不到了

[feibi]

v3 主题如何改

[spikespiegel5112]

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

[arcsin1]

什么时候正式版啊

[lirunwin]

啥时候beta就好了。等不及了。react做h5太痛苦。v2蛋疼

Sent from my iPhone

On Sep 23, 2020, at 13:57, Fettler [e-mail] wrote:


v3 主题如何改

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[zemelLeong]

加油 奥里给

[GreatAuk]

散了吧，v3.0.0 已经一个多月没更新了😭

[steady-join]

更新了记得踹我一下

[zemelLeong]

ant-mobile 更新日，家祭勿忘告乃翁

[zhanghesong]

加油

[xclw2000]

我等的花都开了，啥时候能release呀

[lcx-seima]

• API 设计希望尽可能和 antd 对齐，如 Modal 的 actions 就很特殊
• 类似 Drawer 的组件更简洁点，就是个容器
• 长 List 的使用成本较高
• 希望通过 props 多预设几个 Modal （比如需要一个 slide 动画，现在要传很多多余的 props）
• Modal 的 iOS 穿透滑动问题

[doxiaodong]

v3.0.0-alpha.5 重构了表单相关的组件, https://next.mobile.ant.design/changelog

[Viin-zx]

加油，期待ing...

[chj-damon]

真棒！加油！

[legend80s]

品牌色能否更新下呢？

[doxiaodong]

@legend80s https://next.mobile.ant.design/wiki/less-variables 可以通过变量修改，但是目前的变量我们可能会做一次 review。

[darkmice]

https://next.mobile.ant.design 今天无法打开了

[WinterWoods]

测试一下，整体流畅度与成熟度还是不及antd，加油，期待正式上线。移动端是刚需，现在在用Vant Weapp

[shengxinjing]

给力给力，一起贡献，为antd-mobile添砖加瓦

[xclw2000]

有没有进入明细页面，然后顶部可以返回上一步，并且具有渐变效果的组件？

[xclw2000]

怎么和umi集成呀。有没有类似pc端的安装工作或者脚手架？

[GreatAuk]

为什么不在 2.0 的文档上放一个 3.0 文档的入口呢？不看 issue, 估计大多数人都不知道 3.0 已经更新了。我看现在 3.0 下载量少的可怜。

[steadyzeus]

next 3.0 什么时候发正式版呢？

[whevether]

怎么和umi集成呀。有没有类似pc端的安装工作或者脚手架？
可以看看我自己配置的一个简易模版。webpack 都暴露出来了。打包之后体积要比umi小。直接clone 下来之后安装@antd/mobile引入就能用了。支持多种布局.
https://github.com/whevether/react-template

[Jairwin-L]

有计划支持类似popup弹出层组件？
https://youzan.github.io/vant/#/zh-CN/popup

[aushion]

期待正式发布

[vvni]

现在立刻马上开始使用-。-

[vvni]

@doxiaodong 请问什么时候添加Navbar组件呀？

[zzzzyp]

希望InputItem能加个maxLength限制

[vvni]

next.js使用该组件库报错

error - ./node_modules/normalize.css/normalize.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@ant-design/mobile-styles/lib/base/index.js

[pecora9264]

大佬们，今年还有希望看见稳定版本吗？

[xclw2000]

建议参考http://www.framework7.cn/中某些组件的功能

[Dootechdev]

真是尴尬的时期... 好像2个月没动静了; 春节前还有希望看到正式版？

[whevether]

烂尾了？ 两个月没动静了

[xclw2000]

建议参考http://www.framework7.cn/中某些组件的功能

现在都ios 14 le

ios 14跟framework7啥关系

[steady-join]

没动静了吗？

[sky185959]

期待早点正式发布。。。

[codedart2018]

新项目直接上嘛。好期待呀！

[GreatAuk]

拉倒，三个多月没更新了

[codedart2018]

拉倒，三个多月没更新了

哈哈，我新项目拿来试试手。　yarn add @ant-design/mobile 走起。现在的react版本都到17.x去了。这个2.x还在用16.x

[codedart2018]

喵了一眼。看了下源码不是很有源码都看了。但是好多组件都没有把默认的className style给挂载上去啊。我自己想额外挂载样式类我还得在外面套一层div。这就太过分了吧！

[atom-shanghai]

可以考虑下 zarm，基于React、React-Native 研发的一款适用于企业级的移动端UI组件库

[jivinliu]

v3大概什么时候会正式发布？

[flyingCrp]

可以考虑下 zarm，基于React、React-Native 研发的一款适用于企业级的移动端UI组件库
如果antd这边不在有新的计划的话,zarm应该是个不错的选择.至少一直在进行更新,但是star太少了.还没有很多的issue

[zmyjs]

import {
  unstable_Button as Button,
  unstable_Modal as Modal,
} from '@ant-design/mobile'

这种使用方式只是临时吧？

挺好的设计可惜就没下文了

[jockey100332]

import {
  unstable_Button as Button,
  unstable_Modal as Modal,
} from '@ant-design/mobile'

这种使用方式只是临时吧？

感觉这样的引入方式更像某一个插件.感觉很别扭

[shuaizhouliu]

有没有进入明细页面，然后顶部可以返回上一步，并且具有渐变效果的组件？

这个确实是需求很强的功能

[yeml5]

居然还不更新，我太失望了

[kokiy]

@yeml5 自己提pr

[vvni]

我今天搞了一下 umi 集成 ionic react, 感觉很棒 路由动画啥都有,

发出来观摩一下

[vvni]

https://github.com/kokiy/umi-h5-template/tree/main-ionic @vvni 先简单测试了一下没有啥问题 后期还要完善

我感觉可以用vite+ionic代替这些了. 回头试试

[liaokaime]

快4个月了，一直停留在alpha.8版本，看起来要流产了

[droidsde]

太监了？

[dengshicheng1996]

新项目直接上嘛。好期待呀！

你在新项目上上了v3?

[tangdw]

现在 h5 的 react 组件库还有那些选择呢？

[liaokaime]

现在 h5 的 react 组件库还有那些选择呢？

Material-UI，PC、Mobile通用

[kokiy]

现在 h5 的 react 组件库还有那些选择呢？

ionic

[vvni]

Zarm，可暂时替代.

[shuaizhouliu]

好像真没了，next分支最新的提交好像都是四个月前。。。

[vvni]

白嫖怪们，自己写靠谱🤧

[jianghai]

关注

[specialgirlgotoheaven]

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

请问什么时候继续更新？

[skywalkerlw]

有进一步计划吗？

[specialgirlgotoheaven]

有进一步计划吗？

[lifegit]

你们有结合umi ssr的吗？

[SSR] stream render / start: 134.98ms
ERROR [SSR] ReferenceError: window is not defined
at Module../node_modules/@ant-design/mobile/es/PullToRefresh/dep/index.js (/Users/yxs/WebstormProjects/myapptt/dist/umi.server.js:15709:27)
at __webpack_require__ (/Users/yxs/WebstormProjects/myapptt/dist/umi.server.js:21:30)
at Module../node_modules/@ant-design/mobile/es/PullToRefresh/index.js (/Users/yxs/WebstormProjects/myapptt/dist/umi.server.js:15726:62)
at __webpack_require__ (/Users/yxs/WebstormProjects/myapptt/dist/umi.server.js:21:30)
at Module../node_modules/@ant-design/mobile/es/index.js (/Users/yxs/WebstormProjects/myapptt/dist/umi.server.js:18952:73)
at __webpack_require__ (/Users/yxs/WebstormProjects/myapptt/dist/umi.server.js:21:30)
at Module../src/pages/index.tsx (/Users/yxs/WebstormProjects/myapptt/dist/umi.server.js:110940:76)
at __webpack_require__ (/Users/yxs/WebstormProjects/myapptt/dist/umi.server.js:21:30)
at render (/Users/yxs/WebstormProjects/myapptt/dist/umi.server.js:110179:20)
at runMicrotasks ()

[shuaizhouliu]

为什么太监了，好想知道原因。。。。

[aladdin-add]

莫名其妙就没有下文了，做事能不能专业一点。既然是开源项目，决策流程/开发进度应该尽可能透明。在这点上，好好学学react团队吧。

issue也没人维护，antd的招牌快被你们这样搞的** trust - it is easy to be destroyed, but hard to be restored.

[isxiaoxin]

今年能落地么 +1

[hqwlkj]

v3大概什么时候会正式发布？

[msdlisper]

哎, 有进展么

[atom-shanghai]

憋大招呢，说不准给大家个惊喜

[codedart2018]

憋大招呢，说不准给大家个惊喜

你怕是昨晚没睡醒