## 案例背景

最近在H5快應用開發過程中，需要根據系統語言載入對應的H5動態網址。但我的專案中的網站國際化是根據動態url來實現的，需要我自己實現動態載入不同國家語言的url網址。比如，手機系統語言為日語時，開啟日語網頁；系統語言為簡體中文時，開啟簡體中文網頁，系統語言為英語時，開啟英文網站，如下圖所示：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2020121715311240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201217153118633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201217153125725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

### 解決方案

##### 步驟一：繫結變數
web元件的src屬性值需要用變數繫結，不能固定寫死，如下圖中{{ }}中的loadUrl就是一個繫結變數，loadUrl在ux檔案中script標籤下進行定義，如果是基於海外快應用IDE H5模板建立的工程，此步驟可忽略，IDE模板程式碼都已經幫你搞定了。

```java
 
 
       <web src="http://blog.itpub.net/69970551/viewspace-2743111/%7B%7BloadUrl%7D%7D">
 
      
 
       export default {
 
           data: {
 
              loadUrl: "https://transit.navitime.com/en",
 
           },
```

##### 步驟二：初始化變數

在快應用生命週期onInit()方法中透過快應用API device介面獲取系統地區語言，判斷語言後載入對應的H5網址。

```java
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網頁也要更新相應的語言。如果不想更新，可以忽略此步驟，使用者可以退出應用，重新進入即可。

快應用提供了在執行期間監聽語言配置發生變化的介面，適配程式碼如下：

```java
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](https://developer.huawei.com/consumer/cn/forum/topic/0204404985127060222?fid=18)
作者：AppGallery Connect</web>

H5快應用國際化

相關文章