uni-app 国际化传参在App显示异常

uni-app 国际化传参在App显示异常

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
版本号 Windows 10 专业版
HBuilderX 正式
版本号 4.74
手机系统 Android
版本号 Android 11
手机厂商 华为
手机机型 红米 k20 pro
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

const timeTaskTip = computed(() => {
if (dateNum.value === 0) {
const list = times.map(item => {
return item.slice(0, 3)
})
return t('task.sl', {
time: list[singleTaskIndex.value],
hour: singleTaskIndex.value === 0 ? 'hour' : 'hours'
})
} else if (dateNum.value === 1) {
const list = everydayTimes.map(item => {
return item.slice(0, 3)
})
return t('task.el', {
time: list[everydayTaskIndex.value],
hour: everydayTaskIndex.value === 0 ? 'hour' : 'hours'
})
} else {
return t('task.esl')
}
})

操作步骤：

import { createI18n } from 'vue-i18n'
import en from './en.json'
import zhHans from './zh-Hans.json'  

const messages = {
en,
'zh-Hans': zhHans
}

const getLocale = () => {
const locale = uni.getLocale() // 获取系统语言环境
return locale.startsWith('zh') ? 'zh-Hans' : 'en'
}

const i18n = createI18n({
legacy: false, // 使用 Composition API 模式
globalInjection: true, // 全局注入 $t
locale: getLocale(),
messages
})

export default i18n 

"task.sl": "清洁一次，时长为 {time} 小时。",
"task.el": "每24小时清洁一次，每次 {time} 小时。",
"task.esl": "每48小时清洁一次，每次40分钟。"

预期结果：

传参后参数覆盖key

实际结果：

传参后参数不覆盖key

bug描述：

在PC端国际化传参显示正常,App显示异常
图一PC端图二App,App的{time}参数无效

Image 1
Image 2


更多关于uni-app 国际化传参在App显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

暂不支持，可以参考官方文档的解决办法 https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html#vue-i18n

更多关于uni-app 国际化传参在App显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app App 端使用 vue-i18n 进行国际化传参时出现参数未替换的问题，通常与平台差异和初始化时机有关。

问题分析：

  1. uni.getLocale() 在 App 端的异步特性：在 App 端，uni.getLocale() 可能需要等待原生环境准备就绪，而 PC 端可以立即获取。这可能导致 i18n 初始化时语言环境尚未正确获取。

  2. vue-i18n 版本兼容性：确保使用的 vue-i18n 版本与 Vue 3 完全兼容。建议使用 vue-i18n@9.x 或更高版本。

解决方案：

  1. 延迟初始化 i18n：
let i18n = null

const initI18n = async () => {
  const locale = await new Promise((resolve) => {
    // 给 App 端更多时间获取语言环境
    setTimeout(() => {
      resolve(uni.getLocale())
    }, 100)
  })
  
  i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: locale.startsWith('zh') ? 'zh-Hans' : 'en',
    messages
  })
  
  return i18n
}

export default initI18n
  1. 在应用启动时初始化： 在 main.js 或 App.vue 中：
import initI18n from './i18n'

initI18n().then(i18n => {
  app.use(i18n)
  // 其他初始化代码
})

  1. 检查 JSON 文件编码：确保 en.json 和 zh-Hans.json 使用 UTF-8 编码，避免特殊字符解析问题。

  2. 使用 fallbackLocale：

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: getLocale(),
  fallbackLocale: 'en', // 设置回退语言
  messages
})
回到顶部