What is a quick app

To put it simply, Quick application is a new application form jointly launched by ten major mobile phone manufacturers in China, such as Xiaomi, Huawei and OpPO. Quick apps require no installation, open in seconds, offer the same experience as native apps, and offer the same entry points as native apps: App Store, global search, browser search, etc.

Pre-development preparation

  • Quick application official document www.quickapp.cn/

  • Android phone, PC

Participate in the process

  • Website registration

  • Complete the profile and bind at least one vendor developer account

  • After the approval of the manufacturer, submit the quick application

How to develop

Fast applications use front-end technology stack, need basic front-end knowledge, such as tags, styles, JS and so on

Quick applications use MVVM design mode for development, developers do not need to directly manipulate DOM nodes, use data

Node update is completed by driving. The development specification of current standard is similar to vUE.

The development environment

  1. To build the Nodejs environment, Nodejs 8.0 or later is required (10.0+ is recommended

Above), can be downloaded from Nodejs

  1. Install the phone debugger

    • The debugger is an Android application, download the debugger: www.quickapp.cn/docCenter/p…

    • Install and open the debugger on your phone

  2. Install the toolkit

    Hap-toolkit is a quick application developer tool that can be used to create template projects, upgrade projects, compile, debug, etc. Similar to the vue – cli.

Installation:

npm install -g hap-toolkit
Copy the code

Create a project: You can write in the current directory to create the test directory as the root of the project

hap init test
Copy the code

Install dependencies

npm install
Copy the code

The service

npm run server
Copy the code

Or the installation of fast application OF THE IDE, the application of the new, editing, debugging and other work.

The project structure

The application consists of a manifest.json, app.ux where the project common resource scripts are placed, and multiple page/component UX files. In the manifest file, you can define application description, system configuration, and page routing information. Page/component UX files are used to implement individual pages or components, including UI templates, styles, data definitions, and callback event handling.

├ ─ ─ sign RPK package signature module │ └ ─ ─ the debug debugging environment │ ├ ─ ─ certificate. The certificate of pem file │ └ ─ ─ private. Pem private key file ├ ─ ─ the SRC │ ├ ─ ─ Common public resources and component files │ │ └ ─ ─ logo. PNG application icon │ ├ ─ ─ the Demo page directory │ | └ ─ ─ but ux page file, customizable page names │ ├ ─ ─ app. Ux app file, the script can be introduced, Expose public data and methods such as │ └ ─ ─ the manifest. Json project configuration files, configure application ICONS, such as page routing └ ─ ─ package. The json defining project needs of the various modules and configuration informationCopy the code

The manifest file

The manifest.json file contains the application description, interface declaration, and page routing informationCopy the code

Basic attributes

Here are a few commonly used attributes

1. The routing, the router

Fast application routes are configured in the Router object in the manifest

It is used to define the actual address and forward address of the page. If no route is configured on the UX page, this parameter is not used

With project compilation. A directory can have at most one home page file (excluding component files).

Home page (router.Entry)

The home page is the default page opened when the application platform starts. The home page must be set to an application

The name of the page, that is, the relative path to the page directory under projectName/ SRC.

Page Routing object (router.pages)

Key indicates the page name and value indicates the route configuration on the page. The key must be unique. page

The specific route configuration (router.pages value) includes the following attributes:

  • Component: Ux file name for the page
  • Path: indicates the page path. If this parameter is not specified, the page name is used by default.

For example, the entry page and error page correspond to the configuration page in Pages below

"Router" : {" entry ":" Demo ", -- -- -- -- -- -- -- -- (entry page) "errorPage" : "errorPage." -- -- -- -- -- (error pages) "pages" : {" Demo ": {" component" : "index" }, "ErrorPage": { "component": "index" }, } }Copy the code

And then when jumping, first introduced in the page

import router from '@system.router' 
Copy the code

Then jump

router.push({
  uri: '/Demo'.params: {
    msg: 'Parameters passed'}})Copy the code

Parameters passed by the route are received directly using this.

console.log(this.msg)
Copy the code

You can also open the embedded H5 directly

router.push({
  uri: 'https://www.baidu.com/'
})
Copy the code

2. Configure —-display

Used to define the configuration associated with the UI display.

For example,

For example,

"display": { "titleBarBackgroundColor": "#ffffff", "titleBarTextColor": "#000000", "menu": false, "pages": {"Demo":{"titleBar": false}, "ErrorPage": {"titleBarText": "this is an ErrorPage"}}}Copy the code

The titleBar method can also be set dynamically within the page

    this.$page.setStatusBar({ text:'Change titleBar name'.immersive: false.textStyle: 'dark'.backgroundColor: '# 000000' })
Copy the code

3. The adapter – config

We can use the config to specify the width of the page design base, and then use the design to design the size according to this specification. We do not have to do anything, the unit is still px, and the quick application will automatically adapt the operation. Because fast application px is a unit of width relative to the project configuration baseline, it has been adapted to mobile screens.

Ux file

Apps, pages, and custom components are written in UX extension files, which consist of template templates, style styles, and Script scripts. For example,

<template>
 <! -- Template can only have one root node -->
 <div class="demo-page">
   <text class="title">Welcome to open {{title}}</text>
   <! -- Click the jump details page -->
   <input class="btn" type="button" value="Jump to Details page" onclick="routeDetail">
 </div>
</template>
<style lang="less">
 .demo-page {
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

 .title {
   font-size: 40px;
   text-align: center;
 }

 .btn {
   width: 550px;
   height: 86px;
   margin-top: 75px;
   border-radius: 43px;
   background-color: #09ba07;
   font-size: 30px;
   color: #ffffff;
 }
</style>
<script>
 import router from '@system.router'

 export default {
   routeDetail () {
     // Jump to a page in the application
     router.push ({
       uri: '/Test'}}})</script>
Copy the code
  • css
    • Display can only be Flex or None
    • Position can only be Fixed or None
    • The length units are px and %

preview

You can use the installed quick-application debugger

  • Scan code installation: you need to start a local HTTP service, and then generate a QR code scan.

  • Online update: Quick application debugger can set the server address in the upper right corner, run the following command every time you change the code can click online update to update, do not need to scan the code every time.

    npm run server
    npm run watch
Copy the code
  • Debugs can be previewed on the phone or debugged using the Chrome DevTools interface

A simple demo

.

The advantages and disadvantages

  • Advantages: Provides many system functions, such as sharing, taking photos and so on. Good user experience, no download, seconds open, small memory footprint. Learning cost is low and documentation is more complete.
  • Disadvantages: each platform to register an account, can not be exchanged. The maximum size of an RPK file is 1 MB. Domestic manufacturers, do not support ios.