微信小程序中英文切换miniprogram-i18n-plus

原生微信小程序使用 miniprogram-i18n-plus

第一步:

npm install miniprogram-i18n-plus -S

安装完成后,会在项目文件文件夹 node_modules文件里生成 miniprogram-i18n-plus, 然后在工具栏-工具-构建npm,然后看到miniprogram_npm里面有一个miniprogram-i18n-plus

第二步:

在app.js文件中设置  进入小程序判断有无存储在storage 的语言,没有的话就获取系统当前语言是什么语言,有就拿已存储设置得语言

import storage from './utils/storage';   // 自定义得缓存文件
import setLanguage from "./i18n/index";  // 引入得 miniprogram-i18n-plus 处理得文件
let language = "en_US"; // zh_CN en_US   // 默认得语言
App({onLaunch() {// 判断有无存储在storage 的语言,没有的话就获取系统当前语言是什么语言,有就拿已存储的if(storage.get('language')) {language = storage.get('language')} else {wx.getSystemInfo({success:(res)=> {if(res.language === 'en') {language = 'en_US'}else {language = 'zh_CN'}storage.set('language', language)}})}setLanguage.setLanguage();},globalData: {statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],}
})

在文件中创建一个i18n文件夹,里面创建index.js文件和中文语言文件zh.js和英文文件en.js,

index.js文件代码

import i18nInstance from "../miniprogram_npm/miniprogram-i18n-plus/index";  //引入得插件
import storage from '../utils/storage';  // 缓存文件
import en_US from './en';                // 英文文件
import zh_CN from './zh';                // 中文文件
function setLanguage () {const locales = {...zh_CN,...en_US};// 更改语言let language= storage.get('language')  // 语言缓存i18nInstance.setLocale(language);        i18nInstance.loadTranslations(locales);
}
module.exports = {setLanguage: setLanguage
}

en.js 文件 

const languageMap = {"title": 'Must-Read for Beginners ',"tips": 'Hot Topic ',
}
module.exports = {en_US: languageMap
}

zh.js 文件

const languageMap = {title: '新手必读',tips: '热门话题',
}
module.exports = {zh_CN: languageMap
}

第三步:

在文件中使用 需要引入  miniprogram-i18n-plus  在data 中定义 

i18n: i18nInstance.getLanguage()
import { i18nInstance } from "../../miniprogram_npm/miniprogram-i18n-plus/index";Page({data: {i18n: i18nInstance.getLanguage()}
})

也可以使用官网得方法  在onLoad 函数中设置

Page({data: {language: {},},onLoad() {i18nInstance.effect({context: this,callback: this.setLanguage,});},setLanguage() {this.setData({language: i18nInstance.getLanguage(),});},
});

最后:

在文件中调用  index.wxml  

<view> {{i18n.title}} </view>

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

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

相关文章

LeetCode 127:单词接龙

LeetCode 127&#xff1a;单词接龙问题本质&#xff1a;最短转换序列的长度 给定两个单词 beginWord 和 endWord&#xff0c;以及字典 wordList&#xff0c;要求找到从 beginWord 到 endWord 的最短转换序列&#xff08;每次转换仅改变一个字母&#xff0c;且中间单词必须在 wo…

docker搭建ray集群

1. 安装docker 已安装过docker 没安装流程 启动 Docker 服务&#xff1a; sudo systemctl start docker sudo systemctl enable docker # 设置开机即启动docker验证 Docker 是否安装成功&#xff1a; docker --version2. 部署ray # 先停止docker服务 systemctl stop docker…

【iOS】SideTable

文章目录前言1️⃣Side Table 的核心作用&#xff1a;扩展对象元数据存储1.1 传统对象的内存限制1.2 Side Table 的定位&#xff1a;集中式元数据仓库2️⃣Side Table 的底层结构与关联2.1 Side Table 与 isa 指针的关系2.2 Side Table 的存储结构2.3 SideTable 的工作流程3️⃣…

【Spring Cloud Gateway 实战系列】高级篇:服务网格集成、安全增强与全链路压测

一、服务网格集成&#xff1a;Gateway与Istio的协同作战在微服务架构向服务网格演进的过程中&#xff0c;Spring Cloud Gateway可与Istio形成互补——Gateway负责南北向流量&#xff08;客户端到集群&#xff09;的入口管理&#xff0c;Istio负责东西向流量&#xff08;集群内服…

一文说清楚Hive

Hive作为Apache Hadoop生态的核心数据仓库工具&#xff0c;其设计初衷是为熟悉SQL的用户提供大规模数据离线处理能力。以下从底层计算框架、优点、场景、注意事项及实践案例五个维度展开说明。 一、Hive底层分布式计算框架对比 Hive本身不直接执行计算&#xff0c;而是将HQL转换…

SeaweedFS深度解析(三):裸金属单机和集群部署

#作者&#xff1a;闫乾苓 文章目录2.2.4 S3 Server&#xff08;兼容 Amazon S3 的接口&#xff09;2.2.5 Weed&#xff08;命令行工具&#xff09;3、裸金属单机和集群部署3.1 裸金属单机部署3.1.1安装 SeaweedFS3.1.2 以Master模式启动2.2.4 S3 Server&#xff08;兼容 Amazon…

相机ROI 参数

相机的 ROI&#xff08;Region of Interest&#xff0c;感兴趣区域&#xff09; 参数&#xff0c;是指通过设置图像传感器上 特定区域 作为有效成像区域&#xff0c;从而只采集该区域的图像数据&#xff0c;而忽略其他部分。这一功能常用于工业相机、科研相机、高速相机等场景&…

Vue基础(24)_VueCompinent构造函数、Vue实例对象与组件实例对象

分析上一节代码中的school组件&#xff1a;该组件是一个名为VueCompinent的构造函数。截取部分vue.js源码&#xff0c;分析Vue.extend&#xff1a;// 定义一个名为VueComponent的构造函数对象Sub&#xff0c;往Sub对象调用_init(options)方法&#xff0c;参数为配置项&#xff…

萤石云替代产品摄像头方案萤石云不支持TCP本地连接-东方仙盟

不断试错东方仙盟深耕科研测评&#xff0c;聚焦前沿领域&#xff0c;以严谨标准评估成果&#xff0c;追踪技术突破&#xff0c;在探索与验证中持续精进&#xff0c;为科研发展提供参考&#xff0c;助力探路前行 萤石云价格萤石云的不便于使用 家庭场景&#xff1a;成本可控与隐…

C51:用DS1302时钟读取和设置时间

因为在ds1302.c文件中包含了写ds1302&#xff08;51向ds1302写数据&#xff09;和读ds1302&#xff08;51从ds1302读数据&#xff09;的两个函数&#xff0c;我们根据文件中提供的函数来写读取时间和设置时间的函数即可ds1302.c文件源码如下&#xff0c;需要的同学可以参考一下…

webrtc整体架构

WebRTC&#xff08;Web Real-Time Communication&#xff09;是一套支持浏览器和移动应用进行实时音视频通信的开源技术标准&#xff0c;其架构设计围绕 “实时性”“低延迟”“跨平台” 和 “安全性” 展开&#xff0c;整体可分为核心引擎层、API 层、支撑服务层三大部分&…

浅析PCIe 6.0 ATS地址转换功能

在现代高性能计算和虚拟化系统中,地址转换(Address Translation)是一个至关重要的机制。随着 PCIe 设备(如 GPU、网卡、存储控制器)直接访问系统内存的能力增强,设备对虚拟内存的访问需求日益增长。 为了提升性能并确保安全访问,Address Translation Services(ATS) 应…

【前端】ikun-pptx编辑器前瞻问题二: pptx的压缩包结构,以及xml正文树及对应元素介绍

文章目录PPTX文件本质&#xff1a;一个压缩包核心文件解析1. 幻灯片内容文件 (ppt/slides/slideX.xml)2. 元素类型解析文本框元素 (p:sp)图片元素 (p:pic)单位系统开发注意事项参考工具pptx渲染路线图PPTX文件本质&#xff1a;一个压缩包 PPTX文件实际上是一个遵循Open XML标准…

分布式任务调度实战:XXL-JOB与Elastic-Job深度解析

告别传统定时任务的局限&#xff0c;拥抱分布式调度的强大与灵活 在现代分布式系统中&#xff0c;高效可靠的任务调度已成为系统架构的核心需求。面对传统方案&#xff08;如Timer、Quartz&#xff09;在分布式环境下的不足&#xff0c;开发者急需支持集群调度、故障转移和可视…

Windows 11下纯软件模拟虚拟机的设备模拟与虚拟化(仅终端和网络)

Windows 11下用GCC的C代码实现的虚拟机需要终端输入/输出&#xff08;如串口或虚拟控制台&#xff09;和网络连接&#xff0c;但不需要完整的硬件设备&#xff08;如磁盘、显卡、USB 等&#xff09;。在终端输入/输出方面&#xff0c;参考qemu的源代码&#xff0c;但不调用qemu…

CCF-GESP 等级考试 2025年6月认证Python六级真题解析

1 单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09;第1题 下列哪一项不是面向对象编程&#xff08;OOP&#xff09;的基本特征&#xff1f;&#xff08; &#xff09;A. 继承 (Inheritance) B. 封装 (Encapsul…

C++中的deque

1. 什么是 Deque&#xff1f; 核心概念&#xff1a; Deque 是 “Double-Ended Queue”&#xff08;双端队列&#xff09;的缩写。你可以把它想象成一个可以在两端&#xff08;头部和尾部&#xff09;高效地进行添加或删除操作的线性数据结构。关键特性&#xff1a; 双端操作&am…

GNU到底是什么,与Unix和Linux是什么关系

GNU&#xff08;发音为 /ɡnuː/&#xff0c;类似“革奴”&#xff09;是一个自由软件操作系统项目&#xff0c;由理查德斯托曼&#xff08;Richard Stallman&#xff09;于1983年发起&#xff0c;目标是创建一个完全由自由软件组成的类Unix操作系统。它的名字是一个递归缩写&a…

双指针算法介绍及使用(下)

在上一篇文章中我们已经对双指针有了一定了解&#xff0c;接下来我们通过题目来对双指针进行更好的理解。 1. leetcode 202. 快乐数 这道题使用的方法是快慢指针&#xff0c; 比如说一个数X&#xff0c;那么创建两个变量X1和X2&#xff0c;然后X1每次变化两次&#xff0c;X2变化…

Elasticsearch整合:Repository+RestClient双模式查询优化

Elasticsearch整合&#xff1a;RepositoryRestClient双模式查询优化Elasticsearch 双模式查询优化&#xff1a;Repository RestClient 整合指南一、架构设计&#xff1a;双模式协同工作流二、Repository 模式&#xff1a;快速开发最佳实践2.1 基础配置2.2 高级特性&#xff1a…