uniapp的微信小程序tabar栏国际化

前言

老板要微信小程序也国际化,也就是整个英文版本,用了vuei18n,但是uni文档里找tabar栏的翻译方法没找到

解决办法

找了一会儿,uniapp提供1种办法

1. 自定义tabar栏

说是影响性能体验,不想试,看了感觉巨麻烦

我的方法

在微信文档里找到了个api,直接可以动态设置

那我们在代码里先判断语言环境,然后设置就行了

代码如下

js 复制代码
		setTitle() {
				if (this.$i18n.locale === 'en') {
					uni.setNavigationBarTitle({
						title: 'Home page'
					});
					wx.setTabBarItem({
						index: 0,
						text: 'Home',
					})
					wx.setTabBarItem({
						index: 1,
						text: 'ShipTime',
					})
					wx.setTabBarItem({
						index: 2,
						text: 'Boats',
					})
					wx.setTabBarItem({
						index: 3,
						text: 'Mine',
					})
				}

			},

setNavigationBarTitle设置小程序最顶部的翻译,setTabBarItem设置tabar栏,完美解决!

相关推荐
elseif1233 分钟前
【Markdown】指南(上)
linux·开发语言·前端·javascript·c++·笔记
钛态14 分钟前
Flutter for OpenHarmony:shelf_web_socket 快速构建 WebSocket 服务端,实现端到端实时通信(WebSocket 服务器) 深度解析与鸿蒙适配指南
服务器·前端·websocket·flutter·华为·性能优化·harmonyos
紫_龙16 分钟前
最新版vue3+TypeScript开发入门到实战教程之组件通信之二
前端·javascript·typescript
英俊潇洒美少年22 分钟前
Vue3 响应式 + 编译优化 + Diff 三者如何配合工作
前端
英俊潇洒美少年22 分钟前
Vue3 完整渲染流程(从 createApp → mount → update → unmount)
前端·javascript·vue.js
前端Hardy28 分钟前
Pinia 比 Vuex 好用 10 倍?Vue3 状态管理终于不折磨人了!(新手复制即用)
前端·javascript·vue.js
前端Hardy35 分钟前
Vue3 的 v-model 双向绑定,90% 的人都用错了?(附 2026 最新避坑指南)
前端·javascript·vue.js
前端Hardy36 分钟前
救命!Vue3 的 Composition API,居然能让我少写 80% 冗余代码?(新手也能直接抄)
前端·javascript·vue.js
李剑一38 分钟前
前端必懂!一文搞懂 WebAssembly:Web/Electron/RN 全通用,你天天用的软件,底层都靠它
前端·webassembly
Definition1 小时前
Claude Code 能养宠物了,体验下抽卡的感觉
前端·程序员