feat(i18n): 添加微信小程序国际化支持

在微信小程序中，手动设置导航栏标题和tabbar文本以确保国际化生效。同时，在页面中添加了多语言测试的相关代码。

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')

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()

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>

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个元素，所以不再额外判断