uni-app使用i18n实现多语言的切换及国际化开发

1、首先我们需要安装这个插件，安装的命令为

npm install vue-i18n --save

2、创建我们存放翻译文件的文件夹

我这次开发用的是英语和印尼语这两种语言。
这个是英语

这个是印尼语

两个文件包里面对相同文字进行翻译的名称应该是一样的。
在对应的文件中，我们需要把我们需要的文字进行翻译，我这里是使用模块导出的方式，将每个页面需要的文字进行导出。
3、接下来就是在main.js中的配置操作了

这里实例化了一个i18n，locale中是设置默认加载的语言，message中是导入的语言包。

//引入国际化
import VueI18n from 'vue-i18n';
import $indo from '@/locales/indo.js';
import $en from '@/locales/en.js';Vue.use(VueI18n);
const i18n = new VueI18n({ locale: uni.getStorageSync('locale') ? uni.getStorageSync('locale'):'indo', // 加载语言文件的内容messages: { 'indo': $indo,//印尼语'en': $en//英语}
});Vue.prototype._i18n = i18n;const app = new Vue({i18n,...App
})

4、main.js中配置结束之后我们可以开始使用了
我们切换语言是要修改页面中的数据，所以我们需要用到计算属性

computed: {i18n (){return this.$t('home')},navtitle(){return this.$t('tabBar').首页},},

页面中使用

<view>{{i18n.任务中心}}</view>

js中使用

this.$t('loading').加载中

修改tabbar的文本

uni.setTabBarItem({index: 0,text: this.$t('tabBar').首页
});
uni.setTabBarItem({index: 1,text: this.$t('tabBar').任务中心
});
uni.setTabBarItem({index: 2,text: this.$t('tabBar').我的任务
});
uni.setTabBarItem({index: 3,text: this.$t('tabBar').我的
});

修改导航栏的文字

uni.setNavigationBarTitle({title: this.$t('tabBar').首页
});

5、最关键的一点来了，如何改变语言
我们在mian.js中定义了你需要切换语言的名字

我们在你需要切换语言的地方修改this._i18n.locale的值就可以了，修改要与你定义的名字对应。
我是在一个点击事件里面，因为只有两种语言切换所以使用了三目运算，大家可以参考。

this._i18n.locale = this._i18n.locale == 'indo' ? 'en':'indo';

接下来交给你了，快来试一试吧

uni-app使用i18n实现多语言的切换及国际化开发相关推荐

APP，实现多国语言动态切换
网上一个辅助类,找不到原博主文章链接,这里就直接贴出辅助类代码(自己再优化了一下).公司项目APP要支持13种语言,如下: 1.工具类 import android.content.Context; ...
如何进行多语言发布，做国际化开发
- 1 新建 String File 文件,命名为 Localizable.strings ,往里面添加你想要的语言支持. - 2 在不同语言的 Localizable.strings文件中添加对 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

uni-app使用i18n实现多语言的切换及国际化开发

uni-app使用i18n实现多语言的切换及国际化开发相关推荐

最新文章

热门文章