案例背景

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