uniapp基础篇 - - 实现APP语言国际化

---

提示：该项目只用于个人实战，不应用于任何商业用途。

一、今日实战目标

• 实现应用内切换多国语言
• 最终效果请看下面的视频

2022_08_24_19_58_IMG_2321

---

二、实战步骤

1. 引入库

• 在项目根目录，用命令行的方式引入库
  代码如下（示例）：

npm install vue-i18n   //npm

yarn add vue-i18n    //yarn

2. 创建相关文件

• 按下方图，创建指定文件
  

文件源代码

// index.ts
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
	en,
	'zh-Hans': zhHans,
	'zh-Hant': zhHant
}

// en.json
{
  "locale.auto": "System",
  "locale.en": "English",
  "locale.zh-hans": "简体中文",
  "locale.zh-hant": "繁体中文",
  "locale.ja": "日语",
  "index.title": "Togather APP",
  "index.home": "Home",
  "index.component": "Component",
  "index.api": "API",
  "index.schema": "Schema",
  "index.demo": "uni-app globalization",
  "index.demo-description": "Include uni-framework, manifest.json, pages.json, tabbar, Page, Component, API, Schema",
  "index.detail": "Detail",
  "index.language": "Language",
  "index.language-info": "Settings",
  "index.system-language": "System language",
  "index.application-language": "Application language",
  "index.language-change-confirm": "Applying this setting will restart the app",
  "api.message": "Message",
  "schema.name": "Name",
  "schema.add": "Add",
  "schema.add-success": "Add success",
  
  "language":"繁體中文",
  "refresh":"Success !",
  "index.setting":"Setting",
  "index.amount":"Amount to settle",
  "index.check":"View details",
  "index.order":"Order List",
  "index.product":"Product List",
  "index.scan":"Scan Code",
  "index.tip":"The application only provides basic functions, please go to the PC side to experience the full functions.",
  "index.orders":"Latest Orders",
  "index.view":"View"
}

//  zh-Hant.json
{
  "locale.auto": "系統",
  "locale.en": "English",
  "locale.zh-hans": "简体中文",
  "locale.zh-hant": "繁體中文",
  "locale.ja": "日语",
  "index.title": "訂單核銷系統",
  "index.home": "主頁",
  "index.component": "組件",
  "index.api": "API",
  "index.schema": "Schema",
  "index.demo": "uni-app 國際化演示",
  "index.demo-description": "包含 uni-framework、manifest.json、pages.json、tabbar、頁面、組件、API、Schema",
  "index.detail": "詳情",
  "index.language": "語言",
  "index.language-info": "語言信息",
  "index.system-language": "系統語言",
  "index.application-language": "應用語言",
  "index.language-change-confirm": "應用此設置將重啟App",
  "api.message": "提示",
  "schema.name": "姓名",
  "schema.add": "新增",
  "schema.add-success": "新增成功",
  
  "language":"English",
  "refresh":"刷新成功 !",
  "index.setting":"設置",
  "index.amount":"訂單總金額",
  "index.check":"查看詳情",
  "index.order":"訂單管理",
  "index.product":"產品列表",
  "index.scan":"掃碼核銷",
  "index.tip":"應用僅提供基本功能,完整功能請前往PC端進行體驗.",
  "index.orders":"最新訂單",
  "index.view":"查看"
}

3. 编辑main.js文件

• 引入步骤2中写的index.ts
  

// main.js文件源代码

import App from './App'
import messages from './locale/index'

let i18nConfig = {
  locale: uni.getLocale(),
  messages
}

// #ifndef VUE3
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  i18n,
  ...App
})
app.$mount()
// #endif

4. 在页面中使用

• 使用方法很简单，一定要对应.json文件中的名称

  {{$t('index.amount')}}  

// 语言为繁体中文时，显示的内容为  `訂單總金額`
//  语言为英文，则显示  `Amount to settle`

5. 切换语言的方法

uni.setLocale(‘en’);
this.$i18n.locale = ‘en’;

---

总结

本文讲解了如果在uniapp中实现语言国际化，如果在使用中有遇到不起效或者其他情况，评论区留下你的问题，谢谢！！