uniapp国际化 页面双语/顶部导航双语/根据系统语言双语

uniapp在移动开发中越来越火热,今天刚好开发了项目的国际化,期间查资料遇到了一些坑,所以我把我开发的实例完整的写一遍,希望对大家有所帮助。

一 、安装依赖包

在uniapp项目目录下安装i18n

npm install vue-i18n --save
二、main.js中引入

在main.js中引入i18n

import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n';
import Messages from './pages/api/language.js'
Vue.use(VueI18n);
Vue.config.productionTip = false;
const i18n = new VueI18n({  
  locale: 'zh-CN',  //zh-CN en-US
  messages:Messages  //language中的语言包
})  
Vue.prototype._i18n = i18n;
App.mpType = 'app'
const app = new Vue({
	i18n,
	...App
})
app.$mount()
二、language.js
export default {
	'zh-CN':{
		cpfw:'产品服务',
		fwcx:'防伪查询',
		qsrsym:'请输入溯源码或点击右侧图标扫码(必填)',
		qsrfwm:'请输入防伪码或点击右侧图标扫码',
		query:'查询',
		zxkf:'在线客服',
		cpxx:'产品选型',
		cszx:'参数咨询',
		azzx:'安装咨询',
		shfw:'售后服务',
	},
	'en-US':{
		cpfw:'Product service',
		fwcx:'Anti-counterfeiting query',
		qsrsym:'Please enter the source code or click the icon on the right to scan the code (required).',
		qsrfwm:'Please enter the source code or click the icon on the right to scan the code.',
		query:'Inquire',
		zxkf:'Online service',
		cpxx:'Product model',
		cszx:'Parameter consultation',
		azzx:'Installation consultation',
		shfw:'After-sales service',
		swzh:'Business support',
	}
}

三、在homepage.vue主页面使用

1、js中使用

{
	url: '../../static/1_01.png',
	text:this.$t('cpfw'),  //取值
}

2、在html中使用

<text class="text">{{$t('fwcx')}}</text>   

<uni-section  :title= "$t('fwcx')" class='bg-color' type="line"></uni-section>

<input class="uni-input" v-model="fangweiCode" focus :placeholder="$t('qsrfwm')" />

说明:在子页面中的html使用也是一样的,子页面js中$t(‘fwcx’)无效,引用应该是要用vue的mixin了吧

四、顶部导航双语

1、在主页面中顶部导航

uni.setNavigationBarTitle({
	title:$t('fwcx')
})

2、子页面顶部导航
由于项目中子页面数据展示采用双语数据库,所以子页面需要展示的字段并不多,前边说过了,子页面html可以正常使用$t(‘abc’)来取值,够用了,顶部导航采用了页面跳转url传值
从主页面把子页面的title传入子页面,在onload中拿到之后,用uni.setNavigationBarTitle 赋值也是可以的~
主页面跳转传值:

if(e == '/pages/web-view/tmsm'){
	const append = '?title='+this.$t('cszx');
		e = e + append;
}
 uni.navigateTo({
   	url:  e
   })

子页面取值,并赋值顶部导航:
在这里插入图片描述

五、根据系统语言双语

在app.vue的onLaunch中,用uni.getSystemInfoSync()获取系统语言。
在这里插入图片描述
来吧,展示~
在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
北京科技大学的数据库系统原理B实验是一门重要的实践课程,旨在帮助学生理解数据库系统的基本原理和操作。 该实验的主要内容包括以下几个方面: 1. 数据库设计与创建:学生将学习如何根据特定需求设计数据库结构,并使用SQL语句创建相应的数据库。 2. 数据查询与修改:学生将学习如何使用SQL语句进行数据库查询和修改操作,包括条件查询、连接查询、聚合查询等。 3. 事务管理:学生将学习事务的基本概念和原子性、一致性、隔离性、持久性(ACID)的要求,以及如何使用SQL语句进行事务管理。 4. 数据库索引和性能优化:学生将学习索引的概念和作用,掌握常见的索引类型和创建方法,并了解如何通过优化查询语句和数据库设计来提高性能。 在实验过程中,学生需要使用数据库管理系统(DBMS)来进行实验操作。常见的DBMS包括MySQL、Oracle、SQL Server等,学校会提供相应的实验环境和教学资料。 通过参与实验,学生能够加深对数据库系统原理的理解,培养数据库设计和管理的能力,为日后的研究和工作打下坚实的基础。此外,实验还可以培养学生的团队合作、问题解决和实践能力,提高他们的综合素质。 总之,北京科技大学数据库系统原理B实验在培养学生的数据库技能和综合能力方面起到了重要的作用,并为他们未来的学习和职业发展打下了坚实的基础。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值