Definition of Quick Apps

For device users

Quick apps are a new type of installation-free apps. They provide a good user experience and powerful functions like any other Android apps, enable automatic updates of HTML5 pages, but consume very little memory space. Users can add their favorite quick apps to their desktops for convenient access.

For developers

Quick apps are a new type of installation-free apps built based on industry standards. Leveraging front-end technologies, quick apps are capable of providing varied capabilities and an intuitive experience for users while maintaining a low development cost. Quick apps are supported by the top 10 handset manufacturers in China. This enables you to reach new users cost-effectively and retain existing users easily.

Advantages of Quick Apps

Installing Node.js

If you have not installed Node.js or your Node.js version is earlier than version 6, go to the NodeJS official website and download and install it.

Obtaining the Installation Package

Win64: DevecoQuickAppIDE-V2.0.1NonChina-Win64.exe
Mac: DevecoQuickAppIDE-20191108-NonChinaV2.1.dmg

Installing the Huawei Quick App IDE

Win64: Click DevecoQuickAppIDE-V2.0.1NonChina-Win64.exe to start installation.
Mac: See the Installing Huawei QuickApp IDE on Mac.

  1. Open the Huawei quick app IDE and go to File > New project > New QuickApp Project.
  2. On the New Project page, enter project information and click OK.
    • App Name: Set it to QuickAppDemo.
    • Rpk Label: Set it to com.huawei.quickappdemo.
    • WorkSpace: Select the hard disk path where the code is stored.
    • Template: Select the Hello World template.

  1. Connect a mobile phone to the PC and enable the USB debugging mode on the phone.
  2. If the connection is successful, the IDE will prompt you to install the quick app loader on the mobile phone. Click Install to install the loader.
  3. Select rpk entry Hello from the drop-down list box on the menu bar and click the inspect button. On the Inspector page that is displayed, you can preview the project effect.

Editing the Template

Add one image component and three buttons to your template.
Set the src and class attributes of the image component. Set the class, value, and onclick attributes of the buttons.

  1. Open the src/Hello/hello.ux file and replace the content in the template part.
  2. Add one image component and three buttons to your template. Set the src and class attributes of the image component. Set the class, value, and onclick attributes of the buttons.
    <template> <div class="container"> <image src="{{imgPath}}" class="img"></image> <div> <input type="button" class="btn" value="take photo" onclick="takePhoto" /> <input type="button" class="btn" value="edit photo" onclick="editPhoto" /> <input type="button" class="btn" value="share photo" onclick="sharePhoto"/> </div> </div> </template>

Editing the Style

Replace the content in style of the hello.ux file. Add CSS selector img and btn to your style.

<style> .container { flex-direction: column; justify-content: center; align-items: center; } .img { width: 90%; height: 700px; border: 1px solid #000000; } .btn { height: 80px; width: 200px; margin: 20px; background-color: #1e90ff; color: #ffffff; } </style>

Editing the Script

<script> import media from '@system.media'; import image from '@system.image'; import share from '@system.share'; module.exports = { data: { imgPath: '' }, takePhoto() { let that = this; media.takePhoto({ success: function (data) { console.log('handling success: ' + data.uri); that.imgPath = data.uri; }, fail: function (data, code) { console.log('handling fail, code = ' + code + ", msg : " + data); } }); }, editPhoto() { let that = this; image.editImage({ uri: this.imgPath, success: function (data) { console.log(data.uri); that.imgPath = data.uri; }, fail: function (data, code) { console.log('handling fail, code = ' + code + ", msg : " + data); } }) }, sharePhoto() { share.share({ type: "image/jpeg", data: this.imgPath, success: function (data) { console.log("handling success"); }, fail: function (data, code) { console.log("handling fail, code = " + code + ", msg : " + data); } }) } } </script>

Editing the Manifest

Open the manifest.json file and declare the usage performance.

"features": [ {"name": "system.media"}, {"name": "system.image"}, {"name": "system.share"} ],
  1. After the mobile phone is connected to the PC, select rpk entry Hello from the drop-down list box on the menu bar and click the inspect button.
  2. On the Inspector page, click take photo.
  3. Take a photo with your phone and load the photo into the photo frame.
  4. Click edit photo to edit the photo.
  5. Return to the photo page and click share photo to share the photo.

Select the file to be debugged. Click the debugging icon to start debugging.

Check the log output of the console during startup of the debugging service.

After the debugging process has started, the system opens the debugging window.

Click the debugging button again to stop the debugging process.

Choose Build > Run Release.

Click Create to generate a formal fingerprint.

In the dialog box for confirming the creation of a fingerprint file, click Create.

After the packaging is complete, the dist directory of the project automatically opens. The RPK package generated in this directory can be submitted to HUAWEI Developer for review. After the package is approved, the app can go live on the HUAWEI AppGallery.

Well done. You have successfully built your first quick app.

Code copied