微信小程序英文版:实现一键切换中英双语版(已组件化)

news2025/2/6 1:08:21

已经重新优化代码做成了组件,需要可自取:https://github.com/CrystalCAI11/wechat-language-compoment
所有操作都打包在组件里不需要在额外的地方添加代码,直接在你需要的页面里导入组件,再在对应页面的onLoad()里set文本就行了。

onLoad() {
    this.setData({
      content: wx.getStorageSync('content')
    })
  }

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

<!--index.wxml-->
<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,
    })
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1598811.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电压比较器LM339介绍和仿真

电压比较器LM339介绍和仿真 &#x1f4d1;LM339相关特性 工作电源电压范围宽&#xff0c;单电源、双电源均可工作&#xff0c;单电源&#xff1a; 2&#xff5e;36V&#xff0c;双电源&#xff1a;1&#xff5e;18V&#xff1b;消耗电流小&#xff0c; Icc1.3mA&#xff1b;输…

用二进制译码器实现组合逻辑函数

用二进制译码器实现组合逻辑函数 原理 由于 n n n 位二进制译码器可提供 2 n 2^n 2n 个最小项的输出&#xff0c;而任一个逻辑函数都可变换为最小项之和的标准与或式&#xff0c;因此利用译码器和门电路可实现单输出及多输出组合逻辑电路 基本步骤 选择合适的集成二进制译…

怎么做预约功能_让服务变得更便捷

在快节奏的现代生活中&#xff0c;时间成为了我们最宝贵的财富。无论是工作、学习还是休闲娱乐&#xff0c;我们都希望能够更加高效地利用每一分每一秒。而预约功能的出现&#xff0c;正是为了满足这一需求&#xff0c;让我们的生活变得更加便捷、高效。 工具/原料 微信小程序…

网络协议安全:SSL/TLS协议详解,SSL协议执行原理、报文格式解析,Wireshark抓包分析SSL协议

「作者简介」&#xff1a;2022年北京冬奥会中国代表队&#xff0c;CSDN Top100&#xff0c;学习更多干货&#xff0c;请关注专栏《网络安全自学教程》 SSL协议 1、SSL协议发展史2、SSL协议执行过程3、SSL报文格式字段解析3.1、TLS报文头3.2、Handshake报文 4、Wireshark抓包分析…

【Java开发指南 | 第三篇】Java 空行、强制类型转换及基本数据类型

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 Java 空行强制类型转换Java 基本数据类型内置数据类型引用类型 Java 空行 空白行或者有注释的行&#xff0c;Java 编译器都会忽略掉。 强制类型转换 当需要将一个数据类型转换为另一个数据类型时&#xff0c…

DBA面试总结(Mysql篇)

一、delete与trancate的区别 相同点 1.两者都是删除表中的数据&#xff0c;不删除表结构 不同点 1.delete支持按条件删除&#xff0c;TRUNCATE不支持。 2.delete 删除后自增列不会重置&#xff0c;而TRUNCATE会被重置。 3.delete是逐条删除&#xff08;速度较慢&#xff09…

java:多线程中的死锁

多线程:死锁 当多个线程互相争抢资源导致都在互相等待资源的僵局时,如果没有外力,将会一直僵持下去,这就是死锁. 就像两个人分一双筷子,如果一人拿到一根筷子,都在等待对方手里的那根,将没有人能完成吃饭的任务. 死锁的必要条件 1,互斥 即资源只能被一个线程调用 2,不可剥…

STL的stack和queue(三):基于适配器模式的反向迭代器

目录 前言 list的反向迭代器 list.h文件 ReverseIterator.h文件 test.cpp文件 前言 迭代器按性质分类&#xff1a; 单向&#xff1a;forward_list双向&#xff1a;list随机&#xff1a;vector / deque 迭代器按功能分类&#xff1a; 正向反向const list的反向迭代器…

【Redis 神秘大陆】001 背景基础理论

一、背景&基础理论 1.1 什么是缓存 缓存&#xff1a;存储在计算机上的一个原始数据复制集&#xff0c;以便于访问——维基百科 1.2 为什么用缓存 提升用户体验&#xff1a; 【即效率、效益和基本主观满意度】CAST 使用者的状态、系统性能及环境&#xff0c;不同的人对于…

(最新)华为 2024 届实习招聘-硬件通⽤/单板开发——第十一套和十二套

