uniapp多语言项目国家化功能搭建流程

说明：uniapp多语言项目功能搭建分为应用部分和框架部分。

  • 应用部分，即开发者自己的代码里涉及的界面部分的语言翻译。
  • 框架部分，即uni-app内置组件和API涉及界面的部分的语言翻译。

功能的搭建是需要uniapp内置语言api和VueI18n的相互配合的。

第一步：应用部分多语言功能搭建

  1. main.js 引入并初始化 VueI18n
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
const messages = {
	en,
	'zh-Hans': zhHans,
	'zh-Hant': zhHant
}

let i18nConfig = {
  locale: uni.getLocale(),// 获取已设置的语言
  messages
}
// 以上部分可以单独放入新建local/index.js文件内，记得用export default导出文件内容。

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

// VUE3
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'// v9.x
const i18n = createI18n(i18nConfig)
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  return {
    app
  }
}
// #endif
  1. 新建对应的多语言文件
    举例：en.json
{
  "index.title": "Hello i18n"
}
  1. 页面模板中使用 uniapp ios应用名称多语言_uni-appt(‘’)
<template>
  <view class="container">
    <view class="title">{{$t('index.title')}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

注意：页面中设置语言后需要调用 this.$i18n.locale = ‘zh-Hans’ 后生效

  1. pages.json 国际化
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "%index.title%"
      }
    }
  ],
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "%index.home%"
      }
    ]
  }
}

注意：locale目录下 语言地区代码.json 文件中定义的 key，使用 %% 占位

语言文件示例（zh-Hans.json）

{
  "app.name": "Hello uni-app",
  "index.title": "首页"
}

第二步：框架部分多语言功能搭建

说明：uni-app 有内置的基础组件，比如picker，或者与界面相关的API，比如showModal。这些界面包含的文字也需要国际化。

框架部分可分为自动策略和自定义方案

  1. 自动策略可自动适配手机和浏览器语言

内置语言如下：

  • 中文简体
  • 中文繁体
  • 英语
  • 法语
  • 西班牙语

注意：内置组件和接口显示会根据系统语言环境自动切换，未支持的系统语言环境会显示为英文。

  1. 自定义方案

如果自动适配语言不满足你的需求，比如需要预置的5种语言外的更多语言。那么可以使用自定义方案。在指定目录创建指定文件，用同名词条来替换，语言地区代码请遵循 BCP47 规范。

符合 BCP47 规范 的语言代码
语言代码通常为两个或三个字母，参考链接: ISO 639规范
语言代码-地区代码，地区代码为两个字母，参考链接: ISO 3166-2规范

项目根目录支持 locale 目录，locale/uni-app.语言地区代码.json，如：uni-app.en.json，uni-app.zh-Hans.json，uni-app.zh-Hant.json
举例： uni-app.zh-Hans.json 文件

{
  "common": {
    "uni.app.quit": "再按一次退出应用",
    "uni.async.error": "连接服务器超时，点击屏幕重试",
    "uni.showActionSheet.cancel": "取消",
    "uni.showToast.unpaired": "请注意 showToast 与 hideToast 必须配对使用",
    "uni.showLoading.unpaired": "请注意 showLoading 与 hideLoading 必须配对使用",
    "uni.showModal.cancel": "取消",
    "uni.showModal.confirm": "确定",
    "uni.chooseImage.cancel": "取消",
    "uni.chooseImage.sourceType.album": "从相册选择",
    "uni.chooseImage.sourceType.camera": "拍摄",
    "uni.chooseVideo.cancel": "取消",
    "uni.chooseVideo.sourceType.album": "从相册选择",
    "uni.chooseVideo.sourceType.camera": "拍摄",
    "uni.previewImage.cancel": "取消",
    "uni.previewImage.button.save": "保存图像",
    "uni.previewImage.save.success": "保存图像到相册成功",
    "uni.previewImage.save.fail": "保存图像到相册失败",
    "uni.setClipboardData.success": "内容已复制",
    "uni.scanCode.title": "扫码",
    "uni.scanCode.album": "相册",
    "uni.scanCode.fail": "识别失败",
    "uni.scanCode.flash.on": "轻触照亮",
    "uni.scanCode.flash.off": "轻触关闭",
    "uni.startSoterAuthentication.authContent": "指纹识别中...",
    "uni.picker.done": "完成",
    "uni.picker.cancel": "取消",
    "uni.video.danmu": "弹幕",
    "uni.video.volume": "音量",
    "uni.button.feedback.title": "问题反馈",
    "uni.button.feedback.send": "发送"
  },
  "ios": {},
  "android": {}
}

注意：uni-app.zh-Hans.json和zh-Hans.json的命名要一样，否则uniapp识别调用不到。

manifest.json 国际化

{
  "name" : "%app.name%",
  "appid" : "",
  "description" : "",
  "versionName" : "1.0.0",
  "versionCode" : "100",
  "locale": "zh-Hans" // 设置默认语言，
}

manifest.json 中支持配置应用默认语言，参见上面的示例，"locale"默认为auto，跟随系统OS的语言。

uni-app内置了一批与国际化相关的API和生命周期。链接在这里: uni-app国际化相关的API和生命周期

第三步：调用多语言功能

在设置多语言功能页面加入设置多语言的代码即可，参考如下：

onLoad(options) {
	let systemInfo = uni.getSystemInfoSync();
	this.applicationLocale = uni.getLocale();
	this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
	uni.onLocaleChange((e) => {
		this.applicationLocale = e.locale;
	})
},
methods: {
	onLocaleChange(e) {
		if (this.isAndroid) {
			uni.showModal({
				content: this.$t('index.language-change-confirm'),  // "index.language-change-confirm": "应用此设置将重启App"
				success: (res) => {
					if (res.confirm) {
						uni.setLocale(e.code);
					}
				}
			})
		} else {
			uni.setLocale(e.code);
			this.$i18n.locale = e.code;
			uni.setStorageSync('lang', e.lang);
			window.location.href ="/"
		}
	},
}

以上就是我搭建uniappH5项目国际化功能的流程，欢迎各位朋友交流探讨。