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