From 125e305cd764cb6a6d2bc0c82355f1c6456f4522 Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Wed, 21 May 2025 10:13:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(i18n):=20=E6=B7=BB=E5=8A=A0=E5=BE=AE?=
 =?UTF-8?q?=E4=BF=A1=E5=B0=8F=E7=A8=8B=E5=BA=8F=E5=9B=BD=E9=99=85=E5=8C=96?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在微信小程序中，手动设置导航栏标题和tabbar文本以确保国际化生效。同时，在页面中添加了多语言测试的相关代码。
---
 src/App.vue               | 21 +++++++++++++++++++++
 src/pages/about/about.vue | 11 +++++++++++
 src/pages/about/i18n.vue  |  3 +++
 src/utils/index.ts        |  1 +
 4 files changed, 36 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index d32c900..84d0caf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,30 @@
 <script setup lang="ts">
 import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
+import { useI18n } from 'vue-i18n'
+import { tabBarList, getIsTabbar } from '@/utils/index'
 
 onLaunch(() => {
   console.log('App Launch')
+  // #ifdef MP-WEIXIN
+  const setTabbarText = () => {
+    if (!getIsTabbar()) {
+      return
+    }
+    const { t } = useI18n()
+    const tabbarTexts = tabBarList.map((item) => item.text.replace(/(^%|%$)/g, ''))
+    tabbarTexts.forEach((tabbar: string, index: number) => {
+      console.log('tabbar', tabbar)
+      uni.setTabBarItem({
+        index,
+        text: t(tabbar),
+      })
+    })
+  }
+  // fix 微信小程序需要手动调用 api 设置一次国际化tabbar text。
+  setTabbarText()
+  uni.onLocaleChange(setTabbarText)
+  // #endif
 })
 onShow(() => {
   console.log('App Show')
diff --git a/src/pages/about/about.vue b/src/pages/about/about.vue
index 5dcf9a5..c10a184 100644
--- a/src/pages/about/about.vue
+++ b/src/pages/about/about.vue
@@ -27,6 +27,17 @@
 <script lang="ts" setup>
 import RequestComp from './components/request.vue'
 import UploadComp from './components/upload.vue'
+import i18n, { t } from '@/locale/index'
+
+onShow(() => {
+  console.log('About Show', t('app.name'))
+  console.log(uni.getLocale())
+  console.log(i18n.global.locale)
+  // #ifdef MP-WEIXIN
+  // fix 微信小程序需要手动调用 api 设置一次国际化标题。
+  uni.setNavigationBarTitle({ title: t('app.name') })
+  // #endif
+})
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
diff --git a/src/pages/about/i18n.vue b/src/pages/about/i18n.vue
index 69f3044..63724ca 100644
--- a/src/pages/about/i18n.vue
+++ b/src/pages/about/i18n.vue
@@ -22,7 +22,10 @@
     </view>
     <view class="text-green-500">多语言测试</view>
     <view class="m-4">{{ $t('app.name') }}</view>
+    <view class="italic text-gray-500">使用$t: {{ $t('weight', { heavy: 100 }) }}</view>
     <view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view>
+    <view class="italic text-gray-500">使用t: {{ t('weight', { heavy: 100 }) }}</view>
+    <view class="m-4">{{ t('weight', { heavy: 100 }) }}</view>
     <view class="m-4">{{ t('introduction', user) }}</view>
 
     <view class="text-green-500 mt-12">切换语言</view>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index c2e9ef5..0ac0c6b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -2,6 +2,7 @@ import pagesConfig from '@/pages.json'
 import { isMpWeixin } from './platform'
 
 const { pages, subPackages, tabBar = { list: [] } } = { ...pagesConfig }
+export const tabBarList = tabBar.list
 
 export const getLastPage = () => {
   // getCurrentPages() 至少有1个元素，所以不再额外判断