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

一、在 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值