微信小程序实现多语言方案|中英互译

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

---

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 = 0
            switch (language) {
                case 'zh_CN':
                    index = 0
                    break
                case 'en':
                    index = 1
                    break
                default:
                    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>

效果图

知无不言 🐤

参考链接，在该链接的基础上进行的优化