Antd Mobile H5 Template

Vite + React + Antd Mobile 组件库的H5初始化模版(脚手架)

功能

1. 使用了postcss实现px to rem
2. 使用zustand作为全局缓存库，并依赖其功能实现了基本的i18n国际化
3. 配置了icon-park，即字节旗下ico库
4. 对react-router-dom进行了功能封装
5. 使用Ant Design Mobile与Layout实现了带有Tabbar的公共模版
6. 使用axios-hooks库作为请求库，并对axios进行少量封装
7. 自定义hooks: useLocation、useI18n、useSessionStorage
8. 基于js-qr实现了浏览器扫码功能组件QRScanner

说明

1. 配置axios的基地址直接修改env配置字段VITE_BASE_URL
2. 全局根字体大小断点（src/index.css）

 html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 100%;
}
/* 小屏幕设备（如手机）*/
@media (max-width: 600px) {
html {
font-size: 90%; /* 字体稍微小一点 */
}
}
/* 中等屏幕设备（如平板）*/
@media (min-width: 601px) and (max-width: 1024px) {
html {
font-size: 100%; /* 标准大小 */
}
}
/* 大屏幕设备（如桌面）*/
@media (min-width: 1025px) {
html {
font-size: 110%; /* 字体稍微大一点 */
}
}

3. 组件库全局配色（src/index.css）

 :root {
--primary-color: #FFC300;
}
:root:root {
--adm-color-primary: #FFC300;
--adm-color-success: #00b578;
--adm-color-warning: #ff8f1f;
--adm-color-danger: #ff3141;
--adm-color-white: #ffffff;
--adm-color-text: #333333;
--adm-color-text-secondary: #666666;
--adm-color-weak: #999999;
--adm-color-light: #cccccc;
--adm-color-border: #eeeeee;
--adm-color-box: #f5f5f5;
--adm-color-background: #ffffff;
--adm-font-size-main: var(--adm-font-size-5);
--adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

4. 修改语言

consti18nStore=useI18nStore()i18nStore.changeLanguage('en_US')i18nStore.changeLanguage('zh_CN')

其他语言可自行扩展，在App.tsx中，使用useI18nStorehooks同步修改了组件库的国际化配置

consti18nStore=useI18nStore()return(<><ConfigProviderlocale={i18nStore.lang==='en_US' ? enUS : zhCN}><RenderRoutes/></ConfigProvider></>)

5. 使用i18n

constt=useI18n();<p>t('index.title"')</p>

国际化文字映射在src/locales文件夹下

6. 发送请求

首先在src/api中新增请求文件xxx.ts，并定义返回值与参数的ts interface，利用 axios-hooks发送对应的http请求

importuseAxiosfrom'axios-hooks';import{Page,Result}from"@/types/http";exportinterfaceMockResult{
id: number;}exportinterfaceMockPage{
id: number;}/** * fetch the data * 详细使用可以查看 useAxios 的文档 */exportconstuseFetchXXX=()=>{// set the urlconsturl=`/xxx/xxx`;// fetch the dataconst[{data, loading, error},refetch]=useAxios<Result<MockResult>>(url);// to do somethingreturn{data, loading, error, refetch};}/** * fetch the data with page * 详细使用可以查看 useAxios 的文档 */exportconstuseFetchPageXXX=(page: number,size: number)=>{// set the urlconsturl=`/xxx/xxx?page=${page}&size=${size}`;// fetch the dataconst[{data, loading, error},refetch]=useAxios<Page<MockResult>>(url);// to do somethingreturn{data, loading, error, refetch};}

useAxios返回值分别为数据、状态、错误、操作对象(refetch用于中断请求)

7. 路由与缓存配置可直接参考代码

补充

简单的封装，方便构建新项目时直接复用，没有复杂的操作，如果你想使用react构建一个h5或者是响应式的web项目，可以直接使用这个模版。

git clone git@github.com:JanYork/react-h5-template.git
cd react-h5-template
pnpm i
pnpm run dev