多语言小程序的语言切换方案

在小程序中实现多语言环境时，如何自动切换语言是一个常见问题，通常有两种常见的解决方案：

1. 根据用户定位获取用户所在国家，然后切换语言

这种方法需要通过微信提供的 api wx.getlocation 来获取用户的位置信息，然后根据位置信息确定用户的所在国家，再根据国家来加载相应的语言环境。

2. 直接通过微信自带的 wx.getsysteminfo 获取用户语言，然后加载不同的语言环境

wx.getsysteminfo api 可以获取用户设备的系统语言，这种方法无需获取用户位置，更加直观简洁。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

推荐方案

综合考虑，更推荐使用第二种方法直接通过 wx.getsysteminfo 获取用户语言。该方法简单易用，无需涉及复杂的定位逻辑，而且小程序官方也建议使用这种方式。具体实现步骤如下：

1. 用户第一次使用小程序时，调用 wx.getsysteminfo 返回的语言作为默认值，并同步到数据库中。
2. 用户可以通过页面上的按钮切换语言，同时更新数据库中的语言设置。
3. 在程序入口处调用 getlanguage 函数获取用户设置的语言，并将其注入到全局环境中或使用 vue i18n 等国际化工具加载相应的语言内容。

代码示例

// api.js
const api = {
  /**
   * 获取用户语言
   * @return {promise<string | undefined>}
   */
  getlanguage: () => new promise((resolve) => {
    settimeout(() => {
      /** @type {string | undefined} */
      const lang = 'zh_cn';
      resolve(lang);
    }, 1000);
  }),
};

// main.js
/**
 * 获取系统语言
 * @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 = await getlanguage();

  // 将 language 注入到全局使用或者 vue-i18n 这类的国际化工具
};

main();

vue i18n 示例

使用 vue i18n 进行国际化时，可以将语言获取函数与 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')
}