微信小程序国际化

微信小程序使用多语言

步骤如下:

1.安装

bash 复制代码
npm install Shawn-zhao/mini-i18n

这是从GitHub下载依赖,而不是从https://www.npmjs.com/,所以淘宝镜像是不行的,如果安装失败,请科学上网。如果小程序的项目之前没用使用过npm,则需要先在小程序根目录执行

bash 复制代码
npm init -y

然后再执行

bash 复制代码
npm install Shawn-zhao/mini-i18n

最后需要在小程序开发工具中执行:工具->构建npm,提示构建成功,就可以开始写代码了。构建失败请参考developers.weixin.qq.com/miniprogram...

2.创建语言包

项目根目录创建locales文件夹,在文件夹中创建en.jszh.jsindex.js,前两个文件就是语言包配置。

index.js文件如下:

javascript 复制代码
import zh from './zh';
import en from './en';

export default {
	'zh-Hans': zh,
	en
}

en.js如下:

javascript 复制代码
export default {
  home: {
    text1: "mini-i18n is a js library that implements multi-language mini programs",
    text2: "It is suitable for use in scenarios that seek a universal framework, no third-party dependencies, and no frequent language switching.",
  },
};

zh.js如下:

javascript 复制代码
export default {
  home: {
    text1: "mini-i18n 是一个实现小程序多语言的 js 库",
    text2: "适合寻求框架通用、无三方依赖、且无频繁语言切换的场景使用。",
  },
};

3.小程序中初始化

在app.js的onLaunch中添加如下代码:

javascript 复制代码
import { i18n } from "mini-i18n"
import locales from "./locales/index"

App({
  onLaunch() {
    i18n.init({
      locales,
      lang: 'zh_CN',
      defualtLang: 'zh_CN',
      isHint: true,
      themeColor: '#ff6600',
      homePath: '/pages/index/index'
    })
  }
})

4.在页面中使用

使用t()获取对应的语言内容,如下所示:

javascript 复制代码
import {
  t
} from 'mini-i18n'

Page({
  data: {
    text1: '',
    text2: ''
  },

  onLoad() {
    this.setData({
      text1: t('home.text1'),
      text2: t('home.text2')
    })
  }
})

wxml中

xml 复制代码
<text>{{text1}}</text>
<text>{{text2}}</text>

可以将开发者工具切换为英文版,或者手机微信切换为英文版,查看运行效果。运行结果:

5.其他

代码片段:developers.weixin.qq.com/s/eTlaGim97...

GitHub地址github.com/Shawn-zhao/... ,该项目是从github.com/zhangchao-w... fork过来的,修改了一些bug。如果发现bug需要修改,可以将代码下载下来,然后修改并编译,小程序添加本地依赖(dependencies添加"mini-i18n": "file:D:/xxx/xxx/mini-i18n")并自测通过后发起pull request。

相关推荐
尘浮生35 分钟前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生5 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen7 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
中云DDoS CC防护蔡蔡14 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼17 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857520 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027720 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收