Quick application introduction

Fast application is a new application ecosystem jointly launched by nine mobile phone manufacturers based on hardware platform. Users do not need to download and install, and enjoy the performance experience of native applications

Nine big manufacturer

They are Xiaomi, ZTE, Huawei, Gionee, Lenovo, Meizu, Nubia, OPPE, Vivo and OnePlus

Comparison between Kuaibao and wechat mini program

Comparison of users

The combined monthly active users of WeChat and WeChat reached 988.6 million, according to Tencent’s 2017 annual financial report

Xiaomi vice President Hong Feng said the number of “fast app-enabled” mobile devices will soon exceed 1 billion.

Conclusion: Applets win

Supported systems

Small programs support the current mainstream two major systems Android and ios

Quick Apps are available on most Android phones (the nine major manufacturers are based on Android)

Conclusion: Applets win

Application entry

Small program

Fast application

Verdict: Quick apps win

Analysis of the

Zhang Xiaolong, the father of wechat, has said that mini programs will replace 80 percent of apps in the next two years. App stores, browsers and apps are a major source of revenue for mobile phone manufacturers. so

The fast applications launched by nine major manufacturers are intended to protect themselves or even attack wechat mini programs. The purpose is not to want a large number of APPS to be replaced by wechat mini programs.

This war may be a long one, and only better services can be accepted and supported by consumers. And as the Internet development engineer, also must not miss this wave of technology tide.

Fast application development

Quick apps, like applets, are also aimed at individual developers. Therefore, you can apply to register an account as a developer.

Access to the process

The preparatory work

  1. Registered account
  2. Bind developer account

Technology matting

If you want to develop a fast application, you need to have early technical matting.

  • Node NPM common commands used to build projects
  • Basic knowledge of HTML CSS JS.
  • Flex layout
  • Part of the es6

All of this can be found on the Webcast – front-end and mobile development website.

Use it. – Military photos

Environment set up

Install Toolkit on the PC

Install NodeJS

NodeJS 6.0 or later is required. Download it from the NodeJS official website

Install the hap – toolkit

Through the NPM repository installation, execute the following command from the command line:

npm install -g hap-toolkit
Copy the code

If you run hap -v on the cli, the version information is displayed, indicating that the haP-Toolkit is successfully installed, as shown in the following command:

hap -V
Copy the code

Install a debugger on your phone

It is mainly used for debugging quick application installation tutorials on the mobile end

  1. Download the Quick Application debugger

  2. Download the quick App preview

  3. The mobile phone is installed

Editor Settings

Mainly used for code highlighting and smart hints

** VS Code ** Install Hap Extension

Project running

Initialize the project

hap init <ProjectName>
Copy the code

After the command is executed successfully, the following files and directories are generated

Install dependencies

On the cli, enter wait for the installation to succeed

npm install
Copy the code

Compile the project

Compile the source code into a fast application

NPM run build or NPM run watchCopy the code

If an error occurs, Cannot find module ‘… /node_modules/hap-tools/webpack.config.js’

Enter hap update –force and run the command again.

After the success of the compilation, the project of dist/com application. Demo. RPK position can see the program.

Install quick apps on your phone

Run the command on the computer to start the server

npm run server
Copy the code

Successful startup, you can see a QR code

Mobile phone scanning installation, pay attention to the need for mobile phone and computer in the same LAN

Successful installation

After each modification of the source code, the modification needs to be synchronized to the mobile phone. You can run the following command to monitor.

npm run watch 
Copy the code

summary

After getting the project up and running for the first time, only two commands need to be opened later

  • Start the servernpm run server
  • Monitor changesnpm run watch

coding

The business process

Home page

The results page

Backend interface

  • Address of the interfacehttp:ip:3003/fuse
  • Request waypost
  • parameter
    • Image files
    • The name of the image file is specified asqaFile
    • Model_id Specifies the ID of the template to be concatenated directly to the INTERFACE URL

Quick application background

introduce

The background mainly uses the following technologies

  • node
  • Express is a Node-based framework
  • Tencent youtu node SDK
  • Gm implements image compression
    • address
    • Gm relies on the local ImageMagick, so you need to install ImageMagick locally first

run

After obtaining the background code

  • Install dependenciesnpm install
  • Start the servicenpm run start

Modify Tencent Youtu key

Because call Tencent interface, need to use the key, so it is recommended to register and replace.

Interface specification

Background nodes provide two interfaces

One is to compress images, / FUSE, which requires imageMagick installed on your computer system to compress images uniformly

One is not compressing images /fuse1, this interface does not require the computer to install imageMagick in advance, but upload pictures if too large, Tencent image interface recognition is a failure.