Official document address: https://doc.quickapp.cn/

Environment set up

Install nodejs

Version 8.0.* is not recommended. The internal ZipStream implementation in this version is incompatible with the Node-archive package and causes a message.

For Windows users, I recommend downloading Node V7.10.1-x86. msi and clicking next.

For Android developers who are not familiar with Node, it doesn’t matter. What is node.js used for? Let’s take a look. Node is used as a development tool environment for development, debugging, compilation, and packaging.

Developing fast apps is all about HTML (UX), CSS, and JS syntax

After installing the Node environment, it is recommended to install CNPM, so that the download library will go through the Node repository of Taobao, which will be faster:

npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

After installing CNPM, all places that use NPM can be replaced with CNPM

Install the hap – toolkit

cnpm install -g hap-toolkit
Copy the code

The -g parameter is installed globally where the environment variable can be accessed, so that the hap command can be executed directly from the command line to view the version

hap -V
Copy the code

Hap is the official auxiliary development tool, the main function is to initialize the project template, so as to save the tedious initialization work;

The development tools

There are many kinds of development tools to choose from, I personally like VsCode VsCode download address, recommend VsCode

Tips: VsCode shortcut key Ctrl+Shift+ Y can bring up the debugging console and terminal

Create a project

create

hap init <ProjectName>
Copy the code
├ ─ ─ node_modules ├ ─ ─ sign signature RPK package module │ └ ─ ─ the debug debugging environment │ ├ ─ ─ certificate. The certificate of pem file │ └ ─ ─ private. Pem private key file ├ ─ ─ the SRC │ ├ ─ ─ Common public resource files and components │ │ └ ─ ─ logo. The PNG manifest. Json configuration icon in │ ├ ─ ─ the Demo page directory │ | └ ─ ─ index. The ux page file, ├─ ├─ manifest.json ├─ ├─ ├─ ├─ manifest.json ├ ─ └─ package.json (PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDFCopy the code

A brief description of the catalogue is as follows:

  • SRC: project source folder
  • Node_modules: The project’s dependent library
  • Sign: signature module. Currently, only DEBUG signature is available. If the internal test goes online, please add the Release folder to add online signature. For details about how to generate signatures, see Documentation: OpenSSL of the Compilation Tool

For those of you who are not familiar with sign, check out this article Android. Do you know anything about Android signature files?

compile

Please switch the command line execution directory to the directory you just created. All subsequent commands will be executed in this directory.

Package. json nodejs package.json

cnpm install
Copy the code

compile

npm run build
Copy the code

Json scripts–>build command, NPM scripts usage guide

{
"scripts": {
    "build":   "cross-env NODE_PLATFORM=na NODE_PHASE=dv webpack --config ./node_modules/hap-tools/webpack.config.js"}}Copy the code

After successful compilation and packaging, the project root directory will generate folders: Build, dist

  • Build: temporary output, including compiled pages, js, images, etc
  • Dist: Final output, including RPK files. In fact, the resources in the build directory are packed into a file named RPK. The RPK file is the final output of the project after compilation

The main file is.ux. The structure is divided into template, style and Script. This structure is a typical Web front-end MVVM structure, using CSS Flex. Manifest.json is similar to androidmanifest.xml in Android

The RPK file is a quick application installation package similar to the APK package of Android. It can be executed only in the Android operating system or Android App that supports quick applications

Auto-recompile

If you want to automatically recompile your project every time you modify the source file, use the following command:

npm run watch
Copy the code

Note:

Cannot find module ‘… /webpack.config.js’, please re-execute hap update –force. This is because the later version of NPM will check and delete some folders under node_modules during NPM install, causing an error. Hap update –force will re-copy the hap-tools folder to node_modules

Installing the Debug Tool

Install the debug APP

The Debug APP download

After the installation, the screenshot is as follows:

The instructions are as follows:

  • Sweep installation: configure the HTTP server address, download the RPK package, and arouse the platform to run the RPK package
  • Local installation: Select the RPK package in the phone’s file system and evoke the platform to run the RPK package
  • Online update: Re-send the HTTP request, update the RPK package, and evoke the platform to run the RPK package
  • Start debugging: Rouse the platform to run the RPK package and start the remote debugging tool

At present, most mobile phone systems have not integrated fast application execution environment, so it is necessary to install the running environment APP, running environment APP download and install the running environment APP. Then open the Debug APP.

Run the RPK package

There are several ways to invoke the platform to open RPK packages in the debugger. The first is recommended:

  • HTTP request: The developer starts the HTTP server, opens the debugger, clicks Scan to install and configure the HTTP server address, downloads the RPK package, and prompts the platform to run the RPK package
  • Local installation: The developer copies the RPK package to the mobile file system, opens the debugger, clicks local Install to select the RPK package, and prompts the platform to run the RPK package
  1. Sweep code installed

Start the HTTP server

Create a new window in the terminal, go to the root directory of the project and run the following command to start the local server (default port: 12306)

npm run server
Copy the code

Custom port (for example, 8080)

npm run server -- --port 8080
Copy the code

Preview the running effect on the Debug APP

You can configure the HTTP server address in either of the following ways:

  • Open the debugger –> click “Scan code installation” and scan the TWO-DIMENSIONAL code in the terminal window to complete the configuration (if the scanning fails, open the page in the browser: http://localhost:port and scan the two-dimensional code in the page)

  • Open the debugger -> click menu -> Settings in the upper right corner and enter the HTTP server address as prompted in the terminal window

After the configuration is complete, if the platform is not automatically prompted to run the RPK package, click Online Update to prompt the platform to run the RPK package. If the installation fails, check whether the terminal window for running the NPM Run Server is running properly

The operation effect is shown as follows:

  1. The local installation

Copy the RPK package to the mobile phone

Copy RPK packages compiled in /dist directory to the mobile phone file system through USB cable or other means

Install the RPK package locally

Open debugger –> click “Local Installation”, select RPK package in mobile phone file system, and automatically evoke platform to run RPK package, check the effect

debugging

Log output

  1. Changing a Log Level

Open the manifest.json file in the SRC folder in the project root directory, find the config configuration, and change the logLevel to the lowest level debug, that is, to allow the output of all levels of logs

After modification, the config code in/SRC /manifest.json is as follows:

{
&emsp;"config": { &emsp; &emsp;"logLevel": "debug"}}Copy the code
  1. Output logs in JS

When the JS code does not run correctly as required, the output log can help developers quickly locate the problem. Consistent with traditional front-end development, the console object is used to output logs as follows:

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')
Copy the code
  1. See the log

Developers can view the logs using Android Studio’s Android Monitor output.

Add console.debug(” Hello Quickapp “)

then

npm run build
Copy the code
npm run server
Copy the code

The terminal appears as follows:

Then open the Android Monitor

Scan the TWO-DIMENSIONAL code with Debug App for installation;

Remote debugging

If you do not have Android-Monitor installed, you can use the remote debugging command of Hap-Toolkit and the Chrome DevTools debugging interface to debug the pages on the mobile app side

  • Developers can see the QR code that provides scanning through the command line terminal or the debugging server home page
  • Developers use the quick Application debugger scan installation button to scan the RPK file to be debugged
  • The developer clicks the Start debug button in the Quick App debugger to start debugging

Scan the TWO-DIMENSIONAL code with Debug App and click the start debugging button after installation:

If the Chrome browser is installed, the debug program will automatically activate the PC Chrome DevTools:

You can change some code and run it yourself and see what happens

Contrast with applets

You can see if the interface is a native Android control by turning on the ‘Show Layout interface boundaries’ feature in the Android Developer options:



The comparison found that the fast application will be HTML, JS, CSS eventually compiled into the original Android controls, such a fast application experience is the best

conclusion

To summarize what we’ve learned so far:

  • Build the environment, install Node, HAP, VsCode, Debug App, run the environment App
  • Create your first project, get to know the development framework, development language
  • Compile and install the DEBUG RPK package
  • Compared to applet, quick application compiles for Android native controls, so the experience is best