原生微信小程序实现中英文切换（内涵Vant Weapp+语言切换完整项目）

renlmingj

2024 年 06 月 14 日

170 次浏览

暂无评论

2165字数

微信小程序

##### 一、在 utils 文件夹中新建两个语言包基础库 js 文件

###### 1、Chinese.js

```js
//中文语言包
var Chinese = {
  content:"你好世界",
  information:"信息页面",
  community:"社区页面",
  mine:"我的页面",
  button:"change to English",
}

//模块化
module.exports = {
  content: Chinese,
}
```

###### 2、English.js

```js
//英文语言包
var English = {
  content: "Hello World",
  information:"Information page",
  community:"Community page",
  mine:"Mine page",
  button: "修改为中文",
}

//模块化
module.exports = {
  content: English
}
```

##### 二、在全局文件 app.js 中添加全局语言状态（默认设置为中文）

```js
globalData: {
  globalLanguage: '中文'
}
```

##### 三、在需要语言切换的 js 文件中使用

###### 1、引入

```js
const app = getApp()
let chinese = require("../../utils/Chinese")
let english = require("../../utils/English")
```

###### 2、切换代码

```js
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

最后修改：2024 年 06 月 14 日