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)