i18n

pnpm-lock.yaml

@@ -79,7 +79,7 @@ importers:
         version: 3.5.12(typescript@5.6.3)
       vue-i18n:
         specifier: ^9.1.9
-        version: 9.14.1(vue@3.5.12(typescript@5.6.3))
+        version: 9.1.9(vue@3.5.12(typescript@5.6.3))
       yup:
         specifier: ^1.4.0
         version: 1.4.0
@@ -1019,10 +1019,6 @@ packages:
     resolution: {integrity: sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==}
     engines: {node: '>= 10'}
 
-  '@intlify/core-base@9.14.1':
-    resolution: {integrity: sha512-rG5/hlNW6Qfve41go37szEf0mVLcfhYuOu83JcY0jZKasnwsrcZYYWDzebCcuO5I/6Sy1JFWo9p+nvkQS1Dy+w==}
-    engines: {node: '>= 16'}
-
   '@intlify/devtools-if@9.1.9':
     resolution: {integrity: sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==}
     engines: {node: '>= 10'}
@@ -1031,10 +1027,6 @@ packages:
     resolution: {integrity: sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==}
     engines: {node: '>= 10'}
 
-  '@intlify/message-compiler@9.14.1':
-    resolution: {integrity: sha512-MY8hwukJBnXvGAncVKlHsqKDQ5ZcQx4peqEmI8wBUTXn4pezrtTGYXNoz81cLyEEHB+L/zlKWVBSh5TiX4gYoQ==}
-    engines: {node: '>= 16'}
-
   '@intlify/message-resolver@9.1.9':
     resolution: {integrity: sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==}
     engines: {node: '>= 10'}
@@ -1047,10 +1039,6 @@ packages:
     resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
     engines: {node: '>= 10'}
 
-  '@intlify/shared@9.14.1':
-    resolution: {integrity: sha512-XjHu6PEQup9MnP1x0W9y0nXXfq9jFftAYSfV11hryjtH4XqXP8HrzMvXI+ZVifF+jZLszaTzIhvukllplxTQTg==}
-    engines: {node: '>= 16'}
-
   '@intlify/vue-devtools@9.1.9':
     resolution: {integrity: sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==}
     engines: {node: '>= 10'}
@@ -4315,9 +4303,9 @@ packages:
       '@vue/composition-api':
         optional: true
 
-  vue-i18n@9.14.1:
+  vue-i18n@9.1.9:
-    resolution: {integrity: sha512-xjxV0LYc1xQ8TbAVfIyZiOSS8qoU1R0YwV7V5I8I6Fd64+zvsTsdPgtylPsie3Vdt9wekeYhr+smKDeaK6RBuA==}
+    resolution: {integrity: sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==}
-    engines: {node: '>= 16'}
+    engines: {node: '>= 10'}
     peerDependencies:
       vue: ^3.0.0
 
@@ -5977,11 +5965,6 @@ snapshots:
       '@intlify/shared': 9.1.9
       '@intlify/vue-devtools': 9.1.9
 
-  '@intlify/core-base@9.14.1':
-    dependencies:
-      '@intlify/message-compiler': 9.14.1
-      '@intlify/shared': 9.14.1
-
   '@intlify/devtools-if@9.1.9':
     dependencies:
       '@intlify/shared': 9.1.9
@@ -5992,11 +5975,6 @@ snapshots:
       '@intlify/shared': 9.1.9
       source-map: 0.6.1
 
-  '@intlify/message-compiler@9.14.1':
-    dependencies:
-      '@intlify/shared': 9.14.1
-      source-map-js: 1.2.1
-
   '@intlify/message-resolver@9.1.9': {}
 
   '@intlify/runtime@9.1.9':
@@ -6007,8 +5985,6 @@ snapshots:
 
   '@intlify/shared@9.1.9': {}
 
-  '@intlify/shared@9.14.1': {}
-
   '@intlify/vue-devtools@9.1.9':
     dependencies:
       '@intlify/message-resolver': 9.1.9
@@ -9800,10 +9776,11 @@ snapshots:
     dependencies:
       vue: 3.5.12(typescript@5.6.3)
 
