不管哪個系統，多語言方案套路都是一樣的

---

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文件

<view class="switch-language-box"><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" range-key="name"><view class="picker">{{language}}{{array[index].name}}</view></picker> </view>

js文件

const base = require('../../utils/language.js') const _ = base._Component({data: {index: 0,language: 'zh_CN',array: [{value: 'zh_CN',name: _('簡體中文')},{value: 'en',name: _('英文')}]},lifetimes: {attached() {const language = base.getLanguage()let index = 0switch (language) {case 'zh_CN':index = 0breakcase 'en':index = 1breakdefault:break}this.setData({index: index,language: language,array: [{value: 'zh_CN',name: _('簡體中文')},{value: 'en',name: _('英文')}]})}},methods: {bindPickerChange: function (e) {this.setData({index: e.detail.value,language: this.data.array[e.detail.value].value})this.switchLanguage()},switchLanguage() {wx.setStorageSync('language', this.data.language)// 重新加載一次頁面// wx.navigateTo({// url: 'index'// })this.setData({array: [{value: 'zh_CN',name: _('簡體中文')},{value: 'en',name: _('英文')}]})// 觸發頁面刷新，否則當前頁語言版本無法更新this.triggerEvent('refleshevent')}} })

wxss文件可以自己定義

.switch-language-box{position: fixed;top: 10px;right: 10px;border: 1px solid gray; }

應用 🐤

json文件（引用語言切換組件）

"usingComponents": {"switchLanguage": "./components/switchLanguage/index"}

wxml文件

<switchLanguage bindrefleshevent="reflesh"></switchLanguage>

js文件

const base = require('../../utils/language.js') const _ = base._Page({data: {_t: ''},onLoad(option) {this.mixinFn()wx.setNavigationBarTitle({title: _('設備狀態可視圖')})},reflesh() {this.onLoad()},mixinFn() {this.setData({_t: base._t()})} })

前臺頁面使用

<switchLanguage bindrefleshevent="reflesh"></switchLanguage> <text>{{_t['多語言']}}</text> <view>{{_t['近一月']}}</view> <view>{{_t['近三月']}}</view> <view>{{_t['當前班次']}}</view>

效果圖

知無不言 🐤

參考鏈接，在該鏈接的基礎上進行的優化

總結

以上是生活随笔為你收集整理的微信小程序实现多语言方案|中英互译的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。