微信小程序中英文切换-微信小程序自定义tab切换

最近公司接了个项目微信小程序中英文切换，客户那边要求要有中英翻译；本来以为在网上有类似的框架，后面找了大半天，最后还是自己动手丰衣足食；

这里有3个地方需要进行中英切换的，顶部页面标题，小程序内容页，还有底部tabBar;

实现思路 一、创建json字典

将我们整个小程序的内容进行动态赋值,这里如果使用的是图片的画，就需要提前准备两张图片，一张用于中文版本显示，一张用于英文版本显示；所以一般我们需要创建两个json文件；这里我在根目录下创建language文件夹，并创建存放中文的zh_lang和英文的en_zhang两个json文件；具体代码如下：

en_lang.json

var Languague = {
  //个人中心
  userCenter:{
    //banner
    banner:"http://hyncdata.maomaokeji.cn/hync/20200717/cb1d554cec91434d9c4e5b9058724a67.png",
    //中英文切换按钮
    changeLanguage:"change to Chinese",
    //个人信息
    userInfo:{
      title:"personal information",
      content:{}
    },
     //联系我们
    contactUs:{
      title:"contact us",
      content:{}
    },
    //页面标题
    title:"userCenter"
  },
  //底部英文版工具栏，这里是用于自定义tarbar用的
  toolbar:{
    list: [
      {
        "pagePath": "../../introduct/main/main",
        "iconPath": "../static/images/introduct.png",
        "selectedIconPath": "../static/images/introduct_s.png",
        "text": "Profiles"
      },
      {
        "pagePath": "../../center/main/main",
        "iconPath": "../static/images/center.png",
        "selectedIconPath": "../static/images/center_s.png",
        "text": "Me"
      }
    ]
  }
}
module.exports = {
  lang: Languague
}

zh_lang.json

var Languague = {
  //个人中心
  userCenter:{
    //banner
    banner:"http://hyncdata.maomaokeji.cn/hync/20200717/cb1d554cec91434d9c4e5b9058724a67.png",
    //中英文切换按钮

    changeLanguage:"切换英文",
    //个人信息
    userInfo:{
      title:"个人信息",
      content:{}
    },
     //联系我们
    contactUs:{
      title:"联系我们",
      content:{}
    },
    //个人中心
    title:"个人中心"
  },
  //顶部导航栏，这里是用于自定义tarbar用的
  toolbar:{
    list: [
      {
        "pagePath": "../../introduct/main/main",
        "iconPath": "../static/images/introduct.png",
        "selectedIconPath": "../static/images/introduct_s.png",
        "text": "公司介绍"
      },
      {
        "pagePath": "../../center/main/main",
        "iconPath": "../static/images/center.png",
        "selectedIconPath": "../static/images/center_s.png",
        "text": "个人中心"
      }
    ]
  }
}
module.exports = {
  lang: Languague
}

二、小程序页面内容翻译实现 2.1 在app.js中的globalData中声明一个公共变量version，用于标识当前版本是中文版还是英文版

  globalData: {
    version:0 ,//0为中文 1为英文
  }

2.2 在utils中创建一个js文件用于封装公共方法，这里我创建文件名为languageUtils的js文件；

const app = getApp()
//语言切换
const languageVersion=function(){
  if (app.globalData.version == 0) {
    // 导入我们定义好的中文字典
    var zh_lang = require('../language/zh_lang.js')
  //  console.log(zh_lang)
    return zh_lang
  } else {
    //导入我们定义好的英文字典
    var en_lang = require('../language/en_lang.js')

//    console.log(en_lang)
    return en_lang
  }
}
//切换版本
const changLanguage=function(){
//修改前面已经定义好的，用于标识小程序的语言版本
  if (app.globalData.version == 0) {
  
    app.globalData.version = 1
    //console.log("当前语言版本：英文",app.globalData.version)
  } else if (app.globalData.version == 1) {
    app.globalData.version = 0
   // console.log("当前语言版本：中文",app.globalData.version)
  }
  
}
//抛出方法
module.exports={
  'languageVersion': languageVersion,
  'changLanguage': changLanguage
}

2.3 创建页面，这里创建了两个页面，如图所示：

2.4 在创建的两个页面中编写代码，如下所示： js

// pages/center/main/main.js
var languageUtil = require('../../../utils/languageUtil')
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    content: {} //用于保存当前页面所需字典变量
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.initLanguage()
  },
 
  //中英文切换
  switchLanguage() {
      //切换当前版本，即修改公共变量中的version
      languageUtil.changLanguage()
     this.initLanguage()
  },
  //初始化语言
  initLanguage() {
    //获取当前小程序语言版本所对应的字典变量
    var lang = languageUtil.languageVersion()

    this.setData({
      content: lang
    })
  }
})

