当前位置: 首页 > news >正文

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

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

相关文章:

  • openstack之neutron介绍
  • 学习Rust的第三天:猜谜游戏
  • React中子传父的方式及原理
  • 【数据结构与算法】贪心算法及例题
  • 【Origin+Python】使用External Python批量出图代码参考
  • YOLOv8最新改进系列:融合DySample超轻量动态上采样算子,低延迟、高性能,目前最新上采样方法!!!遥遥领先!
  • ChatGPT基础(二) ChatGPT的使用和调优
  • 麒麟 V10 离线 安装 k8s 和kuboard
  • PlayerSettings.WebGL.emscriptenArgs设置无效的问题
  • 项目管理工具——使用甘特图制定项目计划的详细步骤
  • python读取文件数据写入到数据库中,并反向从数据库读取保存到本地
  • 社交媒体数据恢复:Viber
  • 蓝桥杯赛事介绍
  • TypeScript系列之-深度理解基本类型画图讲解
  • Debian
  • 怎么使用JMeter进行性能测试?
  • MySQL:锁的分类
  • 基于springboot实现房屋租赁管理系统设计项目【项目源码+论文说明】
  • 揭秘Redis底层:一窥数据结构的奥秘与魅力
  • 【网站项目】智能停车场管理系统小程序
  • 芒果YOLOv5改进94:检测头篇DynamicHead为目标检测统一检测头:即插即用|DynamicHead检测头,尺度感知、空间感知、任务感知
  • 获奖名单出炉,OurBMC开源大赛总决赛圆满落幕
  • Qt配置外部库(Windows平台)
  • (最新)华为 2024 届实习招聘-硬件通⽤/单板开发——第十一套和十二套
  • js纯前端实现语音播报,朗读功能(2024-04-15)
  • PostgreSQL数据库基础--简易版
  • 前端解析URL的两种方式
  • Linux的学习之路:6、Linux编译器-gcc/g++使用
  • 分享2024 golang学习路线
  • 【Linux】进程间通信——system V版本 共享内存