uni-app项目使用多语言切换功能

1.下载安装（vue-i18n模块）

npm install vue-i18n --save

2.如果项目中没有package.json文件，在根目录下新建package.json文件，并把以下代码加入：

{
   "dependencies": {
       "vue-i18n": "^8.27.0"
   }
}

从新执行安装命令：npm install vue-i18n --save

3.根目录下新建lang文件夹以及添加语言包en.json和zh.json，可自行添加其他语言包（看自己需求）还有语言配置文件index.js 如图所示：

4.配置lang文件夹下的index如下：

import zh from './zh'
import en from './en'export default {'en':en,'zh':zh
}

5.配置用到的语言json文件:举例如下:（特别注意json之间数据结构是一致的）

en.json文件如下：

{"index":{"hometitle":"Information","ceshi":"demo"},"tabbar":{"search":"search","place_order":"place order","history":"history","order_list":"order","more":"more"}
}

zh文件如下：

{"index":{"hometitle":"标题信息","ceshi":"测试"},"tabbar":{"search":"搜索","place_order":"下单","history":"历史","order_list":"订单","more":"更多"}
}

6.配置main.js

import VueI18n from 'vue-i18n';   //引入npm下载模块
import messages from 'lang/index.js'  //引入自定义语言文件Vue.use(VueI18n);    //全局使用
const i18n = new VueI18n({  locale: uni.getStorageSync('locale') || 'en-US',  // 默认选择的语言messages
});Vue.prototype._i18n = i18n;   //作为属性挂载const app = new Vue({i18n,...App
})

7.直接引入使用{{$t('tabbar.search')}}

<view class="pub_bar_img" @click="gototabbar('/pages/index/index')"><view :class="[selectnum==1?'tabbar_taxt':'img_boot_box']">        {{$t('tabbar.search')}}</view>
</view>

8. 语言切换功能，在设置的页面直接使用内存uni.setStorageSync('locale', this.locale);this.locale是自己需要设置的语言

uni-app项目使用多语言切换功能相关推荐

android locale app内设置,Android app应用多语言切换功能实现
本文实例为大家分享了Android app应用实现多语言切换功能,供大家参考,具体内容如下 1.添加多语言文件在不同的 value 文件夹下(例如 value .value-en.values-zh- ...
Android实现app内的语言切换功能
我在目前所在的公司负责一个app项目的维护,最近需要对这个项目进行国际化,适配10多个国家的语言,在实现国际化过程中,遇到了很多问题,最麻烦的就是翻译了,得一个个将翻译从excel复制到资源文件中,还 ...
html怎么实现多语言图片切换,JavaScript实现--中英语言切换功能
最近弄的项目是面向国际的,所以老总说要有语言切换功能.第一感觉好像不难吧网上查了下,感觉实现方法就2种: 一:2个版本的HTML.至于怎么切换,方法也很多. 不过这种方法,除了笨,我实在不知道用什么 ...
Android app应用多语言切换功能实现
最近在做一个多语言切换的功能,类似于微信的语言切换,搜了下资料基本上都是以下这种: 1. 实现的效果和微信类似,在设置界面打开切换语言的界面,选择语言后重启 HomeActivity,语言切换完成, ...
Android学习–Android app 语言切换功能
功能: app用户根据自己的语言喜好,设置app语言.语言设置只针对本app,并在下次启动应用时保留前一次启动设置. 更新语言: public static void changeAppLanguag ...
vue 使用vue-i18n 国际化，语言切换功能
最近项目中要使用到语言切换这一功能,遂百度一番,发现使用vue-i18n即可以实现项目国际化. 1. 首先安装vue-i18n npm install vue-i18n 2 在main.js里面引用 ...
Qt之Qml 国际化—实现简易语言切换功能
目标:实现一个下拉框,具有切换语言的功能 GIF展示: 版本Qt5.14.2,版本不能低于5.10 qml控件 1.在QML文件中把需要翻译显示的文本用qsTr(" ")包裹起来 ...
android 切换语言广播,Android App 应用内多语言切换
App用户根据自己的语言喜好,设置app语言.语言设置只针对本app,并在下次启动应用时保留前一次启动设置. 切换语言代码: sharePreferences存入设置语言: Sharencesshar ...
IOS APP软件多国语言切换,国际化app
转自:http://www.lanrenios.com/tutorials/advanced/2013/0406/1033.html App Store 中很多流行的应用程序有多种语言版本.虽然这些应 ...

uni-app项目使用多语言切换功能

uni-app项目使用多语言切换功能相关推荐

最新文章

热门文章