小程序 之中英文切换

Posted 2021-06-24 样子2018

一、效果图

 

 

 二、示例

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>