微信小程序使用多语言
步骤如下:
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.js
、zh.js
、index.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。