uniapp 手机语言

uniapp 获取手机系统语言的方法

在uniapp中获取手机系统语言可以通过调用uni.getSystemInfo或uni.getSystemInfoSync方法实现。这些方法返回的系统信息对象中包含language属性，表示当前系统的语言设置。

// 异步获取系统信息
uni.getSystemInfo({
  success: (res) => {
    console.log('系统语言:', res.language)
  }
})

// 同步获取系统信息
const systemInfo = uni.getSystemInfoSync()
console.log('系统语言:', systemInfo.language)

处理多语言场景

对于需要国际化的应用，可以结合系统语言设置进行多语言切换。通常需要准备语言资源文件，并根据获取到的系统语言加载对应的语言包。

// 示例语言资源
const messages = {
  'en': {
    welcome: 'Welcome'
  },
  'zh-Hans': {
    welcome: '欢迎'
  }
}

// 获取系统语言并设置
const lang = uni.getSystemInfoSync().language
const currentLang = messages[lang] || messages['en']
console.log(currentLang.welcome)

监听语言变化

在部分设备上，用户可能随时更改系统语言设置。可以通过监听应用生命周期或使用插件来响应语言变化。

// 在App.vue的onShow中检查语言变化
export default {
  onShow() {
    this.checkLanguage()
  },
  methods: {
    checkLanguage() {
      const newLang = uni.getSystemInfoSync().language
      if (this.currentLang !== newLang) {
        // 处理语言变更逻辑
      }
    }
  }
}

注意事项

系统返回的language值可能因平台而异，iOS通常返回类似"zh-Hans"的格式，Android可能返回类似"zh-CN"的格式。需要进行适当的格式转换以确保兼容性。

// 统一处理语言代码
function normalizeLanguage(lang) {
  if (lang.includes('zh')) {
    return lang.includes('CN') || lang.includes('Hans') ? 'zh-Hans' : 'zh-Hant'
  }
  return lang.split('-')[0]
}

扩展方案

对于更复杂的国际化需求，可以考虑使用专门的国际化插件如vue-i18n，配合uniapp的获取系统语言功能实现完整的多语言解决方案。

import VueI18n from 'vue-i18n'
import en from './locales/en.json'
import zh from './locales/zh.json'

const messages = {
  en,
  zh
}

const i18n = new VueI18n({
  locale: uni.getSystemInfoSync().language,
  fallbackLocale: 'en',
  messages
})