HTML5 Quick App Website Internationalization - Huawei Developers

Background
I needed to develop a function for dynamically loading HTML5 websites that matched the system language. The website internationalization in my project was implemented by dynamically loading URLs. For example, if the system language of a mobile phone is Japanese, the URLs of web pages in Japanese are loaded. For simplified Chinese, those in simplified Chinese are loaded, and for English, those in English are loaded, and so on. Here, I have listed the steps for your reference.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Solution
Step 1: Bind a variable.
Bind a variable to the src attribute of the web component, to ensure that the attribute will not have a fixed value. In the following code, loadUrl in {{}} is a bound variable. It is defined under script in the UX file. You can skip this step if your project was created using the HTML5 template in Huawei Quick App IDE, downloaded from https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickapp-installtool, because the variable will be bound by the template code.
JavaScript:
<!-- template -->
<web src="{{loadUrl}}"
</web>
<!-- script -->
export default {
data: {
loadUrl: "https://transit.navitime.com/en",
},
Step 2: Initialize the variable.
Use the onInit() method in the quick app’s lifecycle to call the device API to obtain the system language and load the HTML5 page in the obtained language.
JavaScript:
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, the HTML5 page in the default language is used.
this.loadUrl = "https://transit.navitime.com/en";
}
},
Step 3: Add a listener for system language switch.
Perform this step if you want the language on the HTML5 page to change accordingly, as the user changes the system language when the HTML5 quick app is running. You can skip this step if you don’t need to implement this function. The user can simply exit the app and re-enter it.
The code for adding a listener to listen to the system language switch is as follows:
JavaScript:
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, the HTML5 page in the default language is used.
this.loadUrl = "https://transit.navitime.com/en";
}
}
},
Summary
I hope you’ll find this post helpful, when planning the global release of your HTML5 quick app. Feel free to leave a question or comment below, to share your own experiences.

---

It's an easy and useful code.

---

Rebis said:
It's an easy and useful code.
Click to expand...
Click to collapse
Thanks to your liking.