1、离线 H5APP
2、在线 H5页面(不方便服务器端做翻译)
开发: 王员外
1.0.0
~ H5LangReady之前表示lang 语言包加载完毕,现在表示 翻译完毕
+ 增加 H5Lang.version 对象
0.0.2
~ 修复 获取语言版本缺陷
0.0.1
+ 语言中的变量替换
+ 自定义语言包路径
+ 修改默认语言
+ 多语言在同一页面共存 _H5Lang_['en']
+ 语言包内链页面方式
1、在页面中引入 /dist/x.x.x.js
2、在项目 根目录建立文件夹:
/i18n/
en.js //英文版
zh-Hans.js //简体中文
zh-Hant.js //**繁体
zh-HK.js // 香港繁体
3、修改你的项目即可
Uglify 压缩后:~ 3K
i18n/ 放语言包
zh-Hans.js 简体中文
zh-Hant.js **繁体
zh-HK.js 香港港繁体
en.js 英文
js/
lang.js 处理语言包主逻辑
zh-Hans :简体中文
zh-Hant : **繁体
zh-HK : 香港港繁体
en : 英文
< body data-lang-config="{
packType : 'file', //语言包存在方式 : [ file | inline ]
baseUrl : './i18n/', // 语言包相对路径,如果 packType === inline ,不需要配置此项
defaultLang : 'zh-Hans' //默认,兜底
} >
HTML 中:
给标签增加 : data-lang 属性。比如:<div data-lang="^_^"></div> (在语言包中,"^_^" : "你好")
语言包的 键名 由开发者自己定义
Javascript 中:
获取语言: H5Lang.get('^_^')
改变、增加一条翻译:H5Lang.set('^_^', '你好啊啊啊' )
模板 中:
模板中的文字,需要把文字改为变量,并在 Javascript 中替换模板的时候 调用 :H5Lang.get('^_^')
template.replace({
hello : H5Lang.get('^_^')
});
由于是 HTML 页面初始时,文字部分是空的,翻译替换会让文字显示延后接近100ms,所以页面初始时应该这样:
HTML:
<div data-lang="^_^">
<span class="lang-default">你好</div>
</div>
CSS:
/* js 会为 <body> 增加 .body-lang-<语言版本> ,可以根据具体情况做优化 */
.body-lang-zh-Hans .lang-default{ visibility: visible; }
.lang-default{ visibility: hidden; }
这样会为中文简体版 节省 五六十 ms,并且不影响非 简体中文版的显示
语言包是异步加载,所以如果依赖于语言包的业务逻辑,可以:
H5LangReady(function(){
H5Lang.set('aaa', '1234');
console.log( H5Lang.get('^_^') );
//获取语言版本
console.log( H5Lang.type );
});
<input />、<textarea/> 都支持:data-lang-placeholder 属性
所有标签支持 data-lang-title 属性
Demo:
<input data-lang-placeholder="^_^" data-lang-title="bbb" data-lang="aaa" />
支持 <img/> 多语言版本,使用方法:<img data-lang="ad_img" />
支持 alt属性: <img data-lang-alt="ad_img" data-lang-title="bbb" />
支持 有 lazyLoad 功能的图片。
会在 <html/> 上增加 : dir="rtl" lang="ar"
比如翻译语言:
lang-key 简体中文
-------- ------------------------
我的余额 我的余额{%s}元,冻结{%s}元
在js中 ,这里有两种用法:
1、【变量按照顺序替换】
翻译语言:我的余额{%s},其中被冻结资金{%s}
H5Lang.get('我的余额', 100 , 20 )
翻译语言中有 变量占位符 {%s} 的数量、排序 和 H5Lang.get() 对应 。
注意 :必须是 {%s} 这个字符串
2、【变量名替换】
翻译语言:我的余额{%money},其中被冻结资金{%冻结资金}
H5Lang.get('我的余额2', {
'money' : 100,
'冻结资金' : 20
})
推荐:使用方案 2(不同语言中的变量,顺序可能不同).
模板中,这样标记: @lang( key )
<script type="text/html" id="tpl1">
<article>
<h2>@lang (我)))))), @lang( 我 )</h2>
<p><img data-src="@lang( 广告图片 )" /></p>
</article>
</script >
会被替换为
<script type="text/html">
<article>
<h2>周星驰,周星驰</h2>
<p><img data-src="https://i.alipayobjects.com/i/ecmng/png/201411/3qC7hSbxuv.png" /></p>
</article>
</script>
自动区分 <input/>、<textarea/>、<div/>
<style /> 可以利用语言包 加入不同 内联 css 样式
<script />、<iframe/> data-lang : src
<base> data-lang : href
<link/>(css,icon) data-lang : href
<embed/> 不支持,请自行处理
另外支持 <canvas/>、<comment/>、<noscript/>、<noembed/> 等
本计划支持:data-lang-* 替换成 : *
实际测试发现,大量遍历属性,一个小页面会被 Block 60ms 以上
因为依赖于js,所以 <title/> 的显示也会延迟一些。