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

这篇具有很好参考价值的文章主要介绍了微信小程序英文版:实现一键切换中英双语版(已组件化)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

已经重新优化代码做成了组件,需要可自取: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}}这样的形式,就搞定啦。文章来源地址https://www.toymoban.com/news/detail-853846.html

  onShow() {
    this.setData({
      content: app.globalData.content,
    })
  },

到了这里,关于微信小程序英文版:实现一键切换中英双语版(已组件化)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ChatGPT指令大全(英文版)

    大家都知道ChatGPT目前大量使用中文,账号可能会被列为高风险,所以,问答可以采取英文形式更佳,特整理一版英文指令大全分享给大家,看不懂的同学可以使用翻译哦! I want you to act as a linux terminal. I will type commands and you will reply with what the terminal should show. I want you to only

    2023年04月17日
    浏览(86)
  • Windows Server 2022 中文版、英文版下载 (updated Jan 2023)

    Windows Server 2022 正式版,2023 年 1 月更新,持续更新中 … 请访问原文链接:https://sysin.org/blog/windows-server-2022/,查看最新版。原创作品,转载请保留出处。 作者主页:www.sysin.org 此次发布更新了什么?答:版本号,当然还有… 2021.09.01 更新,微软官方确认该版本为正式版:Wi

    2024年02月07日
    浏览(48)
  • Windows Server 2016 中文版、英文版下载 (updated Mar 2023)

    Windows Server 2016 Version 1607,2023 年 3 月更新 请访问原文链接:https://sysin.org/blog/windows-server-2016/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org 本站将不定期发布官方原版风格月度更新 ISO。 Microsoft Windows Server 2016 Windows Server 是连接本地环境与 Azure 的操作系统

    2024年02月06日
    浏览(44)
  • Windows Server 2019 中文版、英文版下载 (updated May 2023)

    Windows Server 2019 Version 1809,2023 年 5 月更新 请访问原文链接:https://sysin.org/blog/windows-server-2019/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org 本站将不定期发布官方原版风格月度更新 ISO。 Windows Server 2019 Version 1809,updated 2023.05 Microsoft Windows Server 2019 Windows

    2024年02月13日
    浏览(35)
  • Windows Server 2019 中文版、英文版下载 (updated Mar 2023)

    Windows Server 2019 Version 1809,2023 年 3 月更新 请访问原文链接:https://sysin.org/blog/windows-server-2019/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org 本站将不定期发布官方原版风格月度更新 ISO。 Microsoft Windows Server 2019 Windows Server 2019 是连接本地环境与 Azure 的操作系

    2024年02月04日
    浏览(31)
  • Visual Studio 2022安装教程(英文版)

    官网地址:https://visualstudio.microsoft.com/zh-hans/vs/ 选择第一个社区版本:Community 2022 1.将下载好的文件保存到桌面,双击点开 2.等待visual studio installer配置好 3.点击安装后会来到配件选择模块 4.这里根据自己需求选择就好,我需要使用F#语言进行开发,并且需要使用到前端,故勾

    2024年02月13日
    浏览(32)
  • Windows 11 22H2 (2022 年更新) 发布,简体中文版、英文版下载

    2022 年 9 月 20 日 今天,Windows 11 2022 更新在 190 多个国家/地区推出。 随着去年 Windows 11 的推出,我们对 PC 进行了现代更新,让您可以更快、更轻松地完成您最依赖于 PC 的任务。我们在家庭和工作场所的 Windows 中添加了内置的基础安全性,以帮助确保您的安全,并且 通过 Wi

    2024年02月09日
    浏览(46)
  • Windows 11 简体中文版、英文版 (x64、ARM64) 下载 (updated Jun 2022)

    Windows 11 正式版,2022 年 6 月更新 请访问原文链接:https://sysin.org/blog/windows-11/,查看最新版。原创作品,转载请保留出处。 作者主页:www.sysin.org 全新 Windows 体验,让您与热爱的人和事物离得更近。 获得全新视角 Windows 11 提供一个让人平静而富有创意的空间,全新体验引导您

    2024年02月03日
    浏览(39)
  • 【书籍】强化学习第二版(英文版电子版下载、github源码)-附copilot翻译的中英文目录...

    英文原版书籍下载:http://incompleteideas.net/book/the-book-2nd.html 作者: 理查德·S·萨顿是阿尔伯塔大学计算机科学教授和强化学习与人工智能 AITF 主席,也是 DeepMind 的杰出研究科学家。 安德鲁·G·巴托是马萨诸塞大学阿默斯特分校计算机与信息科学学院的荣誉退休教授。 描述:

    2024年01月18日
    浏览(38)
  • Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Jan 2023)

    Windows 11, version 22H2,2023 年 1 月 更新,持续更新中 … 请访问原文链接:https://sysin.org/blog/windows-11/,查看最新版。原创作品,转载请保留出处。 作者主页:www.sysin.org 👉 Available today: The Windows 11 2022 Update (September 20, 2022) 👉 Windows 11: A new era for the PC begins today 👉 Announcing Wind

    2024年02月07日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包