微信小程序（二十七）微信小程序配置多语言

公司中开发的项目需要使用到双语这个功能。

上一个版本开发的时候，使用的是多语言i18n这个插件，但是感觉体验一般。

配置起来也不是很方便。

在这一版开发的时候，就想换个插件，优化一下。

但是在百度上找了几个插件尝试了之后，还不如i18n的效果呢

大概想了一下，这个玩意应该也不是很费劲，我这里自定义一个双语插件吧，不，应该说自定义一个多语言插件吧

一：双自定义双语插件

1：在项目根目录下创建一个目录：language

2：在language目录下创建languageUtils.js

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

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

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() 中

// =============================================
    // 首次进入设置语言选项
    var languageVersion = wx.getStorageSync("languageVersion");
    if(!languageVersion)
    {
      wx.setStorage({
        key: "languageVersion",
        data: 0,
      });
    }
复制代码

2：基础调用

index.js

// 双语字典
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样式》

添加如下代码：

/**
   * 生命周期---创建
   */
  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

欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”

微信小程序（二十七）微信小程序配置多语言

猜你喜欢