uniapp和VueI18n多语言H5项目语言国际化功能搭建流程 |
您所在的位置：网站首页 › applepencil2适配手机或mac › uniapp和VueI18n多语言H5项目语言国际化功能搭建流程 |
|
uniapp多语言项目国家化功能搭建流程
说明：uniapp多语言项目功能搭建分为应用部分和框架部分。 应用部分，即开发者自己的代码里涉及的界面部分的语言翻译。框架部分，即uni-app内置组件和API涉及界面的部分的语言翻译。功能的搭建是需要uniapp内置语言api和VueI18n的相互配合的。 第一步：应用部分多语言功能搭建 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 新建对应的多语言文件 举例：en.json { "index.title": "Hello i18n" } 页面模板中使用 t ( ) 获取，并传递国际化 j s o n 文件中定义的 k e y ， j s 中使用 t h i s . t() 获取，并传递国际化json文件中定义的key，js中使用 this. t()获取，并传递国际化json文件中定义的key，js中使用this.t(‘’) {{$t('index.title')}} export default { data() { return { } } }注意：页面中设置语言后需要调用 this.$i18n.locale = ‘zh-Hans’ 后生效 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。这些界面包含的文字也需要国际化。 框架部分可分为自动策略和自定义方案 自动策略可自动适配手机和浏览器语言内置语言如下： 中文简体中文繁体英语法语西班牙语注意：内置组件和接口显示会根据系统语言环境自动切换，未支持的系统语言环境会显示为英文。 自定义方案如果自动适配语言不满足你的需求，比如需要预置的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项目国际化功能的流程，欢迎各位朋友交流探讨。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |