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

已经重新优化代码做成了组件,需要可自取: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.contentwx.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.mzph.cn/news/819603.shtml

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

相关文章

【嵌入式】嵌入式开发中常见的面试题(持续更新中)

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向的学习指导…

【位运算】Leetcode 消失的两个数字

题目解析 面试题 17.19. 消失的两个数字 算法讲解 我们将这两个数组异或在一起&#xff0c;最后的结果就是a ^ b(缺失的两个数字)的结果&#xff0c;这两个缺失的数字一定是不相同的&#xff0c;所以我们就寻找他们第一个比特位是1的那个位置&#xff0c;异或的原理是&#xf…

半导体存储电路知识点总结

目录 一、SR锁存器 1.SR锁存器的概念 2.作用 二、电平触发器&#xff08;Flip-Flop&#xff09; 1.时钟信号 2.电平触发的触发器电路结构 3.带异步置位复位的电平触发器 三、边沿触发器 1.特点 2.两个D触发器组成的边沿触发D触发器 3.CMOS边沿触发D触发器的典型电路 …

FMEA分析

目录 1、FMEA的核心目的 2、FMEA的种类 3、FMEA的实施步骤 4、FMEA的SOD等级 5、FMEA的例子 FMEA&#xff08;Failure Modes and Effects Analysis&#xff0c;失效模式与影响分析&#xff09;是一种预防性的可靠性设计分析&#xff0c;用来确定潜在失效模式及其原因。它主…

【Altium Designer 20 笔记】PCB线宽与过孔尺寸

电源线&#xff1a;40mil1A&#xff08;一般翻倍给&#xff09;,地线比电源线粗一点即可&#xff1b;信号线&#xff1a;10-15mil 一、线宽 市电的火线和零线&#xff1a;80-100mil12V /24V 20mil~60mil 5V 20-30mil 3V 20-30mil GND 越宽越好20-30mil普通信号线 10mil-15mil…

比亚迪老总王传福:雨天走访县级市场,生活方式却如此简单

近期&#xff0c; 世界汽车销售排名前十的老板亲自下到一线市场调研&#xff0c;这听起来像是个奇迹&#xff0c;但这就是我们今天要说的主角——比亚迪老总王传福的故事。他不仅亲自去现场调研&#xff0c;还时常挤地铁、吃盒饭、坐经济舱&#xff0c;这和那些高高在上的企业领…

flink network buffer

Flink 的网络协议栈是组成 flink-runtime 模块的核心组件之一&#xff0c;是每个 Flink 作业的核心。它连接所有 TaskManager 的各个子任务(Subtask)&#xff0c;因此&#xff0c;对于 Flink 作业的性能包括吞吐与延迟都至关重要。与 TaskManager 和 JobManager 之间通过基于 A…

YOLOv8最新改进系列:融合DySample超轻量动态上采样算子,低延迟、高性能,目前最新上采样方法!!!遥遥领先!

YOLOv8最新改进系列&#xff1a;融合DySample超轻量动态上采样算子&#xff0c;低延迟、高性能&#xff0c;目前最新上采样方法&#xff01;&#xff01;&#xff01;遥遥领先&#xff01; DySample超轻量动态上采样算子全文戳这&#xff01;here! 详细的改进教程以及源码&am…

在EC2上面安装Skywalking9.7.0

问题 前几天在k8s集群安装了skywalking&#xff0c;说什么这种方式不行&#xff0c;客户要求单独在一台linux机器安装skywalking。现在我们来解决这个问题。 步骤 # 移动到/opt目录 cd /opt # 下载apm安装包 sudo wget https://dlcdn.apache.org/skywalking/9.7.0/apache-sk…

超越GPT-4V!马斯克发布Grok-1.5 With Vision

