The first quickapp demo

brief introduction

With 3 month 20 Fast application developed by Beijing on (quickapp) Release , Major mobile app manufacturers have joined the ranks of fast apps , The application module is based on the standard js grammar + restructuring css label +Flexbox Layout +mvvm Pattern . It is similar to the attachment of wechat applet in wechat , And fast application depends on major application markets , Searchable direct open , Convenient operation without installation .

Environment building （window platform ）

1. install nodejs（ Official website ）.
2. install hap-toolkit（ open cmd->npm install -g hap-toolkit)
3. After installation, enter the command (hap -V)

The correct output of the version information indicates that the installation is successful . for example （0.0.26）

Two 、 Initialize project

1. Execute the following command to initialize the project

hap init ( The name of your project )

After the command is generated , The structure of the directory is as follows

├── node_modules
├── sign                      rpk Package signature module 
│   └── debug                  Debug environment 
│       ├── certificate.pem    Certificate file 
│       └── private.pem        Private key file 
├── src
│   ├── Common                 Common resource files and component files 
│   │   └── logo.png          manifest.json Configured in icon
│   ├── Demo                   Page directory 
│   |   └── index.ux           pagefile , The file name does not have to be the same as the parent folder 
│   ├── app.ux                APP file （ Used to include public resources ）
│   └── manifest.json          Project profile （ Such as ： Application description 、 Interface declaration 、 Page routing, etc ）
└── package.json               Define various modules and configuration information required by the project ,npm install According to this profile , Automatically download the required running and development environment 

2. Compile the project

Install dependency first , Execute the following command in the project root

npm install

To be installed , Use the following command to compile the package generation rpk package

npm run build

After compiling and packaging successfully , Folders will be generated under the root directory of the project ：build、dist

• build： Temporary output , Include the compiled page js, Pictures, etc
• dist： Final output , contain rpk file . In fact, I will build The resources in the directory are packed and compressed into a file , Suffix named rpk, This rpk File is the final output of the project after compilation

Use the following command to automatically recompile ,

npm run watch

Be careful ：

If you encounter the above error message , We can order hap update –force To solve this problem

3、 ... and 、 debugging

1. Install debugger

1. The debugger is a android application , direct download
2. Buttons cannot be clicked , It needs to be installed again Platform preview
After two applications are installed, you can install fast applications

2. Installation and operation rpk package

There are two ways ：
* HTTP request ： Developers start HTTP The server , Open the debugger , Click scan code to install configuration HTTP Server address , download rpk package , And arouse the platform to run rpk package
* Local installation ： Developers will rpk Copy the package to the mobile file system , Open the debugger , Click local installation to select rpk package , And arouse the platform to run rpk package

Recommend the first way , Debugging is more convenient .

http Request mode ：
Carry out orders ：

//  Default port 12306
npm run server


 Successful execution will display the QR code , You can use the debugger to scan the QR code and install , Or click the top right corner of the debugger to set http Click online update for the server address .

 At this time, cooperate with the command 

npm run watch
“`
You can preview the effect while developing

3. Recommended IDE

The recommended ide by vscode+hap extension Plug-in development , Plug in installation :

Recommended links ：

wanandroid Apply it quickly (quickapp) edition