微信小程序页面制作双语

这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

微信小程序页面制作双语的过程

首先在项目根目录下新建language文件夹，里面存中文文字和英文文字，以及切换双语的相关方法

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: "绑定查看今日日程"
    },
};
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"
  },
};
module.exports = {
    lang: Languague
}

languageutils文件内容如下：

1.languageVersion方法：

首先需要在点击选择语言时（例如前端组件中写的选择简体中文和English）往内存中存入控制语言显示的值，比如我储存的languageVersion，值为0时，引入上面写好的中文文件，值为1时，引入上面写好的英文文件，然后返回出去，供所需要的js页面使用。

2.changLanguage 方法：

切换语言，获取缓存中的languageVersion值，然后切换他的值，换不同的语言，下面的代码一看就明白了 最后别忘了导出这两个方法

const app = getApp();

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

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,
        });
    }
}
//抛出方法
module.exports = {
  'languageVersion': languageVersion,
  'changLanguage': changLanguage
}

这是需要双语的page页面的js文件

1.首先引入上面定义的languageUtils文件

2.在页面加载时调用languageUtils文件里的languageVersion初始化显示哪种语言（这里我自己封装了initLanguage方法用于初始化）

wx.setNavigationBarTitle用于动态修改微信小程序navigatationBarTitle的，详情看微信开放文档 微信开放文档：wx.setNavigationBarTitle

3.把语言文字保存到data中，前端绑定数据就ok了**

// 双语字典
const languageUtils = require("../../../language/languageUtils");

data: {

    //用于保存当前页面所需字典变量
    content: {},

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var self = this;
    // 初始化显示语言
    self.initLanguage();
  },
   /**
  * @name: 初始化语言（双语）
  * @author: camellia
  * @date: 2021-11-05 
  */
  initLanguage() {
    var self = this;
    //获取当前小程序语言版本所对应的字典变量
    var lang = languageUtils.languageVersion();
    // 页面显示
    self.setData({
      content: lang.lang,
    });
    // 顶部标题放到这里来就行了 
    wx.setNavigationBarTitle({
      title: lang.lang.grantAuth.top_title,
    });

需要双语的page页面的wxml文件

双大括号绑定data数据写法不用多说

 <view class="CheckAll">
       {{content.course.chech_course}}
</view>