[Huawei Developers] Freemind R:
More information like this, you can visit HUAWEI Developer Forum​

Original link: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0202341042270230096&fid=0101187876626530001

Introduction

Well, there are a number of reasons to love Quick Apps. Some of the major ones are the fact that they don’t need to be installed and at most can take 10 MBs of storage on your phone.

In this article I will not be discussing the setup of a project and the basics, so if you still want to know more on the facts and basics, please check-out this series of articles in the references setion below.

In this article I will be focusing integrating location kit with your Quick Apps in order to filter your content for your users based on their geographical location; and using system APIs to check the type of the network so that you can give your users the option to download content over WIFI or Cellular data.

Well, enough chit-chat and let’s look at some code.

Steps to follow:

1. Create project (refer to the articles in the reference)

2. Add system API declarations

3. Import the interfaces to the page you’ll be using

4. Call the interfaces you need.

Adding the location kit:

Step one: Declaring the system interface:

Add the following configuration to the features object in the manifest.json file.

{
"name": "system.geolocation"
}

Step two: Importing the interface:

Add the following configuration to the <script> on the page where you will be using the interface.

import geolocation from '@system.geolocation'

Now that the setup is done, let’s look at the interfaces that we can use.

Note: At the moment there is limited functionality available outside mainland China.

But don’t sweat it. There is still quite a bit you can do with this interface.

Step three: Call the interfaces you need

1. Getting the user’s current location:

geolocation.getLocation({
success: function (data) {
self.locationData = {
longitude: data.longitude,
latitude: data.latitude,
altitude: data.altitude,
time: data.time,
speed: data.speed,
accuracy: data.accuracy,
}
},
fail: function (data, code) {
console.log('handling fail, code = ' + code);
}
});

2. Monitoring to the user’s location for an extended period of time:

geolocation.subscribe({
callback: function (data) {
self.locationData = {
longitude: data.longitude,
latitude: data.longitude,
altitude: data.altitude,
time: data.time,
speed: data.speed,
accuracy: data.accuracy,
}
},
fail: function (data, code) {
console.log('handling fail, code = ' + code);
}
});

3. Canceling the monitoring of the user’s location:

geolocation.unsubscribe();

Aside: Interesting thing to try is use the openLocation() interface – which actually works even though it is officially only supported in Chinese mainland. Awesome stuff I tell you.

Now looking at the Network Status system API.

This API allows you to get the type of network the user is using and you can subscribe to it so that you can prompt the user to download using their cellular data or wait for a WIFI connection.

The declaration and import of this interface is similar to the one above.

Step one: Declaring the system interface:

In the manifest.json file, below the geolocation interface add:

{
"name": "system.network"
}

Step two: Importing the interface:

And in the <script> on the page where you intend to use it, add:

import network from '@system.network';

Now,

Step three: Call the interfaces you need

1. Get the network type: (WIFI/2G/3G/4G/none):

network.getType({
success: function (data) {
self.netwrk = data;
}
});

2. Subscribe to the network to monitor changes in the network type:

network.subscribe({
callback: function (data) {
self.netwrk = data;
}
});

3. And of course, unsubscribe to the network monitoring:

network.unsubscribe();

Code Example

So here is some code for a page that demonstrates the use of some of the interfaces above:

HTML5 Template

<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<div class="container">
<text class="title">Status</text>
</div>
<div class="info">
<label>Longitude: </label>
<text>{{ locationData.longitude }}</text>
</div>
<div class="info">
<label>Latitude: </label>
<text> {{ locationData.latitude }}</text>
</div>
<div class="info">
<label>Altitude: </label>
<text> {{ locationData.altitude }}</text>
</div>
<div class="info">
<label>Time: </label>
<text> {{ locationData.time }}</text>
</div>
<div class="info">
<label>Speed: </label>
<text> {{ locationData.speed }}</text>
</div>
<div class="info">
<label>Accuracy: </label>
<text> {{ locationData.accuracy }}</text>
</div>

<div class="info">
<label>Network Type: </label>
<text> {{ netwrk.type }}</text>
</div>

<div class="bottom">
<input type="button" class="btn" value="Settings" onclick="settings" />
</div>
</div>
</template>

CSS Code

.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #00bfda;
}
.bottom{
padding-top: 200px;
margin-top: 100px;
}
.info{
font-size: 40px;
width: 70%;
}
.title{
font-size: 60px;
}
.btn{
height: 80px;
width: 230px;
font-size: 35px;
margin: 20px;
border-radius: 5px;
background-color: #1e90ff;
color: #ffffff;
}

JS Code

import router from '@system.router';
import network from '@system.network';
import geolocation from '@system.geolocation';

module.exports = {
data: {
componentName: 'SystemInfo',
componentData: {},
locationData: {},
netwrk: {}
},
onInit() {
this.$page.setTitleBar({
textColor: '#00bfda',
backgroundColor: '#00bfda',
backgroundOpacity: 1,
menu: true
});
const self = this;
network.getType({
success: function (data) {
self.netwrk = data;
}
});
geolocation.subscribe({
callback: function (data) {
self.locationData = {
longitude: data.longitude,
latitude: data.latitude,
altitude: data.altitude,
time: data.time,
speed: data.speed,
accuracy: data.accuracy,
}
},
fail: function (data, code) {
console.log('handling fail, code = ' + code);
}
});
},
settings() {
router.push({
uri: '/Settings',
})
},
};

OUTPUT

And this is what the page will look like:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/000/737/864/0080027000000737864.20200829171534.00338230979668814594909451361718:50510918031642:2800:685A8997874668A34A85C8EA75C29E844A5F634DF7468903B05FC77AEA143B7F.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/000/737/864/0080027000000737864.20200829171534.00338230979668814594909451361718:50510918031642:2800:685A8997874668A34A85C8EA75C29E844A5F634DF7468903B05FC77AEA143B7F.png[/IMG]

Conclusion

We have learnt how to implement the location interface and network interface to be able to obtain the user's location and network status.

Well. That’s all for now from me…

References:

Quick App Documentation:

https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickapp-introduction

Series of Quick App articles:

Part One

https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201303613601240080&fid=0101188387844930001

Part Two

https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201333894482540039&fid=0101188387844930001

Part Three

https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201339889439220082&fid=0101187876626530001