一、在 utils 文件夹中新建两个语言包基础库 js 文件
1、Chinese.js
//中文语言包
var Chinese = {
content:"你好世界",
information:"信息页面",
community:"社区页面",
mine:"我的页面",
button:"change to English",
}
//模块化
module.exports = {
content: Chinese,
}
2、English.js
//英文语言包
var English = {
content: "Hello World",
information:"Information page",
community:"Community page",
mine:"Mine page",
button: "修改为中文",
}
//模块化
module.exports = {
content: English
}
二、在全局文件 app.js 中添加全局语言状态(默认设置为中文)
globalData: {
globalLanguage: '中文'
}
三、在需要语言切换的 js 文件中使用
1、引入
const app = getApp()
let chinese = require("../../utils/Chinese")
let english = require("../../utils/English")
2、切换代码
data: {
// 当前语言
language: app.globalData.globalLanguage,
// 页面中展示的文字
content:''
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
let lastLanuage = this.data.language;
// 初始化语言
this.getContent(lastLanuage);
},
/**
* 语言切换
*/
changeLanuage: function () {
let version = this.data.language;
if (version == "中文") {
this.setData({
language: "英文"
})
} else {
this.setData({
language: "中文"
})
}
let lastLanuage = this.data.language;
// 调用语言切换函数
this.getContent(lastLanuage);
},
/**
* 语言切换
*/
getContent: function (lastLanuage) {
let zh = ['首页', '信息', '社区', '我的']
let en = ['HOME', 'INFORMATION', 'COMMUNITY', 'MY ACCOUNT']
if (lastLanuage == "中文") {
this.setData({
content: chinese.content
})
// 修改全局语言状态
app.globalData.globalLanguage = '中文'
// 底部 tabbar 动态切换语言
zh.forEach((item, idx) => {
wx.setTabBarItem({
index: idx,
text: item,
})
})
} else {
this.setData({
content: english.content
})
app.globalData.globalLanguage = '英文'
en.forEach((item, idx) => {
wx.setTabBarItem({
index: idx,
text: item,
})
})
}
},
四、Vant Weapp + 中英文切换完整项目下载
下载地址:https://wwpc.lanzouf.com/iTVeG0res21i
密码:0926