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

已经重新优化代码做成了组件,需要可自取: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,
    })
  },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

difference between make and cmake

链接&#xff1a; https://earthly.dev/blog/cmake-vs-make-diff/#:~:textIn%20summary%3A%20The%20difference%20between,used%20to%20create%20a%20Makefile.

OpenHarmony开发案例:【自定义通知】

介绍 本示例使用[ohos.notificationManager] 等接口&#xff0c;展示了如何初始化不同类型通知的通知内容以及通知的发布、取消及桌面角标的设置&#xff0c;通知类型包括基本类型、长文本类型、多行文本类型、图片类型、带按钮的通知、点击可跳转到应用的通知。 效果预览&am…

✯✯✯宁波 IATF16949 认证:助力汽车企业迈向卓越✯✯✯

&#x1f308;&#x1f308;&#x1f308;宁波IATF16949认证&#xff1a;&#x1f49d;助力汽车企业迈向卓越&#x1f497; &#x1f575;️‍♂️宁波&#xff0c;这座繁华的&#x1f98a;港口城市&#xff0c;不仅以其&#x1f42f;独特的地理位置和丰富的&#x1f54a;️历史…

霍夫曼编码(含完整源码)

1.第一步 统计所有的字符【*】出现的频次并按频次进行从小到大的排序 2.第二步 进行权值的合并 3.第三步 编码 左0 右 1 huffman编码大致分为以下步骤&#xff1a; 统计所有字符出现的频次构建huffman树huffman树生成huffman编码将源文件压缩成huffman编码结构收到源文件之后…

JavaScript入门--数组

JavaScript入门--数组 前言数组的操作1、在数组的尾部添加元素2、删除数组尾部的元素&#xff0c;也就是最后一个元素3、删除头部第一个元素4、在数组的前面添加元素 小案例5、数组的翻转6、数组的排序7、数组的合并8、数组的切片 前言 JS中的数组类似于python中的列表&#x…

软件设计:UML 模型图总结

1. 相关链接 参考教程&#xff1a; https://sparxsystems.com/resources/tutorials/ https://sparxsystems.com/enterprise_architect_user_guide/15.2/model_domains/whatisuml.html Unified Modeling Language (UML) description, UML diagram examples, tutorials and r…

产品经理技术脑:怎么看懂接口文档

日常产品开发过程中&#xff0c;涉及前后端数据交互的时候&#xff0c;往往会离不开接口调用&#xff0c;尽管产品经理一般不需要写接口文档&#xff08;负责接口中间层产品经理除外&#xff09;&#xff0c;但对接口了解&#xff0c;对于需求沟通、需求传达还是很有帮助的。 …

集成电路测试学习

集成电路&#xff08;Integrated Circuit&#xff0c;IC&#xff09;整个设计流程包括&#xff1a;电路设计、晶圆制造、晶圆测试、IC封装、封装后测试。 IC测试目的&#xff1a;一、确认芯片是否满足产品手册上定义的规范&#xff1b;二、通过测试测量&#xff0c;确认芯片可以…

【艾体宝方案】智驾未来:高性能实时数据库,车企的数据分析变革!

近年来&#xff0c;汽车行业持续朝向互联互通以及自动化方向的演进&#xff0c;无论是在优化制造流程、提升车辆安全与性能&#xff0c;还是提供定制化客户体验方面&#xff0c;汽车行业的都未来牢牢根植于其有效处理和利用数据的能力。 一、汽车行业面临的挑战 &#xff08;…

Java(120):使用Java对TiDB数据库批量写入数据

使用Java对TiDB数据库批量写入数据 1、前言&#xff1a; 本次对TiDB数据库测试需要1w条数据&#xff0c;如果MySQL可用存储过程造数&#xff0c;结果发现TiDB用不了。只能想其他办法&#xff0c;一种是Java直接批量插入&#xff0c;一种是Jmeter插入。这里用的Java插入。 如果…

