一、Uview国际化语言库

首先进入uview下载uview国际化基础模板（或者自己安装配置）教程

二、本地内容国际化方案

在zh.js和en.js里头写文字字典

export default {// 登录界面的中文login:{title_1:"登录标题",title_2:"登录副标题",inputAdmin:"请输入账号",inputPassword:"请输入密码",changeLang:"切换语言",forgetPassword:"忘记密码"}
}

然后在页面中的应用如下

<u-input v-model="value" :placeholder="$t('login.inputPassword')"/>
<view class="lang" >{{$t('login.changeLang')}}</view>通过cpmputed可以将其注册为页内数据
computed: {login() {return this.$t('login')},
}

三、后台内容国际化方案

基本的思路就是在可以进行切换语言的页面进行一次全局lang的存储，然后再封装api的时候去请求lang的定义发送给后台，后台根据数据进行判定

全局缓存读取

// 根据lang语言进行修改语言请求var lang = 'zh-CN';uni.getStorage({key: 'lang',success: function(res) {console.log(res.data)lang = res.data}});

头部判断

header: {"Authorization": 'Bearer' + token,"Accept-Language": lang,},

切换实例

/*** @description: 切换语言*/switchLang() {this.$i18n.locale = this.$i18n.locale == 'en' ? 'cn' : 'en';const newlang = this.lang == 'en-US' ? 'zh-CN' : 'en-US';// 全局存储语言uni.setStorageSync('lang', newlang);},

接下来在请求的时候后端就该根据我们的请求头进行数据类型的判断并返回

uni-app 国际化开发相关推荐

关于uni.app蓝牙开发问题汇总
1.onBLECharacteristicValueChange 数据返回两次相同数据 2.7以前的版本有此BUG ,更新至2.9.8即可
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
Android App 国际化详解
前言 internationalization (国际化)简称 i18n,因为在i和n之间还有18个字符,localization(本地化),简称L10n.一般用语言_地区的形式表示一种语言,如zh_ ...
App 软件开发《填空1》试卷及答案
App 软件开发<填空1>试卷及答案文章目录 App 软件开发<填空1>试卷及答案填空题(共计0分) 1．[`Native App`]是指本地应用程序,又称之为原生App ...
uniapp开发App从开发到上架全过程(三)-上架
当我们的APP开发完毕,最终交付的时候,必然要经历的一个环节,就是APP上架,国内APP上架一般为IOS端appstore上架,安卓端应用商店比较多,最常见的应用商店有华为应用商店.小米应用商店.OP ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...

uni-app 国际化开发

文章目录

一、Uview国际化语言库

二、本地内容国际化方案

三、后台内容国际化方案

uni-app 国际化开发相关推荐

最新文章

热门文章