微信小程序：实现一键切换中英双语版

第一步，找个地方新建中英文两个字典，我是放在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()重启首页，才能获取新的语言文本。

<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就行。