需求
可手动设置使用语言
根据不同的语言显示不同的语言文字(目前是支持中英文,如需其他语言,可直接配置即可)
如果没有配置相应语言的信息,则使用默认的数据
国际化分为文字和图片(有的图片上有文字信息)两类
限制因素
地图上的图片(如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投稿。
|