H5快應用國際化

案例背景

最近在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