微信小程序中英文切换

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

这里有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 创建页面,这里创建了两个页面,如图所示:

image.png

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
<view>{{content.lang.userCenter.userInfo.title}}</view>
<view>{{content.lang.userCenter.contactUs.title}}</view>
<button bindtap="switchLanguage">{{content.lang.userCenter.changeLanguage}}</button>
测试

image.png
image.png

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 运行小程序即可看到效果了

image.png
image.png

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

  • 19
    点赞
  • 56
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@猪大肠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值