uniapp 国际化

安装vue-i18n

npm install vue-i18n --save

main.js 加上以下配置

import VueI18n from 'vue-i18n'
import messages from './util/lang.js'
Vue.use(VueI18n)  const i18n = new VueI18n({locale: 'zh-CN',messages
})Vue.prototype._i18n = i18n  const app = new Vue({i18n,...App
})

App.vue 在onLaunch方法中加

获取设备信息 uni.getSystemInfoSync()
底部导航栏设置 setTabBarItem

            let lang = 'zh'try {const res = uni.getSystemInfoSync();lang = res.language} catch (e) {}if (lang.indexOf('en') !== -1) {this._i18n.locale = 'en-US'}if (lang.indexOf('zh') !== -1) {this._i18n.locale = 'zh-CN'}uni.setTabBarItem({index: 0,text: this.$t('home')})uni.setTabBarItem({index: 1,text: this.$t('product')})uni.setTabBarItem({index: 2,text: this.$t('statistics')})uni.setTabBarItem({index: 3,text: this.$t('my')})

lang.js

export default {'zh-CN': {lang: 'zh',home: '首页',product: '商品',statistics: '统计',my: '我的',loading: '正在加载...',productList: '商品列表',productAdd: '添加商品',defaultOrder: '默认排序',defaultAscOrder: '默认正序',defaultDescrder: '默认倒序',},'en-US': {lang: 'en',home: 'home',product: 'product',statistics: 'statistics',my: 'my',loading: 'loading...',productList: 'ProductList',productAdd: 'ProductAdd',defaultOrder: 'DefaultOrder',defaultAscOrder: 'DefaultAscOrder',defaultDescOrder: 'DefaultDescOrder',},
}

uniapp 国际化相关推荐

移动端 uniapp 国际化一站式解决方案
菜单.表单.tabbar+顶部文字均实现国际化,语言种类一次设置,全局生效,支持几十种,也支持私人定制. 文章目录一.效果图+开源项目 1. 默认中文 2. 切换English 3. 切换韩语 4. ...
uni-app 国际化
参考 ccccuni-app官网添加文件夹及路径 index.js // 国际化 json 文件,文件内容详见下面的示例 import en from './en.json' import zhHa ...
uni-app 国际化开发
在实际开发中当碰到需要采用国际化的语言切换形式开发的时候,采取以下情况完成文章目录一.Uview国际化语言库二.本地内容国际化方案三.后台内容国际化方案一.Uview国际化语言库首先进入u ...
【国际化】vue2+uniapp实现国际化
文章目录前言一.什么是国际化? 二.使用步骤 1.创建locale文件夹 2.创建国际化JSON文件 3.引入国际化总结前言国际化其实是拓展你的应用的受众人群的一种方式,有利于你的项目应用范 ...
uniapp中picker及默认组件改国际化
因为是二开uniapp的项目,我不想去封装组件,去一个一个修改直接进入主题:(目前发现这种方法在h5.app端有效,微信小程序好像是根据系统默认语言,暂时没发现怎么修改,有人知道请告诉我,谢谢!!) ...
uni-app使用vue-i18n实现国际化(中英文切换)
uni-app使用vue-i18n实现国际化(中英文切换) 1.导入vue-i18n(npm install vue-i18n) 2.创建common文件夹 --> lang.js export ...
vue/uniapp实现语言国际化（中英文切换）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.vue-i18n是什么? 二.使用步骤 1.安装vue-i18n 2.新建文件夹 3.在main.js 中引入 4.在页 ...
uniapp基础篇 - - 实现APP语言国际化
文章目录一.今日实战目标二.实战步骤 1. 引入库 2. 创建相关文件文件源代码 3. 编辑main.js文件 4. 在页面中使用 5. 切换语言的方法总结提示:该项目只用于个人实战,不应用 ...
uni-app 多语言，国际化
问题描述:因为做到项目有海外用户所以需要配置多语言满足客户需求. 解决方法:在uni-app里有内置i18n多语言的配置,并且uni-app里的组件可是可以支持跟随设置语言进行变换的,i18n的主要功 ...

uniapp 国际化

uniapp 国际化相关推荐

最新文章

热门文章