From eaa224f9fb041e5fec51a1104270a1b27f65f3bd Mon Sep 17 00:00:00 2001 From: wuxichen <17301714657@163.com> Date: Wed, 3 Sep 2025 15:08:44 +0800 Subject: [PATCH] update --- README.md | 153 +++++++++++++++++++++-------------------------------- index.html | 2 +- 2 files changed, 60 insertions(+), 95 deletions(-) diff --git a/README.md b/README.md index be30227..f645985 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,4 @@
- -

Antd Mobile H5 Template

-

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

@@ -9,6 +6,7 @@
## 功能 + 1. 使用了`postcss`实现`px to rem` 2. 使用`zustand`作为全局缓存库，并依赖其功能实现了基本的`i18n`国际化 3. 配置了`icon-park`，即字节旗下`ico`库 @@ -19,109 +17,78 @@ 8. 基于`js-qr`实现了浏览器扫码功能组件`QRScanner` ## 说明 + 1. 配置`axios`的基地址直接修改`env`配置字段`VITE_BASE_URL` 2. 全局根字体大小断点（`src/index.css`） ```html - 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%; /* 字体稍微大一点 */ - } - } +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`） ```html - :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; - } +: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. 修改语言 ```js -const i18nStore = useI18nStore() -i18nStore.changeLanguage('en_US') -i18nStore.changeLanguage('zh_CN') +const i18nStore = useI18nStore(); +i18nStore.changeLanguage("en_US"); +i18nStore.changeLanguage("zh_CN"); ``` -其他语言可自行扩展，在`App.tsx`中，使用`useI18nStore`hooks同步修改了组件库的国际化配置 + +其他语言可自行扩展，在`App.tsx`中，使用`useI18nStore`hooks 同步修改了组件库的国际化配置 + ```jsx -const i18nStore = useI18nStore() - return ( - <> - - - - - ) +const i18nStore = useI18nStore(); +return ( + <> + + + + +); ``` -5. 使用i18n + +5. 使用 i18n ```js const t = useI18n(); -

t('index.title"')

+

t('index.title"')

; ``` + 国际化文字映射在`src/locales`文件夹下 6. 发送请求 首先在`src/api`中新增请求文件`xxx.ts`，并定义返回值与参数的`ts interface`，利用 `axios-hooks`发送对应的`http`请求 + ```js -import useAxios from 'axios-hooks'; -import {Page, Result} from "@/types/http"; +import useAxios from "axios-hooks"; +import { Page, Result } from "@/types/http"; export interface MockResult { - id: number; + id: number; } export interface MockPage { - id: number; + id: number; } /** @@ -129,42 +96,40 @@ export interface MockPage { * 详细使用可以查看 useAxios 的文档 */ export const useFetchXXX = () => { - // set the url - const url = `/xxx/xxx`; - // fetch the data - const [{data, loading, error}, refetch] = useAxios>(url); - // to do something - return {data, loading, error, refetch}; -} - + // set the url + const url = `/xxx/xxx`; + // fetch the data + const [{ data, loading, error }, refetch] = + useAxios < Result < MockResult >> url; + // to do something + return { data, loading, error, refetch }; +}; /** * fetch the data with page * 详细使用可以查看 useAxios 的文档 */ export const useFetchPageXXX = (page: number, size: number) => { - // set the url - const url = `/xxx/xxx?page=${page}&size=${size}`; - // fetch the data - const [{data, loading, error}, refetch] = useAxios>(url); - // to do something - return {data, loading, error, refetch}; -} + // set the url + const url = `/xxx/xxx?page=${page}&size=${size}`; + // fetch the data + const [{ data, loading, error }, refetch] = + useAxios < Page < MockResult >> url; + // to do something + return { data, loading, error, refetch }; +}; ``` + `useAxios`返回值分别为`数据`、`状态`、`错误`、`操作对象`(`refetch`用于中断请求) 7. 路由与缓存配置可直接参考代码 ## 补充 -简单的封装，方便构建新项目时直接复用，没有复杂的操作，如果你想使用`react`构建一个`h5`或者是`响应式`的`web`项目，可以直接使用这个模版。 - ```shell -git clone git@github.com:JanYork/react-h5-template.git -cd react-h5-template pnpm i pnpm run dev -``` \ No newline at end of file +``` diff --git a/index.html b/index.html index 237e845..57d34a6 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ content="width=device-width, viewport-fit=cover, initial-scale=1.0" , /> - Antd Mobile H5 Templet + tashow-h5