基于js的APP多語言處理

lakeside 發布于2019-08-26 18:36 / 3484人閱讀

摘要：本期分享一個的多語言處理插件，此插件是基于修改而來的。實現的原理就是在本地放置一個或多個語言資源文件，然后通過加載這些資源文件并反序列化成對象，再根據資源文件中定義的鍵名去替換頁面中需要顯示的地方。

本文出自APICloud官方論壇，
感謝論壇版主哼哼哈兮的分享。

本期分享一個js的多語言處理插件i18n.js，此插件是基于JQuery.i18n.properties修改而來的。?

實現的原理就是在本地放置一個或多個語言資源文件，然后通過js加載這些資源文件并反序列化成json對象，再根據資源文件中定義的鍵名去替換頁面中需要顯示的地方。?
再說說用法：?1、在頁面中引入i18n.js，加載后會給window對象增加一個名叫 i18n 的屬性，是個對象。?2、加載資源文件
?
i18n.init({
?name:?name,?//?資源文件名稱，默認為Layout
?language:?lang,?//?語言名稱，格式規范為：{語言}_{區域}或{語言}，如zh_CN,zh,en,en_US
?path:?"widget://res/lang/",?//?資源文件路徑，默認值為：widget://res/lang/5. ???? mode:?"map", //?加載的語言資源是以何種形式返回，js 對象變量或map，默認值：vars
?debug:?api.debug,??//?是否開啟調試模式
?callback:?fnComplete?//?資源文件加載后的回調函數
?});
復制代碼

3、資源文件加載完成后，會在 i18n.localize 對象中得到加載結果。如資源文件名為默認的Layout，則會得到 i18n.localize.Layout這個對象，它是一個包含資源文件中所有鍵值對信息的對象，屬性名為資源文件中的鍵名，屬性值為資源文件中的鍵值。
4、資源文件名稱為 xxx.res, 如Layout.res, Layout_zh.res或Layout_zh_CN.res
??內容格式如：

#這里是注釋內容，i18n.init執行加載時會忽略
text_1=?某個中文字符
text_2=還是中文
復制代碼
想了解更多詳情的可以參看JQuery.i18n.properties 文檔

最后附上一個相對完整的處理流程，以供參考，也歡迎有更好的建議提出。??APP啟動時獲取語言偏好設置：

var lang = api.getPrefs({

        sync: true,
        key: "language"
    });
    if (!lang) {
        // 初次進來選系統語言
        var sysLang = navigator.language.replace("-", "_");
        for (var i = 0; i < App.consts.languages.length; i++) {
            if (App.consts.languages.value === sysLang) {
                lang = App.consts.languages;
                break;
            }
        }
        // 如果系統語言不在支持的語言中，所默認置為支持語言的第一個
        if (!lang) {
            lang = App.consts.languages[0];
        }
        api.setPrefs({
            key: "language",
            value: JSON.stringify(lang)
        });
    } else {
        lang = JSON.parse(lang);

????????}
根據獲取的語言加載對應的資源文件：
// 加載布局所需語言資源文件

    var layout = App.getLayoutRes();
    if (!layout) {
        App.loadLanguage(lang.value, "Layout", function() {
            App.setLayoutRes(i18n.localize.Layout);
        });

????????}
最后用加載出來的結果去替換頁面中需要根據語言顯示的地方，不管是用模板引擎也好還是一個個去獲取html元素后修改innerTEXT都行：

               
                
            


    // js中利用模板引擎替換顯示內容
    $api.html($api.byId("vipFeature"), template("tpl-vip-feature", layout));

如果要替換的內容很少，也可以

默認顯示內容

// js中直接替換html元素的innerTEXT
$api.text($api.byId("btnNext"),?layout.text_1);

至此，這個插件基本的應用應該是沒有什么問題了。

GPU云服務器云服務器 app多語言 JS多語言基于js的語音處理多語言

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110271.html

基于Vue、vue-i18n實現國際化（多語言）

摘要：在中引入調用第三方插件新建一個對象默認語言配置語言選項是一個配置語言包文件和語言選項的文件，文件內容大致如下語言包列表合并語言包是一個函數，判斷當前設置的語言類型，如果沒有設置語言，則根據判斷是中文還是非中文，非中文則顯示英語。 vue-i18n官網 https://kazupon.github.io/vue... 項目用vue-cli構建，用到vue全家桶及webpack、iview...

smallStone 2019-08-23 14:30 評論0 收藏0
如何讓一個vue項目支持多語言（vue-i18n）

摘要：引入是一個插件，主要作用就是讓項目支持國際化多語言。所以新建一個文件夾，存放所有跟多語言相關的代碼。目前包含三個文件。全局搜索發現一共有多個。這兩天手頭的一個任務是給一個五六年的老項目添加多語言。這個項目龐大且復雜，早期是用jQuery實現的，兩年前引入Vue并逐漸用組件替換了之前的Mustache風格模板。要添加多語言，不可避免存在很多文本替換的工作，這么龐雜的一個項目，怎么才能使...

wuyumin 2019-08-22 17:31 評論0 收藏0
vue 國際化i18n 多語言切換

摘要：如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。安裝 npm install vue-i18n 新建一個文件夾 i18n ，內新建 en.js zh.js index.js 三個文件準備翻譯信息 en.js export default { home: { helloworld: hello workd ！ } }; zh.js export d...

tuomao 2019-04-23 13:19 評論0 收藏0
記一次開源學習--D2Admin 人人企業版

摘要：前言上個月月底開源組開源了使用適配人人企業版專業版的前端工程具體詳情見人人企業版適配發布。當然，也督促自己產出一篇相關的文章，來記錄這次有趣的學習之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上個月月底@D2開源組開源了使用 D2Admin 適配人人企業版(專業版) 的...

notebin 2019-05-21 19:46 評論0 收藏0
React項目國際化(antd)多語言開發

摘要：本國際化方案僅針對技術棧，且不會涉及服務端國際化內容。引入多語言環境的數據雖然我只用到了文本翻譯的功能，以為就不需要加載這些數據，但后來發現這是必須的步驟。前言最近新接了一個項目，從0開始做，需要做多語言的國際化，今天搞了一下，基本達到了想要的效果，在這里簡單分享下： showImg(https://segmentfault.com/img/bVbuiJB); 背景國際化方案國際...

tracymac7 2019-08-02 15:21 評論0 收藏0