Quick App Multilingual and Deep link - Huawei Developers

I have written series of articles on Quick App. If you are new to Quick App refer my previous articles.
Quick App set up
A Novice Journey Towards Quick App ( Part 2 )
A Novice Journey Towards Quick App ( Part 3 )
Multilingual
When it comes to multilingual we all will have question why should provide multilingual support for application. Let’s clear about it.
How does multilingual supports to get your business out in your neighboring countries? Sounds like a success right? You will ultimately gain more customers, get wider ground covered, revenues skyrocketed and your business grows even larger.
Everybody says that English is universal language in business, always it makes us to forget that not everyone is expert in English.
Advantages of Multilingual
1. Build the new relationship with users.
In any new relationship mother tongue is very important. It will have the different feel. If your application supports regional language users connects so easily.
2. Grow your application reputation globally.
If quick app supports multiple languages, people from different countries and different users for application, so that application reputation grows globally.
Now let’s understand how Quick supports multilingual.
Day to day throughout the world users of quick app are increasing rapidly. Make sure app can be used globally and Huawei quick app supports for multilingual. Quick apps can be properly displayed in different languages, layout adaption in different scripts writing direction is supported.
There are some languages layout supports from left to right like English, Kannda, Hindi, Telugu, Tamil etc. there are some languages which supports from right to left like Urdu.
English, Hindi language has left to right alignment and Urdu has right to left alignment.
{
"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"
}
How to get the layout direction?
Step 1: Add the following configuration to the features attribute in the manifest.json file.
Code:
{
"name": "system.configuration"
}
Step 2: Importing the module: Add the following configuration to the <script> on the page where the interface will be called.
Code:
import configuration from '@system.configuration'
Step 3: Call the configuration.getLayoutDirection() in onInit() to obtain the current script writing direction.
Code:
onInit: function () {
const dir = configuration.getLayoutDirection()
if (dir === "ltr") {
// set style from left-to-right
} else if (dir === "rtl") {
// Set style to right-to-left
}
}
Step 4: Add new language json file in the i18n. It is same as the adding strings file with different languages in android.
What will happen when configuration changes?
When the app configuration changes, for example, the language, country, region, or script writing direction changes. onConfigurationChanged() callback will be called, check whether types contains layoutDirection. If so, the system language changes. In this case, the component layout needs to be adapted based on the current script writing direction. For details about onConfigurationChanged, refer to Life Cycle Interface.
Code:
onConfigurationChanged(e) {
var types = e.types;
if (types.includes('layoutDirection')) {
var direction = configuration.getLayoutDirection()
// Customize the component layout based on the current script writing direction.
}
} }
Setting the Component Display Direction
You can specify the component display direction by setting the dir attribute or style of a component. For details, refer to the description about the dir attribute in Common Attributes and Common Styles. The setting effect of dir for the following components is special.
Code:
<template>
<div>
<div style="width: 600px;padding:50px">
<text style="width: 200px;">show dialog!text>
<image src="{{nextImg}}">image>
div>
div>
template>
<style>
@import "../Common/common.css";
style>
<script>
import configuration from '@system.configuration'
export default {
data: {
nextImg: "/Common/next.png"
},
onInit: function () {
const dir = configuration.getLayoutDirection()
if (dir === "ltr") {
// When the script writing direction is left-to-right, you need to set the attribute or style of the component. For example, you can configure an image as being displayed in the command mode.
this.nextImg = "/Common/next.png";
} else if (dir === "rtl") {
// When the script writing direction is right-to-left, you need to set the attribute or style of the component. For example, you can mirror an image.
this.nextImg = "/Common/next_mirror.png";
}
},
onConfigurationChanged(e) {
var that = this;
var types = e.types;
if (types.includes('layoutDirection')) {
var dir = configuration.getLayoutDirection()
// You can perform customization based on the script writing direction.
if (dir === "ltr") {
// When the script writing direction is left-to-right, you need to set the attribute or style of the component. For example, you can configure an image as being displayed in the common mode.
that.nextImg = "/Common/next.png";
} else if (dir === "rtl") {
// When the script writing direction is right-to-left, you need to set the attribute or style of the component. For example, you can mirror an image.
that.nextImg = "/Common/next_mirror.png";
}
}
}
}
script>
Deeplink
Standard links are provided in the quick apps so that user can tap on the link and open the Quick App. Basically Quick App center is installed you can use the deep links.
Supported deep link formats
1. hap://app/<package>/[path][?key=value]
2. https://hapjs.org/app/<package>/[path][?key=value]
3. hwfastapp://<package>/[path][?key=value]
package: app package name, which is mandatory.
path: path of an in-app page. This parameter is optional. The default value is the home page.
key-value: parameter to be passed to the page. This parameter is optional. Multiple key-value pairs are allowed. The passed parameter values may be obtained by other apps. Therefore, you are advised not to transfer data with high security sensitivity.
Follow the steps
Step 1: Add the following configuration to the features attribute in the manifest.json file.
Code:
{
"name": "system.router"
}
Step 2: Add the following configuration to the <script> on the page where the interface will be called.
Code:
import router from '@system.router'
Step 3: Call deep link in quick app to open another quick app.
Code:
import router from '@system.router'
router.push({
uri: 'hap://app/com.example.quickapp/page?key=value'
})
Step 4: Design web page to load the quick app.
Code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Open Quick App.
</body>
</html>
Step 5: Receive parameters in other page.
Code:
export default {
data:{
name: ""// The output parameter is empty.
}
onInit(){
this.$page.setTitleBar({text:'A'});
this.name; // Use this.name in onInit to receive output parameters.
}
}
Conclusion
In this article, we have learnt how to support multilingual and deep link in Quick App. In upcoming days I will come up with new article.
Reference
Deep link
Multilingual