柚子快報(bào)邀請(qǐng)碼778899分享：實(shí)現(xiàn)微信小程序的多語言切換
柚子快報(bào)邀請(qǐng)碼778899分享：實(shí)現(xiàn)微信小程序的多語言切換
使用小程序開發(fā)框架提供的國際化插件：一些小程序開發(fā)框架提供了國際化插件，開發(fā)者可以通過配置文件來實(shí)現(xiàn)多語言支持。例如，使用微信小程序的 i18n 插件可以在不同語言環(huán)境下加載不同的語言資源文件。
實(shí)現(xiàn)代碼：
項(xiàng)目根目錄新建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
}
項(xiàng)目根目錄新建utils目錄，在該目錄下新建language.js
language.js
function getLanguage() {
// 獲取本次存儲(chǔ)的語言版本，默認(rèn)中文
return wx.getStorageSync('language') || 'zh'
}
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ù)
}
項(xiàng)目根目錄新建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: _('日文')
}
]
})
// 觸發(fā)頁面刷新，否則當(dāng)前頁語言版本無法更新
this.triggerEvent('refleshevent')
}
}
})
switchLanguage.json
{
}
switchLanguage.wxml
{{array[index].name}}
switchLanguage.wxss
.switch-language-box{
top: 10px;
right: 10px;
margin-bottom: 10px;
background-color: rgb(240, 229, 229);
width: 80px;
border-radius: 5px;
}
首頁應(yīng)用頁面對(duì)應(yīng)修改：
index.json
{
"usingComponents": {
"switchLanguage": "/components/switchLanguage/switchLanguage"
}
}
index.wxml
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()
})
}
})
效果展示：
柚子快報(bào)邀請(qǐng)碼778899分享：實(shí)現(xiàn)微信小程序的多語言切換
好文閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
PassFeed出海社交圈