&#xff08;最新&#xff09;华为 2024 届实习招聘-硬件通⽤/单板开发——第十一套和十二套 部分题目分享&#xff0c;完整版带答案(有答案和解析&#xff0c;答案非官方&#xff0c;未仔细校正&#xff0c;仅供参考&#xff09;&#xff08;共十套&#xff09;获取&#xff…

InnoDB架构:内存篇

InnoDB架构&#xff1a;内存篇 InnoDB是MySQL数据库中默认的存储引擎&#xff0c;它为数据库提供了事务安全型&#xff08;ACID兼容&#xff09;、行级锁定和外键支持等功能。InnoDB的架构设计优化了对于读取密集和写入密集型应用的性能表现&#xff0c;是一个高度优化的存储系…

逆向IDA中Dword,数据提取

我们可以看见数据是这样的&#xff0c;第一个是1cc 但是我们shifte就是 这个因为他的数据太大了&#xff0c;导致高位跑后面去了 这个时候&#xff0c;我们右键——convert——dword 这样就可以提取到争取的数据了 比如第一个数据 0x1cc a0xcc b0x1 print(hex((b<<8…

李沐25_使用块的网络VGG——自学笔记

VGG架构 1.多个VGG块后接全连接层 2.不同次数的重复块得到不同的架构 VGG-16、VGG-19 3.更大更深的AlexNet ##经典卷积神经网络的基本组成部分是下面的这个序列&#xff1a; 1.带填充以保持分辨率的卷积层&#xff1b; 2.非线性激活函数&#xff0c;如ReLU&#xff1b; …

zabbix升级后图形文字不显示

原版本升级后版本6.4.76.4.13 问题现象 更新小版本后zabbix数据图形都有&#xff0c;只有下方文字不显示 处理方式 下载win字体&#xff0c;根据自己选择&#xff0c;上传至/usr/share/zabbix/assets/fonts目录下&#xff0c;修改文件名为jianti.ttf 修改默认字体配置文件…

新项目应该选mongodb还是postgresql?

文章目录 MongoDBPostgreSQL大数据处理时的优势对比实际使用经验 选择MongoDB还是PostgreSQL作为新项目的数据库&#xff0c;主要取决于项目的具体需求、数据模型、应用场景以及团队熟悉程度等因素。下面将从几个关键角度对两者进行对比分析。 MongoDB 数据模型&#xff1a;Mo…

Django中的静态文件、路径、访问静态文件的方法

1.什么是静态文件 不能与服务器端做动态交互的文件都是静态文件 如:图片,css,js,音频,视频,html文件(部分) 2.静态文件配置 在 settings.py 中配置一下两项内容: 1.配置静态文件的访问路径 通过哪个url地址找静态文件 STATIC_URL ‘/static/’ 说…

zabbix 监控网络设备之 smnpwalk简单使用

安装&#xff1a; sudo yum install net-snmp net-snmp-utils 设备MIB文件查看OID&#xff1b; [rootzabbix ~]$snmpwalk -v 2c -c public 192.168.1.100 1.3.6.1.4.1.2011.6.139.12.1.5.7 SNMPv2-SMI::enterprises.2011.6.139.12.1.5.7.0 INTEGER: 62 所以命令也可以写成…

机器学习之特征选择(Feature Selection)

1 引言 特征提取和特征选择作为机器学习的重点内容&#xff0c;可以将原始数据转换为更能代表预测模型的潜在问题和特征的过程&#xff0c;可以通过挑选最相关的特征&#xff0c;提取特征和创造特征来实现。要想学习特征选择必然要了解什么是特征提取和特征创造&#xff0c;得…

李秘书讲写作告诉你,答辩状这样写才有说服力!你觉得呢?

李秘书讲写作告诉你&#xff0c;答辩状这样写才有说服力&#xff01;你觉得呢&#xff1f; 答辩状是一种法律文书&#xff0c;用于对对方的指控或诉讼进行回应和反驳。为了让答辩状具有说服力&#xff0c;你需要清晰地陈述你的立场、提供证据&#xff0c;并以逻辑和事实为基础…

JS-31-错误传播

一、错误传播 如果代码发生了错误&#xff0c;又没有被try ... catch捕获&#xff0c;那么&#xff0c;程序执行流程会跳转到哪呢&#xff1f; 示例&#xff1a; function getLength(s) {return s.length; }function printLength() {console.log(getLength(abc)); // 3conso…