当前位置：首页 > news >正文

微信小程序中英文切换miniprogram-i18n-plus

news 2025/7/27 7:34:48

原生微信小程序使用 miniprogram-i18n-plus

第一步：

npm install miniprogram-i18n-plus -S

安装完成后，会在项目文件文件夹 node_modules文件里生成 miniprogram-i18n-plus， 然后在工具栏-工具-构建npm，然后看到miniprogram_npm里面有一个miniprogram-i18n-plus

第二步：

在app.js文件中设置进入小程序判断有无存储在storage 的语言，没有的话就获取系统当前语言是什么语言，有就拿已存储设置得语言

import storage from './utils/storage';   // 自定义得缓存文件
import setLanguage from "./i18n/index";  // 引入得 miniprogram-i18n-plus 处理得文件
let language = "en_US"; // zh_CN en_US   // 默认得语言
App({onLaunch() {// 判断有无存储在storage 的语言，没有的话就获取系统当前语言是什么语言，有就拿已存储的if(storage.get('language')) {language = storage.get('language')} else {wx.getSystemInfo({success:(res)=> {if(res.language === 'en') {language = 'en_US'}else {language = 'zh_CN'}storage.set('language', language)}})}setLanguage.setLanguage();},globalData: {statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],}
})

在文件中创建一个i18n文件夹，里面创建index.js文件和中文语言文件zh.js和英文文件en.js,

index.js文件代码

import i18nInstance from "../miniprogram_npm/miniprogram-i18n-plus/index";  //引入得插件
import storage from '../utils/storage';  // 缓存文件
import en_US from './en';                // 英文文件
import zh_CN from './zh';                // 中文文件
function setLanguage () {const locales = {...zh_CN,...en_US};// 更改语言let language= storage.get('language')  // 语言缓存i18nInstance.setLocale(language);        i18nInstance.loadTranslations(locales);
}
module.exports = {setLanguage: setLanguage
}

en.js 文件

const languageMap = {"title": 'Must-Read for Beginners ',"tips": 'Hot Topic ',
}
module.exports = {en_US: languageMap
}

zh.js 文件

const languageMap = {title: '新手必读',tips: '热门话题',
}
module.exports = {zh_CN: languageMap
}

第三步：

在文件中使用需要引入 miniprogram-i18n-plus 在data 中定义

i18n: i18nInstance.getLanguage()

import { i18nInstance } from "../../miniprogram_npm/miniprogram-i18n-plus/index";Page({data: {i18n: i18nInstance.getLanguage()}
})

也可以使用官网得方法在onLoad 函数中设置

Page({data: {language: {},},onLoad() {i18nInstance.effect({context: this,callback: this.setLanguage,});},setLanguage() {this.setData({language: i18nInstance.getLanguage(),});},
});