uniapp,小程序国际国际化

i18n-pro国际化自动编译
node 版本 v14.6.0

https://github.com/i18n-pro/core/blob/v2.0.0/docs/dist/USAGE_zh-CN.md git 使用
案例

  1. 项目中安装
    npm i i18n-pro

或者

yarn add i18n-pro

或者

pnpm i i18n-pro

npx i18n init
命令执行成功后会在当前目录下生成一个 i18nrc.js 的文件,默认配置如下:
在这里插入图片描述
在执行翻译前面需要配合文档接入对应的翻译厂商去获取key,我上面是用的腾讯 ,注意node版本,在上面我就是node版本不对导致初始化失败了

在项目中如何引入呢 根目录下创建i18n.js
在这里插入图片描述

// i18n.js
import { initI18n } from 'i18n-pro'

const {
  t,
  setI18n,
  withI18n,
} = initI18n({
  // 命名空间属性是必须配置的
  namespace: 'testI18N',
})

// 这里可以挂载 API 到全局对象上,可以避免不同模块都需要通过 import 来引入 API
// 注意:如果当前你是在某个独立的第三方库或者组件中使用 i18n-pro,不推荐这样做,可能会造成你的用户 API 命名冲突
// 浏览器环境,注意:如果是 Node 环境需要将 window 替换成 global 
//#ifdef H5
window.t = t
// console.log("window.t",window.t)
window.setI18n = setI18n
window.withI18n = withI18n
// #endif



// 不挂载 API 到全局对象上的话,需要导出 API 以便于其他模块能使用对应 API
export {
  t,
  setI18n,
  withI18n,
  initI18n
}

main.js配置


切记 小程序中无法写入window Object.defineProperty(Object.prototype, “t”,{}}才能写入 不然后续无法调用,我在这儿被坑了半天


// i18n.js
import {t,setI18n} from './i18n.js'
Vue.prototype.t = t
//这里h5可以正常使用
// #ifdef MP-WEIXIN
Object.defineProperty(Object.prototype, "t", {
  value: t,
  configurable: false,
  enumerable: false,
});

Object.defineProperty(Object.prototype, "setI18n", {
  value: setI18n,
  configurable: false,
  enumerable: false,
});

// #endif
// 导入资源包
import en from './i18n/en_US.json'
import zh from './i18n/zh_CH.json'
import zh_TW from './i18n/zh-TW.json'
// 默认中文
//我这里存的本地缓存的
let lang = 'zh';

const storeLang=app.vuex_lang;
if(storeLang!=null &&  storeLang!='' && storeLang.key!=null && storeLang.key!=''){
  lang=storeLang.keyPrefix2;
}

setI18n({
  locale: lang,
  langs:{
    zh,
    zh_TW,
	en
    // ... 其他更多语言
  },
})
//小程序额外配置

接下就是先在代码中替换
在第一个配置文件中我设置的方法别名为 FunName t
在这里插入图片描述
在页面中使用
在这里插入图片描述
在页面替换完毕后 需要在项目根目录下执行 命令

翻译命令
npx i18n t
命令执行成功的话,会在指定的目录下生成语言包文件
在这里插入图片描述
下次新增,在次执行就好了,它是增量添加
在这里插入图片描述
在这里插入图片描述
接着说如何切换 我这里封装了一个切换组件但是切换需要调用的方法后有一点细微差别 h5 用reload(),小程序重新跳转当前页面即可刷新

setI18n({
locale:e.keyPrefix2,
});
this.outShow=!this.outShow;
//#ifdef H5
window.location.reload();
//#endif

//#ifdef MP-WEIXIN
 wx.redirectTo({
	 url:'xxxx',
 })
//#endif
  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值