GitHub:

喜欢的话，麻烦点个赞，谢谢 🙏

新手指南

$ yarn add antd-mobile-taro-ui
# or
$ npm install antd-mobile-taro-ui --save-dev

核心思路

• 基于 Taro 框架以 antd-mobile 的设计为标准
• 尽最大可能与 Ant Design Mobile 5.x 的 api 保持 100%一致
• 预计总体代码 75%会使用 Ant Design Mobile 的源码，25%处理小程序带来的兼容问题，例如：
  • 元素节点的获取兼容性适配
  • animation、 transition 动画的实现
  • svg替换为icon或者css3
  • antd-mobile-icons、@react-spring等依赖包的替换方案
  • 解决小程序Portal问题
  • 等等

个人想法

组件 API 的设计本身就是一件公说公有理，婆说婆有理的一件事情，而antd-mobile相对来说有很大的使用用户，下载量每周都十分可观，尤其是在 5.x 版本之后整个库的设计和源码质量都十分具有值得学习的地方，我自己也从中学到了很多代码的实现方式，但是这么好的东西目前只能应用于 h5 觉得有点太过于暴殄天物，所以我的想法是结合Taro 框架和antd-mobile，以antd-mobile为设计标准做一个小程序的组件库

站在巨人的肩膀上，造出高质量的轮子

遇到的问题

• 由于dumi的dumi-theme-mobile展示暂时还不支持Taro框架，目前的解决方案是使用demoUrl，antd-mobile-taro-ui有一个lerna分支，希望可以探讨一下是否可以使用monorepo的方式monorepo-docs

• 由于dumi-theme-mobile中展示的是Taro进行h5打包后的效果，所以与小程序对比会有一些细微的差别 (影响不大，又不是不能看 🐶)，这边会尽量做到展示的一致

• 由于小程序不支持svg，在iconfont上也没有找到antd-mobile的矢量图，所以这里使用的是iconfont中手机淘宝图标库转base64，与antd-mobile会有细微的差别

如果有更好的方式实现，希望可以一起进行探讨 🙏

最最重要的一点

如侵，删

非常感谢

非常非常非常感谢antd-mobile，让我拥有学习技术和做这件事的机会 🙇

组件展示小程序

兼容情况

由于小程序不支持 SVG 所以 antd-mobile-taro-ui 所有用到 svg 图片的地方这里会使用 css3 动画或 iconfont 替代

进度展示

请扫描上面的二维码查看组件列表或访问antd-mobile-taro-ui

注意事项

Taro 的版本

目前版本是@tarojs/[email protected]

Taro 脚手架尺寸的设置

// config/index.js
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },

目前已支持750和375两种尺寸大小的样式(>=v0.14.2)，调用方式与antd-mobile一致，详情可参考高清适配

webpack 版本

// config/index.js
compiler: "webpack4",

编译代码依赖分析忽略问题

参考网址

设置之后重启微信开发工具