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

已经重新优化代码做成了组件,需要可自取:https://github.com/CrystalCAI11/wechat-language-compoment

所有操作都打包在组件里不需要在额外的地方添加代码,直接在你需要的页面里导入组件,再在对应页面的onLoad()里set文本就行了。

bash 复制代码
onLoad() {
    this.setData({
      content: wx.getStorageSync('content')
    })
  }

第一步,找个地方新建中英文两个字典,我是放在utils下面

字典内容如下en.js

bash 复制代码
let en = {
  text1: 'text1',
  text2: 'text2',
  text3:'text3',
  text4:'text4',
}

module.exports = {
  content: en
}

zh.js

bash 复制代码
let zh = {
  text1: '文本1',
  text2: '文本2',
  text3:'文本3',
  text4:'文本4',
}

module.exports = {
  content: zh
}

第二步,把切换语言的两个函数放在app.js里

bash 复制代码
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()重启首页,才能获取新的语言文本。

bash 复制代码
<!--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

bash 复制代码
  changeLanguage() {
    app.changeLanguage()
    wx.reLaunch({
      url: '/pages/index/index',
    })
  },

第四步,给所有页面的onShow()里都加上如下代码,然后别忘了把原本的文本都改成{{content.xxx}}这样的形式,就搞定啦。

bash 复制代码
  onShow() {
    this.setData({
      content: app.globalData.content,
    })
  },
相关推荐
维他AD钙2 分钟前
前端基础避坑:3 个实用知识点的简单用法
前端
journs3 分钟前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙3 分钟前
elpis项目DSL设计分享
前端
李李记4 分钟前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞5 分钟前
快速掌握 ProseMirror 的核心概念
前端
ygria9 分钟前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
墨渊君2 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu2 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z2 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行2 小时前
Android 15边到边模式
前端