235 lines
5.8 KiB
Markdown
235 lines
5.8 KiB
Markdown
# 国际化完善说明
|
||
|
||
## 📋 完成的工作
|
||
|
||
### 1. 语言包扩充
|
||
为三种语言（中文、英文、葡萄牙语）补充了完整的翻译内容：
|
||
|
||
#### 新增翻译模块
|
||
- **预约模块** (`appointment`)
|
||
- 全部预约服务
|
||
- 分类导航（机场、火车、高铁、巴士、酒店、民宿）
|
||
- 服务项目名称
|
||
|
||
- **预约详情** (`reserveDetails`)
|
||
- 预约按钮文本
|
||
|
||
- **信息填写** (`infoEntry`)
|
||
- 页面标题
|
||
- 表单字段标签和占位符
|
||
- 验证提示信息
|
||
- 国家选择器标题
|
||
|
||
- **个人中心** (`me`)
|
||
- 常规/其他分组标题
|
||
- 用户协议、隐私协议
|
||
|
||
- **通用** (`common`)
|
||
- 提交、预约等常用按钮文本
|
||
|
||
### 2. 页面国际化改造
|
||
|
||
#### ✅ pages/index/index.vue
|
||
- 热门服务标题和项目已使用 `$t()`
|
||
|
||
#### ✅ pages/appointment/appointment-page.vue
|
||
- "全部预约服务" 标题国际化
|
||
- 左侧分类导航国际化（机场、火车等）
|
||
- 服务项目名称国际化
|
||
|
||
#### ✅ pages/appointment/info-entry-page.vue
|
||
- 页面标题国际化
|
||
- 所有表单字段标签国际化
|
||
- 所有占位符文本国际化
|
||
- 提交按钮国际化
|
||
- Toast 提示信息国际化
|
||
- 国家选择器标题国际化
|
||
|
||
#### ✅ pages/index/reserve-details-page.vue
|
||
- "预约" 按钮国际化
|
||
|
||
#### ✅ pages/me/me-page.vue
|
||
- "用户协议" 和 "隐私协议" 国际化
|
||
- 其他菜单项已完成
|
||
|
||
### 3. TabBar 国际化
|
||
|
||
#### 实现方式
|
||
1. **移除 pages.json 中的硬编码文本**
|
||
- 从 TabBar 配置中移除 `text` 字段
|
||
|
||
2. **创建 TabBar 国际化工具** (`utils/tabbar-i18n.js`)
|
||
- `updateTabBarI18n()` 函数：动态更新 TabBar 文本
|
||
- `tabBarI18nMixin` 混入：可选的自动更新方案
|
||
|
||
3. **在所有 TabBar 页面中集成**
|
||
- `pages/index/index.vue`
|
||
- `pages/appointment/appointment-page.vue`
|
||
- `pages/me/me-page.vue`
|
||
- 在 `onShow()` 生命周期中调用 `updateTabBarI18n(this)`
|
||
|
||
4. **语言切换时自动更新**
|
||
- 在 `me-page.vue` 的 `changeLanguage()` 方法中调用更新
|
||
|
||
### 4. App.vue 增强
|
||
- 在 `onLaunch()` 和 `onShow()` 中设置 TabBar 文本
|
||
- 添加 `watch` 监听语言变化
|
||
|
||
## 🌍 支持的语言
|
||
|
||
| 语言 | 代码 | 完成度 |
|
||
|------|------|--------|
|
||
| 中文 | zh | ✅ 100% |
|
||
| English | en | ✅ 100% |
|
||
| Português | pt | ✅ 100% |
|
||
|
||
## 📝 翻译对照表
|
||
|
||
### 预约分类
|
||
| 中文 | English | Português |
|
||
|------|---------|-----------|
|
||
| 机场 | Airport | Aeroporto |
|
||
| 火车 | Train | Trem |
|
||
| 高铁 | High-Speed Rail | Trem de Alta Velocidade |
|
||
| 巴士 | Bus | Ônibus |
|
||
| 酒店 | Hotel | Hotel |
|
||
| 民宿 | Homestay | Casa de Família |
|
||
|
||
### 表单字段
|
||
| 中文 | English | Português |
|
||
|------|---------|-----------|
|
||
| 真实姓名 | Real Name | Nome Real |
|
||
| 微信号 | WeChat ID | ID do WeChat |
|
||
| 手机号 | Phone Number | Número de Telefone |
|
||
| WhatsApp | WhatsApp | WhatsApp |
|
||
| 联系方式三选一 | Choose one contact method | Escolha um método de contato |
|
||
|
||
## 🎯 使用方法
|
||
|
||
### 在模板中使用
|
||
```vue
|
||
<template>
|
||
<text>{{ $t('common.submit') }}</text>
|
||
<text>{{ $t('appointment.categories.airport') }}</text>
|
||
</template>
|
||
```
|
||
|
||
### 在脚本中使用
|
||
```javascript
|
||
methods: {
|
||
showMessage() {
|
||
uni.showToast({
|
||
title: this.$t('common.success')
|
||
})
|
||
}
|
||
}
|
||
```
|
||
|
||
### 切换语言
|
||
```javascript
|
||
// 切换到英文
|
||
this.$i18n.locale = 'en'
|
||
uni.setStorageSync('language', 'en')
|
||
|
||
// 更新 TabBar
|
||
import { updateTabBarI18n } from '@/utils/tabbar-i18n.js'
|
||
updateTabBarI18n(this)
|
||
```
|
||
|
||
## ✨ 特性
|
||
|
||
1. **自动语言检测**
|
||
- 首次启动时自动检测系统语言
|
||
- 支持的语言自动匹配，不支持的默认中文
|
||
|
||
2. **语言持久化**
|
||
- 用户选择的语言保存到本地存储
|
||
- 下次启动自动加载用户偏好
|
||
|
||
3. **动态 TabBar**
|
||
- TabBar 文本随语言切换自动更新
|
||
- 页面切换时自动同步
|
||
|
||
4. **完整覆盖**
|
||
- 所有用户可见文本均已国际化
|
||
- 包括按钮、标签、占位符、提示信息
|
||
|
||
## 🔧 技术实现
|
||
|
||
### 语言包结构
|
||
```javascript
|
||
export default {
|
||
common: { /* 通用词汇 */ },
|
||
tabbar: { /* 底部导航 */ },
|
||
home: { /* 首页 */ },
|
||
appointment: {
|
||
/* 预约相关 */
|
||
categories: { /* 分类 */ },
|
||
serviceItem: { /* 服务项 */ }
|
||
},
|
||
reserveDetails: { /* 预约详情 */ },
|
||
infoEntry: { /* 信息填写 */ },
|
||
me: { /* 个人中心 */ },
|
||
language: { /* 语言名称 */ }
|
||
}
|
||
```
|
||
|
||
### TabBar 更新机制
|
||
```javascript
|
||
// 工具函数
|
||
export const updateTabBarI18n = (vm) => {
|
||
uni.setTabBarItem({ index: 0, text: vm.$t('tabbar.home') })
|
||
uni.setTabBarItem({ index: 1, text: vm.$t('tabbar.appointment') })
|
||
uni.setTabBarItem({ index: 2, text: vm.$t('tabbar.me') })
|
||
}
|
||
|
||
// 在页面中使用
|
||
onShow() {
|
||
updateTabBarI18n(this)
|
||
}
|
||
```
|
||
|
||
## 📊 国际化覆盖率
|
||
|
||
- ✅ 首页：100%
|
||
- ✅ 预约页面：100%
|
||
- ✅ 预约详情：100%
|
||
- ✅ 信息填写：100%
|
||
- ✅ 个人中心：100%
|
||
- ✅ TabBar：100%
|
||
- ✅ Toast 提示：100%
|
||
|
||
## 🚀 后续建议
|
||
|
||
1. **添加更多语言**
|
||
- 在 `locale/` 目录下创建新的语言文件
|
||
- 在 `locale/index.js` 中导入并注册
|
||
- 在 `me-page.vue` 的 `languages` 数组中添加
|
||
|
||
2. **服务端国际化**
|
||
- 后端返回的动态内容也需要支持多语言
|
||
- 可以在 API 请求时传递当前语言代码
|
||
|
||
3. **日期时间格式化**
|
||
- 使用 dayjs 的 locale 功能
|
||
- 根据当前语言显示不同的日期格式
|
||
|
||
4. **货币和数字格式**
|
||
- 如果涉及价格显示，需要根据语言格式化
|
||
|
||
## ✅ 测试清单
|
||
|
||
- [x] 切换到英文，所有文本正确显示
|
||
- [x] 切换到葡萄牙语，所有文本正确显示
|
||
- [x] 切换语言后 TabBar 文本同步更新
|
||
- [x] 页面跳转后 TabBar 文本保持正确
|
||
- [x] 重启应用后语言设置保持
|
||
- [x] Toast 提示信息正确国际化
|
||
- [x] 表单占位符正确国际化
|
||
|
||
---
|
||
|
||
**完成时间**: 2024
|
||
**国际化版本**: v2.0
|
||
**支持语言数**: 3
|