权威的徐州网站建设,WordPress实现,孝感市建设网站,软文推广有哪些uniapp多语言项目国家化功能搭建流程
说明#xff1a;uniapp多语言项目功能搭建分为应用部分和框架部分。
应用部分#xff0c;即开发者自己的代码里涉及的界面部分的语言翻译。框架部分#xff0c;即uni-app内置组件和API涉及界面的部分的语言翻译。
功能的搭建是需要un…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文件中定义的keyjs中使用 this. t()获取并传递国际化json文件中定义的keyjs中使用this.t(‘’)
templateview classcontainerview classtitle{{$t(index.title)}}/view/view
/templatescriptexport default {data() {return {}}}
/script注意页面中设置语言后需要调用 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.jsonuni-app.zh-Hans.jsonuni-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: 应用此设置将重启Appsuccess: (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项目国际化功能的流程欢迎各位朋友交流探讨。
