【微信小程序】实现中英文切换

1、组织语言资源

创建两个文件夹，分别用于存放中文和英文的语言资源。例如，可以在 utils 文件夹下创建 lang 文件夹，然后在其中创建 zh.js 和 en.js 文件，分别存放中文和英文的文本内容。

zh.js:

javascript 复制代码

const zh = {
  home: {
    title: '这里是首页',
  },
};

module.exports = zh;

en.js:

javascript 复制代码

const en = {
  home: {
    title: 'Here is the home page',
  },
};

module.exports = en;

2、创建语言切换逻辑

在 app.js 文件中，设置默认语言并提供切换语言的功能。

javascript 复制代码

// app.js
App({
  globalData: {
    language: 'zh', // 默认语言
    translations: require('./utils/lang/zh') // 默认加载中文语言包
  },

  onLaunch: function () {
    // 从缓存中获取用户选择的语言
    const language = wx.getStorageSync('language') || 'zh';
    this.setLanguage(language);
  },

  setLanguage: function (lang) {
    this.globalData.language = lang;
    if (lang === 'en') {
      this.globalData.translations = require('./utils/lang/en');
    } else {
      this.globalData.translations = require('./utils/lang/zh');
    }
    wx.setStorageSync('language', lang);
  }
});

3、使用语言资源

① 在页面中使用

javascript 复制代码

Page({
  data: {
    translations: {}
  },

  onShow: function () {
    const app = getApp();
    this.setData({
      translations: app.globalData.translations
    });
  },

  switchLanguage: function () {
    const app = getApp();
    const newLang = app.globalData.language === 'zh' ? 'en' : 'zh';
    app.setLanguage(newLang);
    this.setData({
      translations: app.globalData.translations
    });
  }
});

html 复制代码

<view>
  <text>{{translations.home.title}}</text>
  <button bindtap="switchLanguage">切换语言</button>
</view>

② 导航栏修改

把页面导航栏信息放到语言文件中：

javascript 复制代码

// zh.js
nav: {
    home: '首页',
    myInfo: '我的',
    func: '功能'
},
// en.js
nav: {
  home: 'home',
  myInfo: 'myInfo',
  func: 'function'
},

javascript 复制代码

 onShow: function () {
    const app = getApp();
    wx.setNavigationBarTitle({
      title: translations.nav.home
    });
 }

③ 底部栏修改

使用自定义 tabbar

可参考微信小程序自定义tabbar

custom-tab-bar文件中：

index.js:

javascript 复制代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    list: [
      {
        pagePath: "/pages/index/index",
        text: "首页",
        iconPath: "/public/image/icon_home2.png",
        selectedIconPath: "/public/image/icon_home1.png"
      },
      {
        pagePath: "/pages/apply/apply",
        text: "功能",
        iconPath: "/public/image/icon_app2.png",
        selectedIconPath: "/public/image/icon_app1.png"
      },
      {
        pagePath: "/pages/myInfo/myInfo",
        text: "我的",
        iconPath: "/public/image/icon_set2.png",
        selectedIconPath: "/public/image/icon_set1.png"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
    },
  }
})

index.json:

json 复制代码

{
  "component": true,
  "usingComponents": {}
}

index.wxml:

html 复制代码

<view class="tabBar">
  <view class="cont">
    <view wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="item {{selected === index ? 'on' : 'off'}}">
      <image class="cont_img" src="{{selected === index  ? item.selectedIconPath : item.iconPath}}"></image>
      <view>{{item.text}}</view>
    </view>
  </view>
</view>

index.wxss:

css 复制代码

.tabBar {
  z-index: 100;
  width: 100%;
  position: fixed;
  bottom: 0;
  font-size: 28rpx;
  border-radius: 50rpx 50rpx 0 0;
  color: #636363;
  box-sizing: border-box;
  overflow: hidden;
}
.bgcW {
  background-color: #fff;
}
.bgcNone {
  background-color: #fff0;
}

.cont {
  height: 150rpx;
  margin: 0 auto;
  border-radius: 40rpx 0;
  overflow: hidden;
  display: flex;
  background-color: #fff;
  padding-bottom: 40rpx;
}

.cont .item {
  font-size: 24rpx;
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0;
  display: block;
  height: 100%;
}
.cont .cont_img {
  width: 40rpx;
  height: 40rpx;
  margin: 40rpx 0 0;
}

.off {
  color: #a0a0a0;
}
.on {
  color: #363636;
}

做中英文切换时，需要把 tabbar 的信息放到语言文件中：

javascript 复制代码

// zh.js
list: [{
      pagePath: "/pages/index/index",
      text: "首页",
      iconPath: "/public/image/icon_home2.png",
      selectedIconPath: "/public/image/icon_home1.png"
    },
    {
      pagePath: "/pages/apply/apply",
      text: "功能",
      iconPath: "/public/image/icon_app2.png",
      selectedIconPath: "/public/image/icon_app1.png"
    },
    {
      pagePath: "/pages/myInfo/myInfo",
      text: "我的",
      iconPath: "/public/image/icon_set2.png",
      selectedIconPath: "/public/image/icon_set1.png"
    }
  ]
// en.js
list: [{
      pagePath: "/pages/index/index",
      text: "Index",
      iconPath: "/public/image/icon_home2.png",
      selectedIconPath: "/public/image/icon_home1.png"
    },
    {
      pagePath: "/pages/apply/apply",
      text: "Function",
      iconPath: "/public/image/icon_app2.png",
      selectedIconPath: "/public/image/icon_app1.png"
    },
    {
      pagePath: "/pages/myInfo/myInfo",
      text: "MyInfo",
      iconPath: "/public/image/icon_set2.png",
      selectedIconPath: "/public/image/icon_set1.png"
    }
  ]

在 tabbar 有关的页面中：

javascript 复制代码

onShow() {
  const app = getApp();
  const translations = app.globalData.translations;
   if (typeof this.getTabBar === 'function' && this.getTabBar()) {
     this.getTabBar().setData({
       list: translations.list
     });
  }
}