效果圖：

點擊按鈕後

步驟：

1.構建中、英文語言包，將程序中的文本部分進行封裝

在主目錄下新建一個名為utils的文件夾用於存放供全局使用的語言包，在utils文件夾內新建兩個js文件，分別為中文語言包和英文語言包，將所有文本格式的部分都放在裏邊。在js文件中定義變量，並進行模塊化。

模塊只有通過 module.exports 才能對外暴露接口，因此在模塊化部分設置用於外部調用變量的接口：

var Chinese = {
　　content:"這是中文",
　　button:"change to English"
}

module.exports = {
   Content:Chinese 
}
 

Chinese是變量，是一切文本的封裝，也可寫多個變量以便調用。Content是外部使用Chinese時的接口。

2.在語言轉換界面的js文件中引入語言包，並設置語言轉換函數。

在js文件中用一個變量來表示語言包，並用require將語言包內容獲取至該變量當中。

var chinese = require("../../utils/Chinses.js")
var english = require("../../utils/English.js")

設置語言狀態變量，表示當前的語言狀態：

lanuage:"中文"

將語言狀態值賦值到語言包內容獲取函數當中，語言包內容獲取函數將根據當前的語言狀態來選擇調用的語言包。

onLoad: function (options) {
    var lastLanuage = this.data.lanuage,
    this.getContent(lastLanuage)   
}

上述代碼表示頁面加載時的語言狀態，調用getContent()函數來起作用。使用changeLanuage()函數後也要進行同樣的操作。

changeLanuage:function(){
    var version = this.data.lanuage;
    if(version == "中文"){
        this.setData({
            lanuage:
 
"英文"
        })
    }else{
        this.setData({
            lanuage:"中文"
        })
    }
    var lastLanuage = this.data.lanuage;
    this.getLanuage(lastLanuage)
}

其中getlanuage()函數如下：

getLanuage:function(lastLanuage){
    if(lastLanuage == "中文"){
        this.setData({
            content:chinese.Content
           })
    }else{
        this.setData({
            content:english.Content
        })
    }
}

3.為語言轉換界面的wxml文件中使用語言包中的內容。

wxml文件中所用的內容直接來源於起js文件。例如顯示語言包中的內容：

<view>{{content.content}}</view>
<button bindtap="changeLanuage">{{content.button}}</button>

源代碼：

//中文語言包
var Chinese = {
  content:"這是中文",
  button:"change to English",
}

//模塊化
module.exports = {
  content: chinese,
}

//英文語言包
var English = {
  content: "this is english",
  button: "修改為中文",
}


//模塊化
module.exports = {
  content: English
}

//third.js
var chinese = require("../../utils/Chinses.js")
var english = require("../../utils/English.js")

Page({
  data: {
       language:"中文",
  },

  onLoad: function (options) {
    var lastLanuage = this.data.language;
    this.getContent(lastLanuage);
  },

changeLanuage:function(){
    var version = this.data.language;
    if (version == "中文"){
      this.setData({
        language:"英文"
      })
    }else{
      this.setData({
        language: "中文"
      })
    }

    var lastLanuage = this.data.language;
    this.getContent(lastLanuage);
  },

   getContent: function (lastLanuage) {
      if (lastLanuage == "中文") {
      this.setData({
        content: chinese.content
      })
    } else {
      this.setData({
        content: english.content
      })
    }
  }
}

//third.wxml
<view>{{content.content}}</view>

<button bindtap=‘changeLanuage‘>{{content.button}}</button>

微信小程序--中英文切換