On March 20, ten mobile phone manufacturers, including Xiaomi, ZTE, Huawei, Gionee, Lenovo, Meizu, Nubia, OPPO, Vivo and OnePlus, jointly announced the establishment of the Fast app Alliance to launch fast apps at the China Grand Hotel in Beijing’s Chaoyang District.

Then, triggered the attention of countless developers, introductory tutorial online also published a lot, but most of them are quick application official website documents simple copy again, the process is basically: install hap-Toolkit ==> HAP init project ==>run build ==> real machine preview.

Maybe it’s easier to switch positions.

There are two reasons:

  • Why execute a series of commands when you have a visual IDE?
  • Why create empty projects when you have a more complete Demo of components and interface capabilities?

Set up the environment

Install Nodejs: This is required, 8.0 and above is recommended

Install HBuilderX: The official website quickApp.dcloud. IO, HBuilderX built-in quick application syntax tips and code blocks, can significantly improve development efficiency

Download the code

Most of the official website and third-party introductory tutorials are to create an empty fast application project template, which cannot directly experience the components and interface capabilities of fast application.

This article recommends downloading the Hello-QuickApp project from Github. This project is similar to the example of wechat applets and shows the various components and interface capabilities supported by the fast app.

Import the project

Start HBuilderX and drag the downloaded Hello-QuickApp project into HBuilerX. A quick application project is automatically generated, as shown below:

Note: Just drag and drop the Hello-QuickApp folder, not the QuickApp-master folder.

Real machine operation

There is no need to execute various NPM commands, just find an Android phone, connect to the computer through the USB cable, and turn on two switches on the phone:

  • Switch USB connection mode to Media Device (MTP)
  • Developer option, enable USB debugging

Then click on the HBuilderX top menu: Run – > Run on real phone – > Select connected Android phone, as shown below:

After successful operation on the mobile phone, the interface is as follows:

Switch components and interface tabs to view various interface capabilities of the Quick application. The interface interaction menu is as follows:

The Templates TAB is a collection of common templates that are being refined.

Issuing RPK

If you want to see what works on an official debugger, follow these steps:

  • Generate RPK: From the top menu of HBuilderX, click Publish – > Publish Quick Apps – > Generate RPK files
  • Copy the RPK generated by HBuilderX to your phone’s file system
  • Install the Quick Application debugger and the Platform Preview. Note that both APKs need to be installed. The platform preview is designed to simulate the run time environment of the quick application
  • To preview the hello-quickapp, open the quickapp debugger on your mobile phone, click install local, and select the RPK file copied in step 2

Okay, isn’t it a little bit cleaner than just executing all these commands?