uniapp实现中英文切换

home.js

const data = {
    ZH: {
        content1: "苹果",
    },
    EN: {
        content1: “Apple”,
    }
}
export default data

index.js

import home from "./home.js"
export default {
    home
}

en.js

import part1 from './data/part1/index.js'
const en = {
language: {
name: "english"
},
part1: {
home: {
content1: part1.home.EN.content1,
}
     }
}
export default en

zh.js

import part1 from './data/part1/index'
const zh = {
language: {
name: "中文"
},
part1: {
home: {
content1: part1.home.ZH.content1,
},
},
}
export default zh

使用

{{$t("part1.home.content1")}}

页面标题

onShow: function() {
uni.hideHomeButton();
if (this.$i18n.locale == 'en') {
uni.setNavigationBarTitle({
title: 'Home Page'
});
} else {
uni.setNavigationBarTitle({
title: '首页'
});
}
},

main.js

import ZH from '@/language/zh.js'  //中文最终汇总暴露的信息
import EN from '@/language/en.js'  //英文
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  // localStorage.getItem('languageSet') || 'zh'
  locale: 'zh',   //从localStorage里获取用户中英文选择，没有则默认中文
  messages: {
    'zh': ZH,
    'en': EN
  }
})

const app = new Vue({
i18n,
store,
...App
})

使用

<u-button size="medium" type='primary' @click="chagelanguage">{{ language }}</u-button>

chagelanguage() {
this.$i18n.locale == 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh' //设置中英文模式
if (this.$i18n.locale === 'zh') {
this.language = "en"
uni.setNavigationBarTitle({
title: '首页'
});
uni.setTabBarItem({
index: 0,
text: '首页',
})
uni.setTabBarItem({
index: 1,
text: '我的',
})
} else {
this.language = "zh"
uni.setNavigationBarTitle({
title: 'Home Page'
});
uni.setTabBarItem({
index: 0,
text: 'Home Page',
})
uni.setTabBarItem({
index: 1,
text: 'User',
})

}
},

原文地址：https://blog.csdn.net/weixin_41671425/article/details/143886784

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！