技術標籤：小程式javascript

第一步，找個地方新建中英文兩個字典，我是放在utils下面

字典內容如下en.js

let en = {
  text1: 'text1',
  text2: 'text2',
  text3:'text3',
  text4:'text4',
}

module.exports = {
  content: en
}

zh.js

let zh = {
  text1: '文字1',
  text2: '文字2',
  text3:'文字3',
  text4:'文字4',
}

module.exports = {
  content: zh
}
 

第二步，把切換語言的兩個函式放在app.js裡

import zh from '/utils/zh'
import en from '/utils/en'//匯入兩個字典

App({
  globalData: {
    language: wx.getStorageSync('language')
    },
    
  onLaunch() {
    this.updateContent()//每次啟動小程式都重新獲取所選語言的文字
    },
    
  updateContent() {
    let lastLanguage = wx.getStorageSync('language'
 
)//獲取當前語言
    if (lastLanguage == 'en') {
      this.globalData.content = en.content//根據當前系統語言獲取對應文字
      wx.setStorageSync('language', 'en')//把當前語言儲存在本地
    } else {//中文為預設語言
      this.globalData.content = zh.content
      wx.setStorageSync('language', 'zh')
    }
  },

  changeLanguage() {
    let language =
 
 wx.getStorageSync('language')//獲取當前語言
    if (language == "zh") {
      wx.setStorageSync('language', 'en')//切換語言並儲存在本地
    } else {
      wx.setStorageSync('language', 'zh')
    }
    this.updateContent()//拿修改後語言獲取對應文字
  }
})

這裡用wx.setStorageSync()方法來儲存語言只是為了方便debug，你只用app.globaldata來傳值也是完全沒有問題的。

第三步，把切changeLanguage()方法bindtap在首頁的元素裡。
因為updateContent()方法放在onLaunch函式裡，所以切換語言後我加了一個wx.reLaunch()重啟首頁，才能獲取新的語言文字。

<!--index.wxml-->
<view class="container">
  <view bindtap="changeLanguage">EN|中文</view>
  <view>
    <text>{{content.text1}}</text>
    <text>{{content.text2}}</text>
  </view>
  <view bindtap="toPage2">{{content.toPage2}}</view>
</view>

index.js

  changeLanguage() {
    app.changeLanguage()
    wx.reLaunch({
      url: '/pages/index/index',
    })
  },

第四步，給所有頁面的onShow()裡都加上如下程式碼，然後別忘了把原本的文字都改成{{content.xxx}}這樣的形式，就搞定啦。

  onShow() {
    this.setData({
      content: app.globalData.content,
    })
  },

用這個方法，想要做成更多語言版本也是完全沒有問題的，只要加上對應字典並在app.js裡import就行。