[Huawei Developers] Mayism:
HTML5 Quick App Internationalization

At present, more and more HTML5 apps are released globally on HUAWEI AppGallery as HTML5 quick apps. Apps need to be internationalized to open pages in languages set by users, and this improves user experience. For some websites, their languages are adapted based on dynamic URLs. In this way, you need to implement dynamic loading of URLs in different languages.

1.	Bind a variable.

The value of the src attribute on the web component needs to be bound with a variable and cannot be fixed. The variable to be bound is loadUrl in {{}}, and the variable is defined under the script tag in the .ux file. If you create the project with the IDE H5 App template, you can ignore this step because this step has been completed based on IDE template code.

<!—template part->

<web src="{{loadUrl}}"

</web>

<!—script part -->

export default {

data: {

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

},

2.	Initialize the variable value.

In the onInit() method about the quick app's lifecycle, the system language is obtained through a device API, and the corresponding HTML5 URL is loaded after the language is determined.

onInit: function () {

const device = require("@system.device")

const res = device.getInfoSync();

let local = res.language; // System language.

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 {

// For other languages, use the HTML5 page of the default language.

this.loadUrl = "https://transit.navitime.com/en";

}

},

3.	(Optional) Make quick app languages be updated with system settings.

It is applicable to the scenario where the HTML5 quick app has been started and is running. If the user changes the language in system settings at this time, you can use the settings here to update the language on HTML5 pages. You can also ignore this step, in this way, the user can exit the app and re-enter.

The quick app provides an API for monitoring language configuration changes during runtime. The code for adaptation 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 {

// For other languages, use the HTML5 page of the default language.

this.loadUrl = "https://transit.navitime.com/en";

}

}

},