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 分支，并往上开始添加代码，希望新版本的实现能带给大家带来更好的体验
以上任何问题可以直接在下边留言

[lirunwin]

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

Sent from my iPhone

On Sep 23, 2020, at 13:57, Fettler notifications@github.com 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

[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]

期待正式发布

[lzm0x219]

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

[lzm0x219]

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

[zzzzyp]

希望InputItem能加个maxLength限制

[lzm0x219]

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。这就太过分了吧！

[atom258]

可以考虑下 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]

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

[ghost]

@yeml5 自己提pr

[lzm0x219]

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

发出来观摩一下

[lzm0x219]

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

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

[liaokaime]

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

[droidsde]

太监了？

[dengshicheng1996]

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

你在新项目上上了v3?