小程序 之中英文切换

一、效果图

 

 二、示例

languageUtils.js

const app = getApp()
//语言切换
const languageVersion=function(){
  var lang = wx.getStorageSync('lang') ? wx.getStorageSync('lang') : 'zh'
  if (lang == 'zh') {
    // 导入我们定义好的中文字典
    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(){
//修改前面已经定义好的，用于标识小程序的语言版本
var lang = wx.getStorageSync('lang') ? wx.getStorageSync('lang') : 'zh'
  if (lang == 'zh') {
    wx.setStorageSync('lang', 'en')
    //console.log("当前语言版本：英文",app.globalData.version)
  } else {
    wx.setStorageSync('lang', 'zh')
   // console.log("当前语言版本：中文",app.globalData.version)
  }
}
//抛出方法
module.exports={
  'languageVersion': languageVersion,
  'changLanguage': changLanguage
}

en_lang.js

var Languague = {
  home: {
    test: 'i am home page'
  },

  product: {
    name: 'test',
    list: []
  },

  understand: {
    test: 'i am understanding product page'
  },

  userCenter:{
    //中英文切换按钮
    changeLanguage:"change to Chinese",
    userInfo:{
      title:"personal information"
    },
     //联系我们
    contactUs:{
      title:"contact us"
    },
  },

  //底部英文版工具栏，这里是用于自定义tarbar用的
  toolbar:{
    list: [
      {
        pagePath: "page/home0/index",
        selectedIconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
        iconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
        text: 'Home Page',
        isdot: false,
        number: 0
      }, {
        pagePath: "page/home1/index",
        selectedIconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
        iconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
        text: 'Product Center',
        isdot: false,
        number: 0
      }, {
        pagePath: "page/home2/index",
        selectedIconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
        iconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
        text: 'Understand',
        isdot: false,
        number: 0
      }, {
        pagePath: "page/home3/index",
        selectedIconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
        iconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
        text: 'Me',
        isdot: false,
        number: 0
      }
    ]
  }
}

module.exports = {
  lang: Languague
}

zh_lang.js

var Languague = {
  home: {
    test: '我是首页'
  },

  product: {
    name: '测试',
    list: []
  },

  understand: {
    test: '我是了解产品页'
  },
  
  userCenter: {
    changeLanguage: "切换英文",
    userInfo: {
      title: "个人信息"
    },
    contactUs: {
      title: "联系我们"
    }
  },

  //顶部导航栏，这里是用于自定义tarbar用的
  toolbar: {
    list: [{
      pagePath: "page/home0/index",
      selectedIconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
      iconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
      text: '首页',
      isdot: false,
      number: 0
    }, {
      pagePath: "page/home1/index",
      selectedIconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
      iconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
      text: '产品中心',
      isdot: false,
      number: 0
    }, {
      pagePath: "page/home2/index",
      selectedIconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
      iconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
      text: '了解产品',
      isdot: false,
      number: 0
    }, {
      pagePath: "page/home3/index",
      selectedIconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
      iconPath: '/we7_bybook_plugin_temp2/resource/img/logo.png',
      text: '我的',
      isdot: false,
      number: 0
    }]
  }
}

module.exports = {
  lang: Languague
}

在页面中使用：

var app = getApp(),
  _this, languageUtil = require('../../utils/languageUtils')
Page({
  data: {
    blockid: 0,
    bgcolor: '#ffffff',
    color: "#cccccc",
    selectedColor: '#369138',
    showborder: true,
    bordercolor: "",
    tabbar: [],
  },
  tabbarChange(e) {
    var index = parseInt(e.detail)
    _this.setData({
      blockid: index
    })
    _this.setTitle()
  },
  onLoad() {
    _this = this
    wx.hideHomeButton({
      success: (res) => {},
    })
  },
  onShow() {
    _this.initLanguage()
  },
  setTitle() {
    var title = _this.data.content.lang.toolbar.list[_this.data.blockid].text
    wx.setNavigationBarTitle({
      title: title,
    })
  },
  switchLanguage() {
    //切换当前版本，即修改公共变量中的version
    languageUtil.changLanguage()
    _this.initLanguage()
  },
  //初始化语言
  initLanguage() {
    //获取当前小程序语言版本所对应的字典变量
    var lang = languageUtil.languageVersion()
    _this.setData({
      content: lang
    })
    _this.setTitle()
  }
})

<view wx:if="{{content.lang.toolbar.list.length >0}}" class="">
  <block wx:if="{{blockid==0}}">
    <view>{{content.lang.home.test}}</view>
  </block>
  <block wx:if="{{blockid==1}}">
    <component_product />
  </block>
  <block wx:if="{{blockid==2}}">
    <view>{{content.lang.understand.test}}</view>
    <navigator url="../product/index">跳转</navigator>
  </block>
  <block wx:if="{{blockid==3}}">
    <view>{{content.lang.userCenter.userInfo.title}}</view>
    <view>{{content.lang.userCenter.contactUs.title}}</view>
    <button bindtap="switchLanguage">{{content.lang.userCenter.changeLanguage}}</button>
  </block>
  <tabbar tabbarData="{{content.lang.toolbar.list}}" active="{{0}}" bgcolor="{{bgcolor}}" color="{{color}}"
    selectedColor="{{selectedColor}}" showborder="{{showborder}}" bind:tapChange="tabbarChange" />
</view>