Quick App Generation for Test by Quick App IDE - Huawei Developers

This is originally from HUAWEI Developer Forum
Forum link: https://forums.developer.huawei.com/forumPortal/en/home
​
Do you want to test a web page whether is functional or not before providing solutions to CPs you can use Quick App IDE for testing just in a few steps:
1) Create a new project by using File > New Project > New QuickApp Project... direction. Enter App Name, Package Name and select "Hello World" template.
2) Open "hello.ux" file folder and paste following script. You only need to change loadUrl adress that you want to test e.g. https://developer.huawei.com/consumer/en/doc/
Code:
template>
<div class="doc-page">
<!-- Replace the link to the HTML5 app -->
<web class="web-page" src="{{loadUrl}}" trustedurl="{{list}}" onpagestart="onPageStart" onpagefinish="onPageFinish"
onmessage="onMessage" ontitlereceive="onTitleReceive"
onerror="onError" id="web"
supportzoom="{{supportZoom}}"
wideviewport="{{wideViewport}}}"
overviewmodeinload="{{overViewModeLoad}}"
useragent="{{ua}}"
allowthirdpartycookies="{{allowThirdPartyCookies}}">
</web>
</div>
</template>
<style>
.doc-page {
flex-direction: column;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
width: 100%;
height: 100%;
position: fixed;
}
.web-page {
width: 100%;
height: 100%;
}
</style>
<script>
import router from "@system.router";
export default {
props: ['websrc'],
data: {
title: "",
// TODO Replace the link to the H5 app
loadUrl: "https://developer.huawei.com/consumer/en/doc/",
// Attribute allowthirdpartycookies, indicates whether cookies can be delivered in cross-domain mode.
// If you need login Google Account or Other Account, Please set TRUE.
allowThirdPartyCookies: true,
//Attribute supportzoom, indicates whether the H5 page can be zoomed with gestures.
supportZoom:true,
wideViewport:true,
overViewModeLoad:true,
ua:"default",
// Here the whitelist settings, when the loading page has multiple addresses, such as the successful loading of the login address and the inconsistent entry address, it needs to set the whitelist to do so.
list: ["new RegExp('https?.*')"]
},
onInit() {
console.info('onInit: ');
},
onPageStart(e) {
console.info('pagestart: ' + e.url)
},
// Each page switch triggers
onPageFinish(e) {
console.info('pagefinish: ' + e.url, e.canBack, e.canForward);
},
onTitleReceive(e) {
this.title = e.title;
},
onError(e) {
console.info('pageError : ' + e.errorMsg)
},
onMessage(e) {
console.info('onmessage e = ' + e.message + ", url = " + e.url);
},
onShow: function () {
console.info(" onshow");
},
onHide: function () {
console.info(" onHide");
},
onBackPress() {
console.log('onBackPress')
this.$element('web').canBack({
callback: function (e) {
if (e) {
console.log('web back')
this.$element('web').back()
} else {
console.log('router back')
router.back()
}
}.bind(this)
})
return true
},
}
</script>
3) Put your app icon under Common folder. E.g. developer.png
4) Open manifest.json file and paste follwing script and change icon name with the file that you uploaded under Common folder.
Code:
{
"package": "com.testapp.huwei",
"name": "TestApp",
"versionName": "1.0.0",
"versionCode": 1,
"icon": "/Common/developer.png",
"minPlatformVersion": 1060,
"features": [
{
"name": "system.configuration"
},
{
"name": "system.calendar"
},
{
"name": "system.prompt"
},
{
"name": "system.router"
}
],
"permissions": [
{
"origin": "*"
}
],
"config": {},
"router": {
"entry": "Hello",
"pages": {
"Hello": {
"component": "hello"
}
}
},
"display": {
"titleBar":false
}
}
4) Create .rpk package by using Build > Run Release direction.
5) Accept IDE to create a signature file for your app.
6) com.testapp.huawei_release_1.0.0.rpk package has been generated and ready for test.