uniapp国际化不立即生效(带解决方案)
如果只是在app.vue那里使用
if(res.language==="zh-Hans-CN"){
uni.setStorageSync('language','ch')
}else{
uni.setStorageSync('language','en')
}
},
fail: (err) => {
console.error('获取系统信息失败:', err);
},
});
就会出现奇怪的问题:app刚安装的时候不是默认中文,可是我设置默认的是中文,得把app杀掉重启才是中文。
这通常是因为语言设置的初始化时机和应用组件的渲染时机不一致导致的。
uni.getSystemInfo 的异步性: uni.getSystemInfo 是一个异步操作,这意味着在 success 回调函数执行之前,你的应用可能已经开始渲染页面了。
组件渲染时机: 应用的首页组件可能在 uni.setStorageSync(‘language’, ‘ch’) 执行 之前 就已经根据之前的(或默认的)语言设置渲染了。
要解决这个问题,就要确保在应用的所有组件渲染 之前 就完成语言的初始化。
<script>
export default {
globalData: {
isLanguageInitialized: false, // 全局标志
},
onLaunch: function() {
// ... 其他初始化逻辑 ...
},
onShow: function() {
if (!this.globalData.isLanguageInitialized) {
this.initializeLanguage();
this.globalData.isLanguageInitialized = true;
}
},
methods: {
initializeLanguage() {
uni.getSystemInfo({
success: (res) => {
console.log('系统语言:', res.language);
let lang = 'en'; // 默认英文
if (res.language.startsWith('zh')) { // 更可靠的判断
lang = 'ch';
}
uni.setStorageSync('language', lang);
// 重要:如果你的国际化库依赖于响应式数据,
// 确保在这里也设置一下,例如:
// this.$i18n.locale = lang;
if (this.$i18n) {
this.$i18n.locale = lang
}
},
fail: (err) => {
console.error('获取系统信息失败:', err);
},
});
}
}
}
</script>
经测试可以解决以上问题。