参考

ccccuni-app官网

添加文件夹及路径

index.js

// 国际化 json 文件，文件内容详见下面的示例
import en from './en.json'
import zhHans from './zh-Hans.json' // 中文简体
import zhHant from './zh-Hant.json' // 中文繁体export default {en,'zh-Hans': zhHans,'zh-Hant': zhHant,
}

main.js

// 增加的内容
// 国际化
import messages from './locale/index'
import {getLang} from "./utils/lang";let i18nConfig = {locale: getLang(),messages
}import VueI18n from 'vue-i18n'Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)const app = new Vue({i18n,store,...App
});

动态切换语言

lang.vue

<template><view class="body"><!-- <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item> --><u-cell-item title="English" :arrow="false" @click="changeLang('en')"><u-icon slot="right-icon" size="32" name="checkmark" v-if="isEn"></u-icon></u-cell-item><u-cell-item title="中文" :arrow="false" @click="changeLang('zh-Hans')"><u-icon slot="right-icon" size="32" name="checkmark" v-if="isZh"></u-icon></u-cell-item></view>
</template><script>
import {getLang, setLang} from "@/utils/lang.js";export default {data() {return {isEn: false,isZh: false};},onLoad() {console.log(getLang())let lang=getLang()this.updateLang(lang)},methods: {updateLang(srcLang){if(srcLang == "zh-Hans"){this.isEn=falsethis.isZh=true}else if(srcLang == "en"){this.isEn=truethis.isZh=false}},changeLang(srcLange){setLang(srcLange)console.log("change language:" + srcLange)this.updateLang(srcLange)}}}
</script><style lang="scss" scoped></style>

使用

vue 页面

 import {initVueI18n} from '@dcloudio/uni-i18n'import messages from '../../locale/index';const { t } = initVueI18n(messages)

#vue页面里{{$t('index.title')}}#page页面"navigationBarTitleText": "%index.language%",#page页面,标签<>
<u-input v-model="content" type="textarea" height="250" auto-height :placeholder="$t('wit.publish_tip')"/>// 1. vue组件模板的使用
<div>{{$t('message.zh')}}</div>// 2. vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"/>// 3.vue组件data中赋值的使用
data:{msg:this.$t('message.zh');
}// 4.在js代码里使用
this.$t('message.zh')<text class="group-join-btn">{{group.is_join?($t('group.quit')):($t('group.join'))}}</text>

注意vue里的冒号，<input :placeholder="$t('message.zh')"/>，加了冒号后才能正确显示，原因：

加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！

例子：

<el-radio-group v-model="handle">

<el-radio :label="true">打开</el-radio>

<el-radio :label="false">关闭</el-radio>

</el-radio-group>

输出：true 或 false 值是Boolean类型

-----

<el-radio-group v-model="handle">

<el-radio label="true">打开</el-radio>

<el-radio label="false">关闭</el-radio>

</el-radio-group>

输出：”true" 或 “false” 值是String类型

nvue页面

nvue 页面引用i18n_Dai_代代的博客-CSDN博客

在app.vue里面

globalData: {$t: ''},
onLaunch(){this.globalData.$t = val => {return this.$t(val);};
},

在nvue页面使用

<view>{{ $t('conn.phone') }}</view>#在script
let app = getApp().globalData;methods:{$t(text) {return app.$t(text);},
}#nvue正文
{{$t('tab.friend')}

uni-app 国际化相关推荐

IOS APP 国际化程序内切换语言实现不重新启动系统（支持项目中stroyboard 、xib 混用。完美解决方案）
IOS APP 国际化程序内切换语言实现不重新启动系统(支持项目中stroyboard .xib 混用.完美解决方案) 参考文章: (1)IOS APP 国际化程序内切换语言实现不重新启动系统 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
IOS APP 国际化（实现不跟随系统语言，不用重启应用,代码切换stroyboard ,xib ,图片，其他资源）...
此问题已解决.请看: IOS APP 国际化程序内切换语言实现不重新启动系统(完美解决方案) 接了个变态的需求,要在程序内切换程序语言实现国际化. 可以先看看这个,比较详细. http://blo ...
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这款.其实有些框架我是有 ...
关于Android app 国际化中英文翻译的细节处理
导语: 最近一个项目上有要求完成app国际化,也就是如果系统语言是英文,那么你的app打开时就会自动读取string 中的字符串资源,自动完成匹配,以满足国际化需求,那么我们就按照步骤走,完成我们的a ...

uni-app 国际化

使用

nvue页面

uni-app 国际化相关推荐

最新文章

热门文章