最近公司接了個項目，客戶那邊要求要有中英翻譯真椿；本來以為在網上有類似的框架，后面找了大半天乎澄，最后還是自己動手豐衣足食突硝；

這里有3個地方需要進行中英切換的，頂部頁面標題置济，小程序內容頁解恰，還有底部tabBar;

實現思路

一、創(chuàng)建json字典

將我們整個小程序的內容進行動態(tài)賦值,這里如果使用的是圖片的畫舟肉，就需要提前準備兩張圖片修噪，一張用于中文版本顯示，一張用于英文版本顯示路媚；所以一般我們需要創(chuàng)建兩個json文件黄琼；這里我在根目錄下創(chuàng)建language文件夾，并創(chuàng)建存放中文的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中創(chuàng)建一個js文件用于封裝公共方法剂府，這里我創(chuàng)建文件名為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 創(chuàng)建頁面腺占，這里創(chuàng)建了兩個頁面，如圖所示：

image.png

2.4 在創(chuàng)建的兩個頁面中編寫代碼痒谴，如下所示：

js

// pages/center/main/main.js
var languageUtil = require('../../../utils/languageUtil')
const app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    content: {} //用于保存當前頁面所需字典變量
  },
  /**
   * 生命周期函數--監(jiān)聽頁面顯示
   */
  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 好了，這樣我們就完成了頁面內容的中文切換了积蔚，大家是否看到了頁面標題也跟著換了意鲸，這一步要怎么做呢？別急尽爆，請往下看怎顾；

三、 頁面標題動態(tài)修改

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 這樣我們就完成了標題的動態(tài)修改漱贱，標題也可以進行中英切換了

四槐雾、底部tarbar導航欄中英切換

上面兩部分內容都算計較簡單，底部tarbar導航欄相對比較復雜一點幅狮；大家都知道蚜退，我們可以在小程序中的app.json文件中輕松定義底部導航欄；但是這樣做的話彪笼，因為json文件是靜態(tài)的，在小程序加載后蚂且，就沒辦法去修改了配猫，這樣等于是寫死的；所以我們需要使用自定義的方式杏死；具體看步驟泵肄，不要忽略每個步驟細節(jié)（很重要）

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 在根目錄下創(chuàng)建名稱為custom-tab-bar的目錄（固定名稱）, 并創(chuàng)建名稱為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

這部分內容本來以為挺簡單的挨厚，但是中間真的遇到很多坑，也是自己太菜了糠惫；希望能夠幫到有需要的小伙伴疫剃！