需求
可手動(dòng)設(shè)置使用語言
根據(jù)不同的語言顯示不同的語言文字（目前是支持中英文，如需其他語言，可直接配置即可）
如果沒有配置相應(yīng)語言的信息，則使用默認(rèn)的數(shù)據(jù)
國(guó)際化分為文字和圖片（有的圖片上有文字信息）兩類
限制因素
地圖上的圖片（如markers、controls、polyline等），不能使用網(wǎng)絡(luò)圖片，只能使用本地圖片；所以圖片的話分為本地圖片和網(wǎng)絡(luò)圖片兩種
實(shí)現(xiàn)機(jī)制
目錄結(jié)構(gòu)信息
res
│ resUtils.js
│
├─values
│ img.js
│ strings.js│
├─values_en
│ img.js
│ strings.js
│└─values_zh_CN
strings.js
values中是默認(rèn)的是數(shù)據(jù)配置，values_en是英文壞境下的配置，values_zh_CN中文簡(jiǎn)體環(huán)境下的配置
后面如果需要配置其他的語言（如zh_TW，中文繁體，臺(tái)灣地區(qū)），只需要新建文件名 values_zh_TW即可
resUtils.js是國(guó)際化的核心代碼位置，這個(gè)文件會(huì)根據(jù)不同的語言來引用引用對(duì)應(yīng)的文件；
首次如果沒有設(shè)置過語言，或跟從當(dāng)前手機(jī)的語言環(huán)境，后面如果設(shè)置過語言的話，跟從設(shè)置的語言來（暫定，具體的需求還未出）
具體配置
文字國(guó)際化，直接在對(duì)應(yīng)的環(huán)境下strings.js中添加要用的文字信息，文件會(huì)自動(dòng)導(dǎo)出
-
module.exports = {
LOGIN_STATUS_INVALID: '登錄失效',
LOGIN_LOG_AGAIN: '請(qǐng)重新登錄',
}
module.exports = {
LOGIN_STATUS_INVALID: 'Login status invalid',
LOGIN_LOG_AGAIN: 'Log in again',
}
|
圖片國(guó)際化（分為本地和網(wǎng)絡(luò)圖片兩種）； 網(wǎng)絡(luò)圖片直接調(diào)用getImg('drawableName.png')，即可； 本地圖片，使用絕對(duì)路徑即可
-
/**
* 默認(rèn)環(huán)境圖片配置
* @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'), // 網(wǎng)絡(luò)圖片
ICON_LOCATION: '/imgs/icon_location.png', // 本地圖片
}
/**
* en環(huán)境圖片配置
* @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; // 文字調(diào)用
resUtils.imgs.IC_CHANGE_LANGUAGE； // 圖片調(diào)用
|
注意事項(xiàng)
因wxml 文件不能應(yīng)用js文件，所以數(shù)據(jù)全部通過data進(jìn)行中轉(zhuǎn) data的加載比生命周期要早，導(dǎo)致切換語言的時(shí)候，data數(shù)據(jù)沒有更新；所以在Page和Component中的ready方法之后，手動(dòng)setData一次（因未找到更好的解決方案，暫定這種方式） 附帶[resUtils.js]代碼
-
const localStorage = require('../utils/LocalStorage.js');
/**
* 國(guó)際化* @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) { }
// 初始化默認(rèn)的數(shù)據(jù)
for (let key in defaultStrings) {
if (!defaultStrings.hasOwnProperty(key)) {
continue;
}
this.mStrings[key] = defaultStrings[key];
}
// 如果當(dāng)前語言文件中定義的有，則直接覆蓋
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) { }
// 初始化默認(rèn)的數(shù)據(jù)
for (let key in defaultImgs) {
if (!defaultImgs.hasOwnProperty(key)) {
continue;
}
this.mImgs[key] = defaultImgs[key];
}
// 如果當(dāng)前語言文件中定義的有，則直接覆蓋
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 中文繁體(臺(tái)灣)
* en 英文環(huán)境*/
let env = localStorage.getEnv();
ResUtils.getInstance().init(env);
module.exports = ResUtils.getInstance();
|
|
