当前位置:主页 > >

小程序多语言的切换

时间:2020-03-13 21:06:43 | 栏目: | 点击:

小程序有时候会遇到需要更改语言的切换,如果引用网上翻译的api个人觉得比较麻烦,所以还是老老实实的自己写一个js作为文本语言的切换。也算是投机取巧吧,不适合太多内容的转换。

简单举个例子
首先需要新建一个外部js文档,将接口暴露。
var json = [{
  "Language": "语言设置",
  "Changepwd": "密码修改",
  "Updated": "更新版本",
  "Hotline": "客服热线",
  "Signout": "退出登录",
  "Login": "登录",
  "Forgetpwd": "忘记密码",
  "Language": "语言切换",
}, {
  "Language": "Language settings",
  "Changepwd": "Change Password",
  "Updated": "Updated Version",
  "Hotline": "Hotline",
  "Signout": "Sign Out",
  "Login": "login",
  "Forgetpwd": "forget password",
  "Language": "Language switching",
}]
// 定义数据出口
module.exports = {
  dataList: json
}
因为需求是中英互换,所以分别设置两个json,然后暴露接口。

然后就是在所需要的页面引入该js

const lang = require('../../external/resources/language.js');

要实现切换功能就需要有一个选择框,最简单的是一个底部弹出框。同时设置一个全局缓存的标识wx.setStorageSync('mark', mark),用于判定语言的切换,并且如果是英文的话,需要更改底部导航栏的文字wx.setTabBarItem。

languagechange: function (e) {
  var that = this
  mark = ''
  wx.showActionSheet({
    itemList: ['中文', 'English'],
    success(res) {
      wx.clearStorageSync()
      if (0 == res.tapIndex) {
        dl = lang.dataList[0]
        mark = 0
        wx.setStorageSync('mark', mark)
        wx.reLaunch({
          url: '../Personal/index',
        })
        wx.setTabBarItem({
          index: 0,
          "text": "首页"
        })
        wx.setTabBarItem({
          index: 1,
          "text": "设备",
        })
        wx.setTabBarItem({
          index: 2,
          "text": "事件"
        })
        wx.setTabBarItem({
          index: 3,
          "text": "设置"
        })
        that.setData({
          datalist: dl
        })
      }
      if (1 == res.tapIndex) {
        dl = lang.dataList[1]	//选择是哪一个json,也就是选择语言变量
        mark = 1
        wx.setStorageSync('mark', mark)
        wx.reLaunch({
          url: '../Home/index',
        })
        that.setData({
          datalist: dl
        })
      }
    }
  })
},

效果图供大家参考

小程序多语言的切换

小程序多语言的切换

小程序多语言的切换

您可能感兴趣的文章:

相关文章