uniapp 如何实现自定义国际化功能

在uniapp中想要实现自定义国际化功能，比如根据用户选择的语言切换界面文字，但不想用现成的插件。请问应该如何手动实现？具体需要哪些步骤？比如语言包的配置、动态切换逻辑、以及如何在页面中调用翻译内容？有没有完整的示例代码可以参考？

2 回复

在uniapp中，可通过以下步骤实现自定义国际化：

  1. 创建语言包文件（如zh-CN.js、en-US.js）
  2. 使用vue-i18n插件
  3. 在main.js中配置i18n实例
  4. 页面中使用$t()方法调用翻译

核心代码：

// 创建i18n实例
const i18n = new VueI18n({
  locale: 'zh-CN',
  messages
})

简单实用，轻松实现多语言切换。


在 UniApp 中实现自定义国际化功能，可以通过以下步骤完成：

1. 创建语言资源文件

在项目中创建语言资源文件，例如：

  • lang/zh-CN.js（中文）
  • lang/en-US.js（英文）

示例内容：

// zh-CN.js
export default {
  welcome: '欢迎使用',
  buttonText: '点击我'
}

// en-US.js
export default {
  welcome: 'Welcome',
  buttonText: 'Click me'
}

2. 创建语言管理模块

新建 utils/i18n.js 文件：

import zhCN from '@/lang/zh-CN.js'
import enUS from '@/lang/en-US.js'

const messages = {
  'zh-CN': zhCN,
  'en-US': enUS
}

let locale = 'zh-CN' // 默认语言

export default {
  // 获取当前语言
  getLocale() {
    return locale
  },
  
  // 设置语言
  setLocale(lang) {
    if (messages[lang]) {
      locale = lang
      // 可以在这里持久化存储语言选择
      uni.setStorageSync('USER_LANGUAGE', lang)
    }
  },
  
  // 翻译方法
  t(key) {
    return messages[locale][key] || key
  }
}

3. 在页面中使用

在 Vue 页面中引入并使用：

<template>
  <view>
    <text>{{ $t('welcome') }}</text>
    <button @click="changeLanguage">{{ $t('buttonText') }}</button>
  </view>
</template>

<script>
import i18n from '@/utils/i18n.js'

export default {
  data() {
    return {
      // 初始化时从存储中读取语言设置
      currentLang: uni.getStorageSync('USER_LANGUAGE') || 'zh-CN'
    }
  },
  
  onLoad() {
    i18n.setLocale(this.currentLang)
  },
  
  methods: {
    // 语言切换方法
    changeLanguage() {
      const newLang = this.currentLang === 'zh-CN' ? 'en-US' : 'zh-CN'
      i18n.setLocale(newLang)
      this.currentLang = newLang
      uni.showToast({
        title: '语言切换成功',
        icon: 'none'
      })
    },
    
    // 翻译方法
    $t(key) {
      return i18n.t(key)
    }
  }
}
</script>

4. 全局混入（可选）

在 main.js 中全局混入，方便所有页面使用：

import i18n from './utils/i18n.js'

// 全局混入翻译方法
Vue.mixin({
  methods: {
    $t(key) {
      return i18n.t(key)
    }
  }
})

5. 注意事项

  • 语言切换后需要手动刷新页面或使用 uni.reLaunch() 重新加载
  • 可以添加更多语言支持，只需创建新的语言文件并添加到 messages 中
  • 对于复杂项目，建议使用 vue-i18n 库，但需要配置小程序兼容

6. 完整示例结构

project/
├── lang/
│   ├── zh-CN.js
│   └── en-US.js
├── utils/
│   └── i18n.js
└── pages/
    └── index.vue

这种方式简单易用，适合大多数 UniApp 项目的国际化需求。

回到顶部