-  vue-i18n@9.14.1(vue@3.5.12(typescript@5.6.3)):
+  vue-i18n@9.1.9(vue@3.5.12(typescript@5.6.3)):
     dependencies:
-      '@intlify/core-base': 9.14.1
+      '@intlify/core-base': 9.1.9
-      '@intlify/shared': 9.14.1
+      '@intlify/shared': 9.1.9
+      '@intlify/vue-devtools': 9.1.9
       '@vue/devtools-api': 6.6.4
       vue: 3.5.12(typescript@5.6.3)
 

src/locale/en.js

@@ -0,0 +1,23 @@
+export default {
+    button: {
+        confirm: 'Confirm',
+        login: 'Login'
+    },
+    label: {
+        all: "All"
+    },
+    my: {
+        toTestPage: "to Test Page",
+        getLocation: "getLocation",
+        openCameraTestPage: "open Camera Test Page",
+        cryptoTestPage: "crypto Test Page"
+    },
+    language: {
+        switch: "Toggle The Language To",
+        zhHans: "中文",
+        en: "English"
+    },
+    pages: {
+        my: "My"
+    }
+}

src/locale/index.js

@@ -0,0 +1,22 @@
+import { createI18n } from "vue-i18n";
+import en from "./en";
+import zhHans from "./zh-Hans"
+
+const messages = {
+    en,
+    'en-US': en,
+    zhHans,
+    'zh-Hans': zhHans
+}
+
+// 创建i18n
+const i18n = createI18n({
+    locale: uni.getLocale() || "zh-Hans", // 语言标识
+    fallbackLocale: "zh-Hans",
+    globalInjection: true, // 全局注入,可以直接使用$t
+    // 处理报错: Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
+    legacy: false,
+    messages
+})
+
+export default i18n;

src/locale/uni-app.en.json

@@ -0,0 +1,8 @@
+{
+  "common": {},
+  "ios": {},
+  "android": {},
+  "pages": {
+    "my": "My"
+  }
+}

src/locale/uni-app.zh-Hans.json

@@ -0,0 +1,39 @@
+{
+  "common": {
+    "uni.app.quit": "再按一次退出应用",
+    "uni.async.error": "连接服务器超时，点击屏幕重试",
+    "uni.showActionSheet.cancel": "取消",
+    "uni.showToast.unpaired": "请注意 showToast 与 hideToast 必须配对使用",
+    "uni.showLoading.unpaired": "请注意 showLoading 与 hideLoading 必须配对使用",
+    "uni.showModal.cancel": "取消",
+    "uni.showModal.confirm": "确定",
+    "uni.chooseImage.cancel": "取消",
+    "uni.chooseImage.sourceType.album": "从相册选择",
+    "uni.chooseImage.sourceType.camera": "拍摄",
+    "uni.chooseVideo.cancel": "取消",
+    "uni.chooseVideo.sourceType.album": "从相册选择",
+    "uni.chooseVideo.sourceType.camera": "拍摄",
+    "uni.previewImage.cancel": "取消",
+    "uni.previewImage.button.save": "保存图像",
+    "uni.previewImage.save.success": "保存图像到相册成功",
+    "uni.previewImage.save.fail": "保存图像到相册失败",
+    "uni.setClipboardData.success": "内容已复制",
+    "uni.scanCode.title": "扫码",
+    "uni.scanCode.album": "相册",
+    "uni.scanCode.fail": "识别失败",
+    "uni.scanCode.flash.on": "轻触照亮",
+    "uni.scanCode.flash.off": "轻触关闭",
+    "uni.startSoterAuthentication.authContent": "指纹识别中...",
+    "uni.picker.done": "完成",
+    "uni.picker.cancel": "取消",
+    "uni.video.danmu": "弹幕",
+    "uni.video.volume": "音量",
+    "uni.button.feedback.title": "问题反馈",
+    "uni.button.feedback.send": "发送"
+  },
+  "ios": {},
+  "android": {},
+  "pages": {
+    "my": "我的"
+  }
+}

src/locale/zh-Hans.js

