不管哪個(gè)系統(tǒng)，多語言方案套路都是一樣的

---

1、建立多語言映射庫
2、記錄并存儲(chǔ)用戶選擇的語言版本，下次進(jìn)入直接進(jìn)入對(duì)應(yīng)語言版本
3、根據(jù)用戶設(shè)置動(dòng)態(tài)加載語言版本
4、前臺(tái)調(diào)用

效果圖 🐤

小程序代碼片段（建議看代碼片段，文章相對(duì)于啰嗦點(diǎn)）

https://developers.weixin.qq.com/s/ByeaUSmE71Gg

目錄結(jié)構(gòu)

上代碼 🐤 🐤

項(xiàng)目根目錄新建i18n目錄，在該目錄下存放不同版本的語言庫 🐤

zh_CN.js

const languageMap = {簡體中文: '簡體中文',繁體中文: '繁體中文',英文: '英文',多語言: '多語言',設(shè)備狀態(tài)可視圖: '設(shè)備狀態(tài)可視圖',當(dāng)前班次: '當(dāng)前班次',近一周: '近一周',近一月: '近一月',近三月: '近三月', } module.exports = {languageMap: languageMap }

en.js

const languageMap = {簡體中文: 'Simplified Chinese',繁體中文: 'Traditional Chinese',英文: 'English',多語言: 'multi language',設(shè)備狀態(tài)可視圖: 'equipment status chart',當(dāng)前班次: 'current class',近一周: 'last week',近一月: 'last month',近三月: 'last three month', }module.exports = {languageMap: languageMap }

key以中文做標(biāo)識(shí)，前臺(tái)書寫的時(shí)候可以直接寫中文，對(duì)英語不好的比較方便

項(xiàng)目根目錄新建utils目錄，在該目錄下新建language.js 🐤

function getLanguage() {// 獲取本次存儲(chǔ)的語言版本，默認(rèn)中文return wx.getStorageSync('language') || 'zh_CN' } function translate() {// 返回翻譯對(duì)照映射表return require('../i18n/' + getLanguage() + '.js').languageMap } function translateText(desc) {// 翻譯return translate()[desc] || desc }module.exports = {getLanguage: getLanguage,_t: translate, // JSON映射表_: translateText // 翻譯函數(shù) }

為什么要有translate和translateText兩個(gè)方法？
因?yàn)樾〕绦騱xml文件中只能使用對(duì)象，js文件中只能使用函數(shù)，無法通用

項(xiàng)目根目錄新建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: _('英文')}]})// 觸發(fā)頁面刷新，否則當(dāng)前頁語言版本無法更新this.triggerEvent('refleshevent')}} })

wxss文件可以自己定義

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

應(yīng)用 🐤

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: _('設(shè)備狀態(tài)可視圖')})},reflesh() {this.onLoad()},mixinFn() {this.setData({_t: base._t()})} })

前臺(tái)頁面使用

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

效果圖

知無不言 🐤

參考鏈接，在該鏈接的基礎(chǔ)上進(jìn)行的優(yōu)化

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。