README-zh_CN.md

            

        UmiJS               Ant Design Mobile

umi-antd-mobile 移动应用

English · 中文

快速上手

环境准备

首先得有 node，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 nvm 来管理 node 版本）

$ node -v
v10.13.0

推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。

# 国内源
$ npm i yarn tyarn -g

# 后面文档里的 yarn 换成 tyarn
$ tyarn -v

# 阿里内网源
$ tnpm i yarn @ali/yarn -g

# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

开始使用

clone项目

$ git clone --depth=1 https://github.com/hqwlkj/umi-antd-mobile.git my-project

$ cd my-project

安装项目依赖

$ yarn

本地启动

$ yarn start

部署发布

构建

$ yarn build

✔ Webpack
  Compiled successfully in 17.17s

 DONE  Compiled successfully in 17167ms                                       8:26:25 PM

Build success.
✨  Done in 20.79s.

构建产物默认生成到 ./dist 下，然后通过 tree 命令查看，

tree ./dist

./dist
├── index.html
├── umi.css
└── umi.js

本地验证

发布之前，可以通过 serve 做本地验证，

$ yarn global add serve
$ serve ./dist

   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:5000        │
   │   - On Your Network:  http://192.168.12.34:5000    │
   │                                                    │
   │   Copied local address to clipboard!               │
   │                                                    │
   └────────────────────────────────────────────────────┘

访问 http://localhost:5000，正常情况下应该是和执行 yarn start 时是一致的。

部署

本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

更多关于 umijs 的相关配置，请查阅 umijs官方文档

更多关于 antd-mobile 的相关组件使用说明，请查阅 Ant Design Mobile官方文档

预览效果图

        

2024-06-21.09.14.51.mov

目前还是一个测试demo，所以图片就是一个截屏图，大家先将就看看 😂😂😂

内置 Layout

在 src/layouts中配置了两个常用的 layout 组件。

1、tab-bar layout 主要用于根据配置的 routes 动态生成带有 Tabbar 的页面(如示例效果图)；同时可以根据浏览器地址栏的地址选择对于的 TabItem;

2、 basic layout 主要用于普通的路由使用；目前没有做过多的封装；

这里的layout需要重新再构思一下；也希望社区能提供更好的建议

FAQ

1. 如何更换自动生成的 TabBar 图标？

由于 `umijs` 的路由配置中没有支持 icon 属性可以为一个图标，所以需要自己进行处理，处理的方式如下：

在配置 `routes` 时，将`icon`设置为 `antd-mobile-icons` 中的图标名称；
然后在 `src/layouts/tab-bar/index.tsx` 中的 `renderTabItemIcon` 函数中对应进行修改。

2. 整理中 😄😄

参与贡献

我们非常欢迎你的贡献，你可以通过以下方式和我一起共建 😃：

• 通过 Issue 报告 bug 或进行咨询。
• 提交 Pull Request 改进代码。

LICENSE

MIT