已经重新优化代码做成了组件,需要可自取:https://github.com/CrystalCAI11/wechat-language-compoment
所有操作都打包在组件里不需要在额外的地方添加代码,直接在你需要的页面里导入组件,再在对应页面的onLoad()里set文本就行了。
onLoad() {
this.setData({
content: wx.getStorageSync('content')
})
}
第一步,找个地方新建中英文两个字典,我是放在utils下面
字典内容如下en.js
let en = {
text1: 'text1',
text2: 'text2',
text3:'text3',
text4:'text4',
}
module.exports = {
content: en
}
zh.js
let zh = {
text1: '文本1',
text2: '文本2',
text3:'文本3',
text4:'文本4',
}
module.exports = {
content: zh
}
第二步,把切换语言的两个函数放在app.js里
import zh from '/utils/zh'
import en from '/utils/en'//导入两个字典
App({
globalData: {
language: wx.getStorageSync('language')
},
onLaunch() {
this.updateContent()//每次启动小程序都重新获取所选语言的文本
},
updateContent() {
let lastLanguage = wx.getStorageSync('language')//获取当前语言
if (lastLanguage == 'en') {
this.globalData.content = en.content//根据当前系统语言获取对应文本
wx.setStorageSync('language', 'en')//把当前语言保存在本地
} else {//中文为默认语言
this.globalData.content = zh.content
wx.setStorageSync('language', 'zh')
}
},
changeLanguage() {
let language = wx.getStorageSync('language')//获取当前语言
if (language == "zh") {
wx.setStorageSync('language', 'en')//切换语言并保存在本地
} else {
wx.setStorageSync('language', 'zh')
}
this.updateContent()//拿修改后语言获取对应文本
}
})
这里用wx.setStorageSync()方法来保存语言只是为了方便debug,你只用app.globaldata来传值也是完全没有问题的。
第三步,把切changeLanguage()方法bindtap在首页的元素里。
因为updateContent()方法放在onLaunch函数里,所以切换语言后我加了一个wx.reLaunch()重启首页,才能获取新的语言文本。
<!--index.wxml-->
<view class="container">
<view bindtap="changeLanguage">EN|中文</view>
<view>
<text>{{content.text1}}</text>
<text>{{content.text2}}</text>
</view>
<view bindtap="toPage2">{{content.toPage2}}</view>
</view>
index.js
changeLanguage() {
app.changeLanguage()
wx.reLaunch({
url: '/pages/index/index',
})
},
第四步,给所有页面的onShow()里都加上如下代码,然后别忘了把原本的文本都改成{{content.xxx}}这样的形式,就搞定啦。
onShow() {
this.setData({
content: app.globalData.content,
})
},