实现微信小程序的多语言切换

使用小程序开发框架提供的国际化插件：一些小程序开发框架提供了国际化插件，开发者可以通过配置文件来实现多语言支持。例如，使用微信小程序的 i18n 插件可以在不同语言环境下加载不同的语言资源文件。

实现代码：

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

en.js

const languageMap = {
    中文: 'Chinese',
    日文: 'Japanese',
    英文: 'English',
    title1: 'Must-Read for Beginners ',
    title2: 'Hot Topic ',
  }
  
  module.exports = {
    languageMap: languageMap
  }

ja.js

const languageMap = {
    中文: '中国語',
    日文: '日本語',
    英文: '英語',
    title1: '初心者必読',
    title2: '話題',
  }
  module.exports = {
    languageMap: languageMap
  }

zh.js

const languageMap = {
    中文: '中文',
    日文: '日文',
    英文: '英文',
    title1: '新手必读',
    title2: '热门话题',
  }
  module.exports = {
    languageMap: languageMap
  }

项目根目录新建utils目录，在该目录下新建language.js

language.js

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

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

switchLanguage.js

const base = require('../../utils/language.js')
const _ = base._

Component({
    data: {
        index: 0,
        language: 'zh',
        array: [
            {
                value: 'zh',
                name: _('中文')
            },
            {
                value: 'en',
                name: _('英文')
            },
            {
                value: 'ja',
                name: _('日文')
            }
        ]
    },
    lifetimes: {
        attached() {
            const language = base.getLanguage()
            let index = 0
            switch (language) {
                case 'zh':
                    index = 0
                    break
                case 'en':
                    index = 1
                    break
                case 'ja':
                    index = 2
                    break
                default:
                    break
            }
            this.setData({
                index: index,
                language: language,
                array: [
                    {
                        value: 'zh',
                        name: _('中文')
                    },
                    {
                        value: 'en',
                        name: _('英文')
                    },
                    {
                        value: 'ja',
                        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)
            this.setData({
                array: [
                    {
                        value: 'zh',
                        name: _('中文')
                    },
                    {
                        value: 'en',
                        name: _('英文')
                    },
                    {
                        value: 'ja',
                        name: _('日文')
                    }
                ]
            })

            // 触发页面刷新，否则当前页语言版本无法更新
            this.triggerEvent('refleshevent')
        }
    }
})

switchLanguage.json

{
}

switchLanguage.wxml

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

switchLanguage.wxss

.switch-language-box{
	top: 10px;
    right: 10px;
    margin-bottom: 10px;
    background-color: rgb(240, 229, 229);
    width: 80px;
    border-radius: 5px;
}

首页应用页面对应修改：

index.json

{

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

index.wxml

		<view class="bg-tit">
            <switchLanguage bindrefleshevent="reflesh"></switchLanguage>
			<view class="bg-tit-big">{{_t['title1']}}</view>
			<view class="bg-tit-small">{{_t['title2']}}</view>
		</view>

index.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()
        })
    }
})

效果展示：