微信小程序实现多语言方案

2024-07-16 02:13| 来源: 网络整理| 查看: 265

不管哪个系统，多语言方案套路都是一样的

1、建立多语言映射库 2、记录并存储用户选择的语言版本，下次进入直接进入对应语言版本 3、根据用户设置动态加载语言版本 4、前台调用

效果图 🐤

小程序代码片段（建议看代码片段，文章相对于啰嗦点）

https://developers.weixin.qq.com/s/ByeaUSmE71Gg 目录结构

在这里插入图片描述

上代码 🐤 🐤 项目根目录新建i18n目录，在该目录下存放不同版本的语言库 🐤

zh_CN.js

const languageMap = { 简体中文: '简体中文', 繁体中文: '繁体中文', 英文: '英文', 多语言: '多语言', 设备状态可视图: '设备状态可视图', 当前班次: '当前班次', 近一周: '近一周', 近一月: '近一月', 近三月: '近三月', } module.exports = { languageMap: languageMap }

en.js

const languageMap = { 简体中文: 'Simplified Chinese', 繁体中文: 'Traditional Chinese', 英文: 'English', 多语言: 'multi language', 设备状态可视图: 'equipment status chart', 当前班次: 'current class', 近一周: 'last week', 近一月: 'last month', 近三月: 'last three month', } module.exports = { languageMap: languageMap }

key以中文做标识，前台书写的时候可以直接写中文，对英语不好的比较方便

项目根目录新建utils目录，在该目录下新建language.js 🐤 function getLanguage() { // 获取本次存储的语言版本，默认中文 return wx.getStorageSync('language') || 'zh_CN' } function translate() { // 返回翻译对照映射表 return require('../i18n/' + getLanguage() + '.js').languageMap } function translateText(desc) { // 翻译 return translate()[desc] || desc } module.exports = { getLanguage: getLanguage, _t: translate, // JSON映射表 _: translateText // 翻译函数 }

为什么要有translate和translateText两个方法？因为小程序wxml文件中只能使用对象，js文件中只能使用函数，无法通用

项目根目录新建components目录，在该目录新建switchLanguage目录，存放语言切换组件 🐤

wxml文件

【本文地址】

公司简介

联系我们