uni-app小程序切换语言版本代码

最新推荐文章于 2025-07-17 17:24:47 发布

原创最新推荐文章于 2025-07-17 17:24:47 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序 #uni-app

本文介绍了如何在微信小程序中实现不同语言的切换，通过本地存储存储语言状态，并提供详细步骤创建语言文件和公共JS模块，包括语言包的管理与页面内容的翻译。

首先需要在小程序的本地存储中存储当前当前页面显示的是那种语言

在本地存入一个

例如: language= en_lang!English

1.在列表中新建一个语言文件用来放自己创建的语言包.语言包里放3个.js文件,用于存储中文,繁体,英文三种语言文件.

2.三个语言包里的语言文件的js内容为下显示:

中文语言包:

//中文语言包
const languageMap = {
    "顶部": "顶部",
}
module.exports = {
    languageMap: languageMap
}

英文语言包:

//英文语言包:
const languageMap = {
    "顶部":"top",
}
module.exports = {
    languageMap: languageMap
}

中文繁体语言包:

//中文繁体语言包:
const languageMap = {
    "顶部":"top",
}
module.exports = {
    languageMap: languageMap
}

3.在列表内新建一个base.js文件,用于项目中的语言切换

function getLanguage() {
	//返回缓存中的language属性
	return uni.getStorageSync('language').split('!')[0] || 'en_lang'
};

function _t() {
	//返回翻译的对照信息
	return require('language/' + getLanguage() + '.js').languageMap;
}

function translateTxt(desc) {
	//翻译	
	return _t()[desc] || '竟然没有翻译';
}
module.exports = {
	getLanguage: getLanguage,
	_t: _t,
	_: translateTxt
}

4.在公共js处理中编写不同的页面转换模式的函数封装.我这里只有三种模式的.是一种是直接文字转换,第二种数数组转换,第三种是数组元素转换

public.js封装类容代码如下:

//引入语言装换器
import base from '@/base.js';
//语言装换器封装
//value:要转换的文字
//type:装换类型,1:正常装换,2:纯数组装换,3:对象数组转换
export function languageSwitch(value, type,element) {
	if (type == 1) {
		return base._t()[value]
	} else if (type == 2) {
		let data = [];
		for (let i of value) {
			data.push(base._t()[i]);
		}
		return data;
	} else if(type == 3){
		let data = [];
		let current = null;
		for(let i of value){
			current = i;
			current[element] = base._t()[i[element]];
			data.push(current);
		}
		return data;
	}
}

5.语言转换器在页面内容中的引用代码.

h5代码:

<template>
  <view>{{lang('顶部')}}</view>
</template>

js代码:


import {languageSwitch} from '@/common/js/public.js';

export default {
		data() {
			return {
				matchList:[],//奖牌榜列表
			} 
		},
		methods: {
			lang(val){
				return languageSwitch(val,1)
			},
               }