在 Grok-1 开源后不到一个月&#xff0c;xAI 的首个多模态模型就问世了。Grok-1.5V是XAI的第一代多模态模型&#xff0c;除了其强大的文本处理能力之外&#xff0c;Grok现在还能够处理包括文档、图表、图形、屏幕截图和照片在内的各种视觉信息。相信Grok-1.5V将很快提供给现有的…

ViT——nlp和cv进行了统一,使多模态成为可能

题目:AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE 1.概述之前的transformer在cv中应用,大部分是将CNN模型中部分替换成transformer block(整体网络结构不变)或者用transformer将不同网络连接起来,而本文提出:一个针对图像patch的纯的t…

WebShell简介

WebShell简介 1、WebShell分类 • JSP类型 • ASP类型 • PHP类型 2、WebShell用途 • 站长工具 • 持续远程控制 • 权限提升 • 极强隐蔽性 3、WebShell检测方法 • 基于流量的 WebShell 检测 • 基于文件的 WebShell 检测 • 基于日志的 WebShell 检测 WebShe…

看到这12这个登录页,我感觉自己的很多登录白设计啦。

登录页是B端系统的脸面&#xff0c;它是B端系统的入口&#xff0c;是用户与系统之间的第一道门槛。登录页的设计直接影响用户对系统的第一印象&#xff0c;因此登录页的设计应该简洁、清晰、易于使用&#xff0c;并且能够符合用户的需求和期望。

深度学习框架

深度学习框架 1 引言 在当今技术加速发展的时代&#xff0c;深度学习已经成为了人工智能领域内最为引人注目的子领域之一。其在图像识别、自然语言处理、自动驾驶等多个行业中的成功应用&#xff0c;已经证明了深度学习在解决复杂问题方面的巨大潜力。然而&#xff0c;深度学习…

航芯通用MCU技术常见问题 | F4专题

日常工作中&#xff0c;我们的销售或技术工程师经常会收到来自用户的问题&#xff0c;其中一些问题是比较常见的&#xff0c;所以为满足日常用户对航芯产品使用及服务的了解&#xff0c;航芯特此推出“通用MCU技术常见问题”专题&#xff0c;分为F0专题及F4专题&#xff0c;欢迎…

32单片机入门持续更新中

配套资料为野火霸道V2 初识 STM32 4.1 什么是 STM32 STM32&#xff0c;从字面上来理解&#xff0c;ST 是意法半导体&#xff0c;M 是 Microelectronics 的缩写&#xff0c;32 表示 32 位&#xff0c;合起 来理解&#xff0c;STM32 就是指 ST 公司开发的 32 位微控制器。在如今…

如何在Vue3中使用H.265视频EasyPlayer.js流媒体播放器?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#…

【开源鸿蒙】调试OpenHarmony轻量系统QEMU RISC-V版本

【开源鸿蒙】调试OpenHarmony轻量系统QEMU RISC-V版本 一、准备工作1.1 编译OpenHarmony源码1.2 确认OHOS_Image已生成1.3 确认OHOS_Image文件是否有调试信息1.4 检查config.gni文件是否有-g编译选项 二、GDB调试2.1 启动QEMU模拟器2.2 启动GDB调试器2.3 连接QEMU模拟器2.4 使用…

性能优化-02

uptime 依次显示当前时间、系统运行时间以及正在登录用户数&#xff0c;最后三个数字依次则是过去1分钟、5 分钟、15 分钟的平均负载(Load Average) 平均负载是指单位时间内&#xff0c;系统处于可运行状态和不可中断状态的平均进程数&#xff0c;也就是平均活跃进程数&#xf…

Vue3(四):Pinia

一、Pinia介绍 Pinia是一个专门为Vue.js设计的状态管理库&#xff0c;它提供了一种简单和直观的方式来管理应用程序的状态。在使用Pinia时&#xff0c;可以轻松地创建定义状态的存储&#xff0c;然后将其与Vue组件绑定&#xff0c;使它们能够使用该状态。和上一个博客提到的Vu…