javascript - 请问大家，关于做多语言环境的小程序是如何自动切换语言的问题？

Question

请问大家是根据用户定位获取用户所在国家，然后切换语言，还是直接通过微信自带的
wx.getSystemInfo
获取用户语言，然后加载不同的语言环境？

Answer 1

1. 用户第一次使用小程序，调用wx.getSystemInfo返回的语言做为默认值，同步到数据库。
2. 用户通过页面上的按钮切换语言，同步到数据库。
3. 在程序入口调用getLanguage获取语言来使用。

const api = {  /**   * 获取用户语言   * @return {Promise<string | undefined>}   */  getLanguage: () => new Promise((resolve) => {    setTimeout(() => {      /** @type {string | undefined} */      const lang = 'zh_CN';      resolve(lang);    }, 1000);  }),};/*** 获取系统语言* @return {Promise<string>}*/const getSystemInfo = () => new Promise((resolve) => {  window.wx.getSystemInfo({    success: (res) => {      resolve(res.language);    },  });});/*** 获取用户语言* @return {Promise<string>}*/const getLanguage = async() => {  /** @type {string} */  const defaultLanguage = 'zh_CN';  /** @type {string | undefined} */  const remoteLanguage = await api.getLanguage();  if (remoteLanguage) {    return remoteLanguage;  }  /** @type {string} */  const systemLanguage = await getSystemInfo();  if (systemLanguage) {    return systemLanguage;  }  // 兜底，不太可能发生  return defaultLanguage;};const main = async() => {  const language = getLanguage();  // 将language注入到全局使用或者vue-i18n这类的国际化工具};main();

vue组合Vue I18n的示例

import { createApp } from 'vue'import { createI18n } from 'vue-i18n'const main = async() => {  const language = await getLanguage();  const messages = {    zh: {      apple: '苹果',    },    en: {      apple: 'apple',    },  }  const i18n = createI18n({    locale: language,    messages,    // something vue-i18n options here ...  })  const app = createApp({    // something vue options here ...  })  app.use(i18n)  app.mount('#app')}

https://vue-i18n.intlify.dev/