小程序 版本语言的切换

本文介绍了如何在小程序中实现语言切换功能。通过创建外部JS文件,定义中英两种语言的JSON,然后在需要的页面引入并调用接口进行切换。同时,使用全局缓存标识来跟踪当前语言状态,并在切换到英文时更新底部导航栏文字。提供了一个简单的底部弹出框选择语言的实现效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小程序有时候会遇到需要更改语言的切换,如果引用网上翻译的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
          })
        }
      }
    })
  },

效果图供大家参考
在这里插入图片描述在这里插入图片描述在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值