一、Uniapp國際化方案
在多語言需求的場景下,Uniapp推出了國際化方案。在多語言需求中,可以為不同的語言提供相應的翻譯,便於用戶更好地了解應用的功能。下面來看一下Uniapp的國際化方案。
//main.js
import VueI18n from 'vue-i18n'
import zh from '@/locale/lang/zh-CN' //引入中文
import en from '@/locale/lang/en-US' //引入英文
import cnmsg from '@/locale/lang/cnmsg.json' //引入中文語言包
import enmsg from '@/locale/lang/enmsg.json' //引入英文語言包
Vue.use(VueI18n);
const locale = uni.getStorageSync('locale') || 'zh_CN';
const i18n = new VueI18n({
locale,
messages: {
'zh_CN': Object.assign(zh, cnmsg),
'en_US': Object.assign(en, enmsg),
}
});
export default i18n;
在上述代碼中,我們已經可以看到國際化的核心文件Vue-i18n以及引入的中英文語言包。通過用戶設置獲取所需語言包。
二、Uniapp國際化Tabbar無效
在Uniapp國際化方案中,我們有時會發現Tabbar組件的國際化無效。原因是Tabbar是在APP.vue中定義和切換。我們需要在每個子頁面中重新定義Tabbar組件來解決這個問題。
//app.vue原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/192639.html