为了账号安全,请及时绑定邮箱和手机立即绑定

H5快应用国际化

标签:
Android

案例背景

最近在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快应用全球发布提供了好的解决方案。


作者:AppGallery Connect

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消