xml

{{content.lang.userCenter.userInfo.title}}
{{content.lang.userCenter.contactUs.title}}
{{content.lang.userCenter.changeLanguage}}

测试

2.5 好了，这样我们就完成了页面内容的中文切换了，大家是否看到了页面标题也跟着换了，这一步要怎么做呢？别急，请往下看； 三、 页面标题动态修改 3.1 这里比较简单只需要一行代码就可以搞定

wx.setNavigationBarTitle({
      title: ""
})

3.2 这里我们把它放到initLanguage方法里面即可

  //初始化语言
  initLanguage() {
    //获取当前小程序语言版本所对应的字典变量
    var lang = languageUtil.languageVersion()
    this.setData({
      content: lang
    })
    //放到这里来就行了 
    wx.setNavigationBarTitle({
      title: lang.lang.userCenter.title
    })
  }

3.3 这样我们就完成了标题的动态修改，标题也可以进行中英切换了 四、底部tarbar导航栏中英切换

上面两部分内容都算计较简单，底部tarbar导航栏相对比较复杂一点；大家都知道，我们可以在小程序中的app.json文件中轻松定义底部导航栏；但是这样做的话，因为json文件是静态的，在小程序加载后，就没办法去修改了，这样等于是写死的；所以我们需要使用自定义的方式；具体看步骤，不要忽略每个步骤细节（很重要）

4.1 在app.json中配置我们想要的导航栏，文件中写入以下代码；

"tabBar": {
    "custom": true, //这里一定要把custom设置为true，声明为自定义导航栏
    "color": "#7A7E83",
    "selectedColor": "green",
    "borderStyle": "black",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/introduct/main/main",
        "iconPath": "static/images/introduct.png",
        "selectedIconPath": "static/images/introduct_s.png",
        "text": "" //可以写入内容，也可以不写~
      }，
      {
        "pagePath": "pages/center/main/main",
        "iconPath": "static/images/center.png",
        "selectedIconPath": "static/images/center_s.png",
        "text": "" //可以写入内容，也可以不写~

      }
    ]
  },

4.2 在根目录下创建名称为custom-tab-bar的目录（固定名称）, 并创建名称为index的页面（固定名称）, index页面代码如下：

index.js

var app=getApp()
var languageUtil=require('../utils/languageUtil')
Component({
  data: {
    version:0,
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    "list": [
      {
        "pagePath": "../../introduct/main/main",
        "iconPath": "../static/images/introduct.png",
        "selectedIconPath": "../static/images/introduct_s.png",
        "text": "公司介绍"
      },
      {
        "pagePath": "../../center/main/main",
        "iconPath": "../static/images/center.png",
        "selectedIconPath": "../static/images/center_s.png",
        "text": "个人中心"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
//切换导航栏，标识导航栏下标
      this.setData({
        selected: data.index
      })
    //  console.log(url)
    //点击导航栏，跳转到对应页面上
      wx.switchTab({url:url})
    }  
  }
})

index.wxml页面

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;

  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}
.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}
.tab-bar-item cover-view {
  font-size: 10px;
}

踩坑指南：

1.custom-tab-bar目录放置根目录下，目录中的文件只能使用index, 当时使用其他名字搞了半天才出来，切记 切记

2.app.js中也必须配置一样的导航信息微信小程序中英文切换，如果配置和custom-tab-bar中不一样,或者少 则会出现 无法跳转的情况

4.3 在我们的小程序页面中进行配置，打开我们的个人中心页面(介绍页面也类似)

我们需要做的就是，当用户点击切换按钮时，我们应该把tarbar的配置文件换成相对应的语言版本，这里我们可以使用以下命令直接给子组件赋值

 if (typeof this.getTabBar === 'function' &&this.getTabBar()) {
 this.getTabBar().setData({
      list:[] //这里直接赋值即可
      })
}

4.4 我们可以在initLanguage()方法中添加以下代码给导航栏附上字典变量值

    if (typeof this.getTabBar === 'function' &&this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1,//这个是当前页面在导航栏中的下标
        list:lang.lang.toolbar.list //赋值
      })
    }

4.5 运行小程序即可看到效果了

这部分内容本来以为挺简单的，但是中间真的遇到很多坑，也是自己太菜了；希望能够帮到有需要的小伙伴！