@@ -0,0 +1,23 @@
+export default {
+    button: {
+        confirm: '确认',
+        login: '登录'
+    },
+    label: {
+        all: "全部"
+    },
+    my: {
+        toTestPage: "进入测试页面",
+        getLocation: "获取位置",
+        openCameraTestPage: "打开相机测试页面",
+        cryptoTestPage: "加解密测试页面"
+    },
+    language: {
+        switch: "切换语言为",
+        zhHans: "中文",
+        en: "English"
+    },
+    pages: {
+        my: "我的"
+    }
+}

src/main.js

@@ -2,6 +2,7 @@ import App from './App'
 import "./api/http"
 import pinia from './stores'
 import "./tailwind.css"
+import i18n from "./locale"
 
 // #ifndef VUE3
 import Vue from 'vue'
@@ -11,6 +12,7 @@ App.mpType = 'app'
 const app = new Vue({
   ...App
 })
+app.use(i18n)
 app.$mount()
 // #endif
 
@@ -19,6 +21,7 @@ import { createSSRApp } from 'vue'
 export function createApp() {
   const app = createSSRApp(App)
   app.use(pinia)
+  app.use(i18n)
   return {
     app
   }

src/manifest.json

@@ -4,6 +4,7 @@
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
+    "locale": "auto",
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

src/pages.json

@@ -18,7 +18,7 @@
     {
       "path": "pages/my-info/my-info",
       "style": {
-        "navigationBarTitleText": "我的"
+        "navigationBarTitleText": "%pages.my%"
       }
     },
     {

src/pages/commodity/components/comments/tags.vue

@@ -1,11 +1,12 @@
 <script setup>
 import {reactive} from "vue"
-
+import { useI18n } from 'vue-i18n'
+const { locale, t } = useI18n()
 const ctx = reactive({
   current: "-1",
   tags: [
     {
-      name: "全部",
+      name: t("label.all"),
       value: "-1"
     },
     {

src/pages/my-info/my-info.vue

@@ -3,20 +3,67 @@
 		页面内容
 	</view>
   <view class="warp">
-    <button type="warn" @click="toTestPage">进入测试页面</button>
+    <button type="warn" @click="toTestPage">{{ t("my.toTestPage") }}</button>
-    <button class="button" type="primary" @click="getLocation">获取位置</button>
+    <button class="button" type="primary" @click="getLocation">{{ t('my.getLocation') }}</button>
 
     <navigator url="/sub-packages/test-page/pages/test-crypto">
-      <button>加解密测试页面</button>
+      <button>{{ t('my.cryptoTestPage') }}</button>
     </navigator>
 
     <navigator url="/sub-packages/test-page/pages/test-camera">
-      <button>打开相机测试页面</button>
+      <button>{{ t('my.openCameraTestPage') }}</button>
     </navigator>
+
+    <button class="button" @click="switchLanguage">{{t('language.switch')}} {{t(ctx.lang.switchTo)}}</button>
   </view>
 </template>
 
 <script setup>
+import {reactive, watchEffect} from "vue"
+import {useI18n} from "vue-i18n"
+import {onReady} from "@dcloudio/uni-app";
+const {t, locale} = useI18n()
+
+const ctx = reactive({
+  lang: {
+    switchTo: ''
+  }
+})
+
+function switchLanguage(){
+  if(uni.getLocale().startsWith("en")){
+    uni.setLocale("zh-Hans")
+    locale.value = "zh-Hans"
+  } else {
+    uni.setLocale("en")
+    locale.value = "en"
+  }
+
+  uni.setNavigationBarTitle({
+    title: t("pages.my")
+  })
+  console.log(uni.getLocale())
+}
+
+function initLanguage(){
+  if(uni.getLocale().startsWith("en")){
+    ctx.lang.switchTo = "language.zhHans"
+  } else {
+    ctx.lang.switchTo = "language.en"
+  }
+}
+
+watchEffect(()=>{
+  initLanguage()
+})
+
+onReady(()=>{
+  initLanguage()
+  uni.setNavigationBarTitle({
+    title: t("pages.my")
+  })
+})
+
 function toTestPage(){
   uni.navigateTo({
     url: '/sub-packages/test-page/pages/test-page',