Quick App Introduction and Hands‑On Development Guide

Quick App is a lightweight, install‑free application platform jointly launched by Chinese telecom and device manufacturers, allowing users to run apps instantly without download.

The article introduces the Quick App ecosystem, its architecture (platform and runtime), and highlights that it uses standard web technologies such as JavaScript, CSS, Flexbox, and MVVM, requiring minimal learning for front‑end developers.

It provides a step‑by‑step setup guide for Windows (Node.js v6.11.3, hap‑toolkit installation, registry configuration) and shows how to initialize a project with hap init hello‑quick‑app , build with npm run build or npm run watch , and serve with npm run server --port 8889 .

Sample UI code demonstrates a simple bean‑box page using <template> , Flexbox layout, and data binding in a <script> block, including click handlers that update bean numbers and button states.

Configuration details such as the manifest.json design width and absolute positioning keywords ( fixed for Quick App, absolute for React Native) are explained.

The article also compares Quick App with WeChat Mini‑Programs and JDReact, discusses deep‑link invocation formats (http, https, hap), and provides a minimal HTML link example to launch a Quick App.

Finally, it lists further learning resources and encourages Android developers to explore this emerging front‑end‑centric mobile technology.

Code snippets:

npm install -g hap-toolkit

npm config set registry https://registry.npm.taobao.org

hap init hello‑quick‑app

npm run build

npm run watch

npm run server --port 8889

<template>
  <div class="demo-page">
    <image class="image" src="https://example.com/image.jpg"/>
    <div class="bean-box">
      <text class="mybean">我的京豆:</text>
      <text class="bean-number">{{beanNumber}}</text>
      <text class="mybean">个</text>
    </div>
  </div>
</template>

<script>
export default {
  data: {
    text: '欢迎打开详情页',
    beanNumber: 9999,
    buttonText: '签到领京豆',
    buttonImg: './progress_unsign_6.png'
  },
  onSignClick() {
    this.beanNumber = 1001;
    this.buttonText = '今日已签到';
    this.buttonImg = './progress_sign_7.png';
  }
}
</script>

{
  "config": {
    "designWidth": 750
  }
}