CANoe中关于NetworkHardwareConfiguration中的setup设置参数的详解

前提说明 本文是以VN1640A中的CAN_FD工程为例&#xff0c;为大家讲解。 1&#xff1a;首先打开相关配置 重点讲解红色框中的参数&#xff0c;其他参数该如何设置&#xff0c;请参考我另外一篇文章“关于CANoe硬件及接口的学习笔记&#xff08;VN1640A&#xff09;”或自行查阅…

js 写 视频轮播

html代码 <div class"test_box"> <div class"test"> <a href"#"> <div class"test_a_box"> <div class"test_a_mask"></div> <div class"test_a_layer"> <div cla…

偏微分方程算法之混合边界差分

目录 一、研究对象 二、差分格式 2.1 向前欧拉格式 1. 中心差商 1.1.1 理论推导 1.1.2 算例实现 2. x0处向前差商&#xff0c;x1处向后差商 1.2.1 理论推导 1.2.2 算例实现 2.2 Crank-Nicolson格式 2.2.1 理论推导 2.2.2 算例实现 一、研究对象 这里我们以混合边界…

高分一号卫星(GF-1):中国遥感科技的骄傲

高分一号卫星&#xff08;GF-1&#xff09;是中国遥感科技领域的一项突破性成就&#xff0c;其引入了先进的成像技术和灵活的数据获取模式&#xff0c;为中国的资源管理、环境监测和城市规划等领域带来了巨大的变革。本文将深入介绍高分一号卫星的技术参数、成像能力以及应用场…

抽奖系统设计

如何设计一个百万级用户的抽奖系统&#xff1f; - 掘金 如何设计百万人抽奖系统…… 在实现抽奖逻辑时&#xff0c;Redis 提供了多种数据结构&#xff0c;选择哪种数据结构取决于具体的抽奖规则和需求。以下是一些常见场景下推荐使用的Redis数据结构&#xff1a; 无序且唯一奖…

解析数据科学,探索ChatGPT背后的奥秘

在当今这个由数据驱动和AI蓬勃发展的时代&#xff0c;数据科学作为一门融合多种学科的综合性领域&#xff0c;对于推动各行各业实现数字化转型升级起着至关重要的作用。近年来&#xff0c;大语言模型技术发展态势强劲&#xff0c;为数据科学的进步做出了巨大贡献。其中&#xf…

第四百六十二回

文章目录 1. 概念介绍2. 实现方法3. 示例代码4. 内容总结 我们在上一章回中介绍了"关于MediaQuery的优化"相关的内容&#xff0c;本章回中将介绍readMore这个三方包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的readMore是一个…

新经济助推高质量发展“大有云钞”聚焦未来趋势

近日&#xff0c;由大有云钞科技&#xff08;北京&#xff09;有限公司主办的一场关于“新经济助力高质量发展法治研讨会”在北京国家会议中心隆重举行。此次研讨会汇聚了来自政府、企业、学术界和法律界的众多专家学者&#xff0c;共同探讨新经济背景下的法治建设和高质量发展…

Scrapy 框架基础

Scrapy框架基础Scrapy框架进阶 Scrapy 框架基础 【一】框架介绍 【1】简介 Scrapy是一个用于网络爬取的快速高级框架&#xff0c;使用Python编写他不仅可以用于数据挖掘&#xff0c;还可以用于检测和自动化测试等任务 【2】框架 官网链接https://docs.scrapy.org/en/late…

YesPMP平台 | 活动有礼,现金奖励点击领取!

YesPMP众包平台在线发福利啦&#xff0c;活动火热开启&#xff0c;现金奖励等你来领&#xff0c;最高可领千元&#xff0c;赶快参与将奖励收入囊中&#xff0c;一起来了解活动细节吧&#xff01; 一、活动内容&#xff1a; 活动一&#xff1a;【项目征集令】活动&#xff0c;…