请问大家,关于做多语言环境的小程序是如何自动切换语言的问题?-灵析社区

接地气的编码师

![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/1f3f3d944b0d2ab3a5d29273912ff319.png) 请问大家是根据用户定位获取用户所在国家,然后切换语言,还是直接通过微信自带的 wx.getSystemInfo 获取用户语言,然后加载不同的语言环境?

阅读量:131

点赞量:0

问AI
1. 用户第一次使用小程序,调用"wx.getSystemInfo"返回的语言做为默认值,同步到数据库。 2. 用户通过页面上的按钮切换语言,同步到数据库。 3. 在程序入口调用"getLanguage"获取语言来使用。 const api = { /** * 获取用户语言 * @return {Promise} */ getLanguage: () => new Promise((resolve) => { setTimeout(() => { /** @type {string | undefined} */ const lang = 'zh_CN'; resolve(lang); }, 1000); }), }; /** * 获取系统语言 * @return {Promise} */ const getSystemInfo = () => new Promise((resolve) => { window.wx.getSystemInfo({ success: (res) => { resolve(res.language); }, }); }); /** * 获取用户语言 * @return {Promise} */ 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/" (vue-i18n)