Quick apps are a new form of installation-free apps developed based on industry standards formulated by Quick App Alliance, which consists of mainstream mobile phone manufacturers in China. A quick app can be distributed to all mobile phones that support industry standards without adaptation.
Benefits for you:
In this codelab, you will create a simplified browser using Huawei Quick App IDE, which supports the following functions:
Android app development basics
Before developing a quick app, you must complete the following preparations:
Now, you have successfully created a quick app project.
The browser web page is vertically arranged, with the search area and display area.
<template>
<div class="container">
<div class="header">
<div class="scan" onclick="scanCode"><text>scan</text></div>
<div class="input"><input id="selectionInput" value="{{searchWord}}" onchange="changeWord" /></div>
<div class="search" onclick="search"><text>search</text></div>
</div>
<div class="content">
<web src="{{url}}" onpagefinish="onPageFinish" id="web"></web>
</div>
</div>
</template>
Replace the information in the style element of the hello.ux file to implement the CSS style of the search and display areas.
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px;
}
.content {
width: 100%;
height: 100%;
margin-top: 50px;
}
.header div {
border: 1px solid #afafff;
padding: 20px;
}
.header .scan,
.header .search {
width: 20%;
}
.header .scan text,
.header .search text {
margin: 0 auto;
}
.header input {
width: 60%;
}
</style>
Define all required service logic in the script element, to implement functions such as scanning an object, recording inputs, searches, and obtaining and saving the current URL.
<script>
import barcode from '@system.barcode';
import storage from '@system.storage';
module.exports = {
data: {
componentData: {},
// Default web page.
url: 'https://developer.huawei.com/consumer/en/quickApp',
searchWord: '',
},
// Scanning function.
scanCode() {
let that = this;
barcode.scan({
success: function (data) {
console.log('handling success: ' + data.result);
that.url = data.result;
},
fail: function (data, code) {
console.log('handling fail, code = ' + code);
}
})
},
// Input recording.
changeWord(e) {
this.searchWord = e.value;
},
//search
search() {
this.$element('selectionInput').focus({ focus: false })
this.url = "https://developer.huawei.com/consumer/en/doc/search?val=" + this.searchWord;
},
// Obtaining and saving the current URL.
onPageFinish(e) {
console.log('pagefinish: ' + e.url);
storage.set({
key: 'webUrl',
value: e.url,
success: function (data) {
console.log("handling success");
},
fail: function (data, code) {
console.log("handling fail, code = " + code);
}
})
},
// Implement the onBackPress callback when a user exits a web page.
onBackPress() {
this.$element('web').canBack({
callback: function (e) {
if (e) {
this.$element('web').back();
} else {
let router = require('@system.router');
router.back()
}
}.bind(this)
})
return true;
},
// Obtain the saved URL when the user re-opens the web page.
onInit() {
let that = this;
storage.get({
key: 'webUrl',
success: function (data) {
console.log("handling success:", data);
that.url = data;
},
fail: function (data, code) {
console.log("handling fail, code = " + code);
}
})
this.$page.setTitleBar({
text: 'BrowserDemo',
textColor: '#ffffff',
backgroundColor: '#007DFF',
backgroundOpacity: 0.5,
menu: true
});
}
}
</script>
Open the manifest.json file and declare the usage performance.
"features": [
{"name": "system.barcode"},
{"name": "system.storage"}],
Enter the keyword quickapp, and click search. Then the search result is displayed.
Click ×. Then click Run in IDE to relaunch the app. The last page accessed is displayed.
Click scan to activate the mobile phone camera.
Scan the following QR code. The web page is displayed successfully.
Check output logs.
After the debugging process is started, the system opens the debugging window.
Click Debug again to stop the debugging process. Log information records Debug service has been closed.
Well done. You have successfully completed this codelab and learned how to:
For more information, please refer to the following documents: