乐趣区

关于android:H5快应用国际化

jiezi

案例背景

最近在 H5 快利用开发过程中，须要依据零碎语言加载对应的 H5 动静网址。但我的我的项目中的网站国际化是依据动静 url 来实现的，须要我本人实现动静加载不同国家语言的 url 网址。比方，手机零碎语言为日语时，关上日语网页；零碎语言为简体中文时，关上简体中文网页，零碎语言为英语时，关上英文网站，如下图所示：

解决方案

步骤一：绑定变量

web 组件的 src 属性值须要用变量绑定，不能固定写死，如下图中 {{}} 中的 loadUrl 就是一个绑定变量，loadUrl 在 ux 文件中 script 标签下进行定义，如果是基于海内快利用 IDE H5 模板创立的工程，此步骤可疏忽，IDE 模板代码都曾经帮你搞定了。

 <!—template 局部 -->
 
       <web src="{{loadUrl}}"
 
         </web>
 
      <!—script 局部 -->
 
       export default {
 
           data: {loadUrl: "https://transit.navitime.com/en",},
步骤二：初始化变量

在快利用生命周期 onInit()办法中通过快利用 API device 接口获取零碎地区语言，判断语言后加载对应的 H5 网址。

onInit: function () {const device = require("@system.device")
            const res = device.getInfoSync();
            let local = res.language;  //system lauguage  
            let region = res.region;  //system region
            console.info('onInit :localole=' + local + ", region=" + region);
            if (local === 'zh') {if (region === "CN") {this.loadUrl = "https://transit.navitime.com/zh-cn/";} else if (region === "TW") {this.loadUrl = "https://transit.navitime.com/zh-tw/";}
            } else if (local === 'ja') {this.loadUrl = "https://transit.navitime.com/ja/?from=huawei.quickapp";} else {
                //Other languages can use the default language H5
                this.loadUrl = "https://transit.navitime.com/en";
            }
        },

步骤三

此步骤是针对 H5 快利用曾经关上运行的场景。如果用户此时去零碎设置切换语言，心愿 H5 网页也要更新相应的语言。如果不想更新，能够疏忽此步骤，用户能够退出利用，从新进入即可。

快利用提供了在运行期间监听语言配置发生变化的接口，适配代码如下：

onConfigurationChanged(object) {console.log("onConfigurationChanged object=" + JSON.stringify(object));
            if (object.type === "locale") {const configuration=require("@system.configuration")
                var localeObject = configuration.getLocale();
                let local= localeObject.language;
                let region= localeObject.countryOrRegion;
               console.info(onConfigurationChanged(object :localole= '+ local +", region=" + region);
            if (local === 'zh') {if (region === "CN") {this.loadUrl = "https://transit.navitime.com/zh-cn/";} else if (region === "TW") {this.loadUrl = "https://transit.navitime.com/zh-tw/";}
            } else if (local === 'ja') {this.loadUrl = "https://transit.navitime.com/ja/?from=huawei.quickapp";} else {     
                //Other languages can use the default language H5
                this.loadUrl = "https://transit.navitime.com/en";
            }     
            }
        },

总结

此案例能够帮忙开发者疾速实现网页加载的国际化，为 H5 快利用寰球公布提供了好的解决方案。

原文链接：
https://developer.huawei.com/consumer/cn/forum/topic/0204404985127060222?fid=18
作者：AppGallery Connect

退出移动版