小程序国际化实现机制
需求
- 可手动设置使用语言
- 根据不同的语言显示不同的语言文字（目前是支持中英文，如需其他语言，可直接配置即可）
- 如果没有配置相应语言的信息，则使用默认的数据
- 国际化分为文字和图片（有的图片上有文字信息）两类
限制因素
- 因小程序2M的限制，所以图片网络化
- 地图上的图片（如markers、controls、polyline等），不能使用网络图片，只能使用本地图片；所以图片的话分为本地图片和网络图片两种
实现机制
- 目录结构信息
res
│ resUtils.js
│
├─values
│ img.js
│ strings.js│
├─values_en
│ img.js
│ strings.js
│└─values_zh_CN
strings.js
- values中是默认的是数据配置，values_en是英文坏境下的配置，values_zh_CN中文简体环境下的配置
- 后面如果需要配置其他的语言（如zh_TW，中文繁体，中国台湾地区），只需要新建文件名 values_zh_TW即可
- resUtils.js是国际化的核心代码位置，这个文件会根据不同的语言来引用引用对应的文件；
- 首次如果没有设置过语言，或跟从当前手机的语言环境，后面如果设置过语言的话，跟从设置的语言来（暂定，具体的需求还未出）
具体配置
- 文字国际化，直接在对应的环境下strings.js中添加要用的文字信息，文件会自动导出
module.exports = {
LOGIN_STATUS_INVALID: '登录失效',
LOGIN_LOG_AGAIN: '请重新登录',
}
module.exports = {
LOGIN_STATUS_INVALID: 'Login status invalid',
LOGIN_LOG_AGAIN: 'Log in again',
}
- 图片国际化（分为本地和网络图片两种）；
- 网络图片直接调用getImg('drawableName.png')，即可；
- 本地图片，使用绝对路径即可
/**
* 默认环境图片配置
* @author Shirley.jiang
*/
const ICON_URL = 'https://***';
let env = 'zh_CN';
let getImg = (name) => {
return ICON_URL + '/' + env + '/' + name;
}
module.exports = {
IC_BTN_PHONE: getImg('btn_phone.png'), // 网络图片
ICON_LOCATION: '/imgs/icon_location.png', // 本地图片
}
/**
* en环境图片配置
* @author Shirley.jiang
*/
const ICON_URL = 'https://***';
let env = 'en';
let getImg = (name) => {
return ICON_URL + '/' + env + '/' + name;
}
module.exports = {
IC_CHANGE_LANGUAGE: getImg('ic_change_language.png')
};
使用方式
const resUtils = require('../../res/resUtils.js'); // 引入
resUtils.strings.LOGIN_STATUS_INVALID; // 文字调用
resUtils.imgs.IC_CHANGE_LANGUAGE； // 图片调用
注意事项
- 因wxml 文件不能应用js文件，所以数据全部通过data进行中转
- data的加载比生命周期要早，导致切换语言的时候，data数据没有更新；所以在Page和Component中的ready方法之后，手动setData一次（因未找到更好的解决方案，暂定这种方式）
附带[resUtils.js]代码
const localStorage = require('../utils/LocalStorage.js');
/**
* 国际化* @author Shirley.jiang
*/
class ResUtils {
static mInstance;
mStrings = {};
mImgs = {};
mEnv;
static getInstance() {
if (!ResUtils.mInstance) {
ResUtils.mInstance = new ResUtils();
}
return ResUtils.mInstance;
}
init(env) {
this.mEnv = env;
this.initStrings();
this.initImgs();
}
/**
* 引用字符配置
*/
initStrings() {
this.mStrings = {};
let strings;
let defaultStrings;
try {
strings = require('./values_' + this.mEnv + '/strings.js');
} catch (err) { }
try {
defaultStrings = require('./values/strings.js');
} catch (err) { }
// 初始化默认的数据
for (let key in defaultStrings) {
if (!defaultStrings.hasOwnProperty(key)) {
continue;
}
this.mStrings[key] = defaultStrings[key];
}
// 如果当前语言文件中定义的有，则直接覆盖
for (let key in strings) {
if (!this.mStrings.hasOwnProperty(key)) {
continue;
}
this.mStrings[key] = strings[key];
}
}
/**
* 引用图片配置
*/
initImgs() {
this.mImgs = {};
let imgs;
let defaultImgs;
try {
imgs = require('./values_' + this.mEnv + '/img.js');
} catch (err) { }
try {
defaultImgs = require('./values/img.js');
} catch (err) { }
// 初始化默认的数据
for (let key in defaultImgs) {
if (!defaultImgs.hasOwnProperty(key)) {
continue;
}
this.mImgs[key] = defaultImgs[key];
}
// 如果当前语言文件中定义的有，则直接覆盖
for (let key in imgs) {
if (!this.mImgs.hasOwnProperty(key)) {
continue;
}
this.mImgs[key] = imgs[key];
}
}
/**
* 切换语言
* @param {string} env 语言值
*/
changeLanguage(env) {
localStorage.setEnv(env);
this.init(env);
}
}
/**
* zh_CN 中文* zh_TW 中文繁体(中国台湾)
* en 英文环境*/
let env = localStorage.getEnv();
ResUtils.getInstance().init(env);
module.exports = ResUtils.getInstance();
感谢《小程序开发一群》的Shirley.jiang投稿。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-08-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读