H5 fast application internationalization

Case background

In the recent H5 fast application development process, the corresponding H5 dynamic URL needs to be loaded according to the system language. However, the internationalization of the website in my project is based on dynamic URLs, and I need to dynamically load URLs in different languages ​​by myself. For example, when the mobile phone system language is Japanese, open the Japanese webpage; when the system language is simplified Chinese, open the simplified Chinese webpage; when the system language is English, open the English website, as shown in the following figure:

solution

Step 1: Bind variables

The src attribute value of the web component needs to be bound with a variable and cannot be fixedly written. The loadUrl in the following figure {{ }} is a bound variable. The loadUrl is defined under the script tag in the ux file. If it is based on overseas fast applications For the project created by IDE H5 template, this step can be ignored. The IDE template code has already been done for you.

 <!—template部分 -->

       <web src="{{loadUrl}}"

         </web>

      <!—script部分 -->

       export default {

           data: {

              loadUrl: "https://transit.navitime.com/en",

           },

Step 2: Initialize variables

In the fast application life cycle onInit() method, obtain the system local language through the fast application API device interface, and load the corresponding H5 URL after determining the language.

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";
            }
        },

Step three

This step is for the scenario where the H5 Express app is already open and running. If the user goes to the system to switch the language at this time, he hopes that the H5 webpage will also update the corresponding language. If you don’t want to update, you can ignore this step, and the user can exit the application and re-enter.

Quick app provides an interface to monitor language configuration changes during runtime. The adaptation code is as follows:

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";
            }     
            }
        },

to sum up

This case can help developers quickly realize the internationalization of web page loading, and provide a good solution for the global release of H5 fast application.

---

Original link:
https://developer.huawei.com/consumer/cn/forum/topic/0204404985127060222?fid=18
Author: AppGallery Connect