公司中开发的项目需要使用到双语这个功能。
上一个版本开发的时候，使用的是多语言i18n这个插件，但是感觉体验一般。
配置起来也不是很方便。
在这一版开发的时候，就想换个插件，优化一下。
但是在百度上找了几个插件尝试了之后，还不如i18n的效果呢
大概想了一下，这个玩意应该也不是很费劲，我这里自定义一个双语插件吧，不，应该说自定义一个多语言插件吧
一：双自定义双语插件
1：在项目根目录下创建一个目录：language
2：在language目录下创建languageUtils.js
php
复制代码
const app = getApp(); /** * @name: 语言切换 * @author: camellia * @date: 2021-11-05 */ const languageVersion = function() { var languageVersion = wx.getStorageSync("languageVersion"); if (languageVersion == 0) { // 导入我们定义好的中文字典 var zh_lang = require('./zh_lang.js') // console.log(zh_lang) return zh_lang } else { // 导入我们定义好的英文字典 var en_lang = require('./en_lang.js') // console.log(en_lang) return en_lang } } /** * @name: 切换版本 * @author: camellia * @date: 2021-11-05 */ const changLanguage = function() { var languageVersion = wx.getStorageSync("languageVersion"); //修改前面已经定义好的，用于标识小程序的语言版本 if (languageVersion == 0) { wx.setStorage({ key: "languageVersion", data: 1, }); } else if (languageVersion == 1) { wx.setStorage({ key: "languageVersion", data: 0, }); // app.globalData.languageVersion = 0; // console.log("当前语言版本：中文",app.globalData.version) } } //抛出方法 module.exports = { 'languageVersion': languageVersion, 'changLanguage': changLanguage }
3：在language目录下创建中文语言包zh_lang.js与英文语言包en_lang.js
zh_lang.js
css
复制代码
var Languague = { // 首页 index: { score_query: "成绩查询", sign_in: "扫码签到", schedule: "日程查看", exam: "考试安排", notice: "通知公告", certificate: "证书荣誉", exchange: "预约交换", more: "更多", today_agenda: "今日日程", top_title: "Mools教学系统", more_recent_agenda: "更多近期日程", no_schedule: "今日暂无日程安排", bind: "绑定查看今日日程" }, // 底部中文版工具栏，这里是用于自定义tarbar用的 toolbarStudent: { list: [ { current: 0, pagePath: "/pages/index/index", text: "首页", iconPath: "/images/index-select.png", selectedIconPath: "/images/index-selected.png", }, { current: 1, pagePath: "/pages/student/course/course", text: "课程", iconPath: "/images/liao_select.png", selectedIconPath: "/images/liao_selected.png", }, { current: 2, pagePath: "/pages/personalCenter/index/index", text: "我的", iconPath: "/images/board-select.png", selectedIconPath: "/images/board-selected.png", }, ], }, }; module.exports = { lang: Languague }
en_lang.js
css
复制代码
var Languague = { // 首页 index: { score_query: "score query", sign_in: "sign in", schedule: "schedule", exam: "exam", notice: "notice", certificate: "certificate", exchange: "exchange", more: "more", today_agenda: "Today's agenda", top_title: "Mools teaching system", more_recent_agenda: "more recent agenda" }, //底部英文版工具栏，这里是用于自定义tarbar用的 toolbarStudent: { list: [ { current: 0, pagePath: "/pages/index/index", text: "homePage", iconPath: "/images/index-select.png", selectedIconPath: "/images/index-selected.png", }, { current: 1, pagePath: "/pages/student/course/course", text: "course", iconPath: "/images/liao_select.png", selectedIconPath: "/images/liao_selected.png", }, { current: 2, pagePath: "/pages/personalCenter/index/index", text: "myself", iconPath: "/images/board-select.png", selectedIconPath: "/images/board-selected.png", }, ], }, }; module.exports = { lang: Languague, };
二：双语插件使用
1：定义缓存
首先，我们需要在缓存中定义一个变量来存储我们当前使用的是那个语言，默认中文
这部分，我目前写在app.js中的onLaunch() 中
php
复制代码
// ============================================= // 首次进入设置语言选项 var languageVersion = wx.getStorageSync("languageVersion"); if(!languageVersion) { wx.setStorage({ key: "languageVersion", data: 0, }); }
2：基础调用
index.js
php
复制代码
// 双语字典 var languageUtils = require("../../../language/languageUtils"); /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var self = this; // 初始化语言 self.initLanguage(); }, /** * @name: 初始化语言（双语） * @author: camellia * @date: 2021-11-05 */ initLanguage() { let self = this; //获取当前小程序语言版本所对应的字典变量 let lang = languageUtils.languageVersion(); // console.log(lang.lang); // 页面显示 self.setData({ content: lang.lang, }); // 顶部标题放到这里来就行了 wx.setNavigationBarTitle({ title: lang.lang.my.top_title, }); },
3：底部tabbar 设置双语
这里我的底部tabbar使用的是 自定义tabbar ，关于自定义tabbar请移步《小程序（三）配置tabbar及自定义tabbar样式》
添加如下代码：
php
复制代码
/** * 生命周期---创建 */ attached() { this.showTabbar(); }, /** * @name: 方法 * @author: camellia * @date: 2021-11-13 */ methods: { /** * @name: 显示菜单栏 * @author: camellia * @date: 2021-11-13 */ showTabbar() { var self = this; // ========================================================================== // 这里要从缓存中获取用户 身份 //获取当前小程序语言版本所对应的字典变量 var lang = languageUtils.languageVersion(); // console.log(lang.lang.toolbarStudent); self.data.menuWidth = "33%"; self.data.list = lang.lang.toolbarStudent.list; self.setData({ list: self.data.list, menuWidth: self.data.menuWidth, }); }, }
以上的代码即可实现小程序的中英双语切换功能，
如果你想实现中英日三语言切换，那就再创建一个对应的日文字典即可实现三语言切换。
有好的建议，请在下方输入你的评论
欢迎访问个人博客：guanchao.site
欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”
