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

1、组织语言资源

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

zh.js:

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

en.js:

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

2、创建语言切换逻辑

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

// 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、使用语言资源

① 在页面中使用

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});}
});

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

② 导航栏修改

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

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

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

③ 底部栏修改

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

custom-tab-bar文件中：

index.js:

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.datasetconst url = data.pathwx.switchTab({ url })},}
})

index.json:

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

index.wxml:

<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:

.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 的信息放到语言文件中：

// 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 有关的页面中：

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