Master Quick Apps: From Architecture to Hands‑On Development
This guide introduces Quick Apps, explains their front‑end‑centric architecture, walks through environment setup, project initialization, UI layout, JavaScript logic, debugging, deep linking, and compares Quick Apps with WeChat Mini‑Programs and JDReact, providing practical code snippets and tips for Android developers.
Quick App Overview
Quick Apps are a new application ecosystem built on mobile hardware platforms, allowing users to launch apps instantly without installation, achieving higher conversion rates. Major manufacturers (Xiaomi, Huawei, OPPO, etc.) provide services such as push, payment, analytics, and third‑party sharing. Official site: https://www.quickapp.cn/ Documentation: https://doc.quickapp.cn/
Technical Architecture
The platform uses a front‑end stack with a custom engine that exposes native rendering and APIs, making Quick Apps feel identical to native apps. Developers familiar with web front‑end can start with virtually no learning curve.
Standard JavaScript syntax
Re‑styled CSS/HTML tags
Flexbox layout
MVVM pattern
Note: Some CSS tags are listed as supported but may not compile yet.
Quick App Demo
Example: a lightweight version of the Weibo app that opens instantly, showing only a feed without login functionality.
Getting Started Quickly
Follow the official documentation to set up the environment (Windows example; macOS works as well). The steps below assume Node.js v6.11.3 (avoid v8.x for compatibility). npm install -g hap-toolkit If the command hangs in China, configure the registry:
npm config set registry https://registry.npm.taobao.orghap -V// verify installation hap init hello-quick-app // create project (press Ctrl+C immediately after Windows execution) npm install // install dependencies
Install the Quick App debugger APK (e.g., https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803200129552999556.apk). If buttons are disabled, upgrade the phone OS. npm run build // generate .rpk package
Or use watch mode for automatic rebuilds: npm run watch Start a simple HTTP server for convenient QR‑code scanning:
npm run server -- --port 8889Develop Your Own Quick App
Quick Apps use Flexbox. Below is a minimal UI for a JD Bean‑earning page (Demo/index.ux):
<template>
<div class="demo-page">
<image class="image" src="https://m.360buyimg.com/mobilecms/jfs/t17263/26/637571351/69343/7c0624d4/5a9cf431N2ad48066.jpg"/>
<image class="pic" src="https://storage.jd.com/i.imageUpload/6e6a5f7465737431343932343131323539323139_big.jpg"/>
<div class="bean-box">
<div>
<text class="mybean">我的京豆:</text>
<text class="bean-number">{{beanNumber}}</text>
<text class="mybean">个</text>
</div>
<image class="sign-progress" src="{{buttonImg}}"/>
<text class="sign-text" onclick="onSignClick">{{buttonText}}</text>
<a href="openapp.jdmobile://virtual?params={\"category\":\"jump\",\"des\":\"enjoybuy\",\"source\":\"来源\"}">{{buttonText}}</a>
</div>
</div>
</template>CSS for the bean box (fixed positioning):
.bean-box{
flex-direction: column;
position: fixed;
top: 80px;
left: 140px;
}JavaScript handling sign‑in logic:
export default {
data: {
text: '欢迎打开详情页',
beanNumber: 9999,
buttonText: "签到领京豆",
buttonImg: "./progress_unsign_6.png"
},
onMenuPress() {
this.$app.showMenu();
},
onSignClick(){
this.beanNumber = 1001;
this.buttonText = "今日已签到";
this.buttonImg = "./progress_sign_7.png";
}
}Common pitfalls include forgetting to re‑run the build after adding images and mixing commas/semicolons in JavaScript.
Adding a Swiper (Carousel)
<swiper class="swiper-con">
<image src="https://m.360buyimg.com/mobilecms/jfs/t18475/66/665020317/61221/4624fd1a/5a9cf48dN0c260759.jpg!q70.jpg"/>
<image src="https://m.360buyimg.com/mobilecms/jfs/t18475/66/665020317/61221/4624fd1a/5a9cf48dN0c260759.jpg!q70.jpg"/>
</swiper>App Invocation (Deep Linking)
Quick Apps support opening via deep links:
http://hapjs.org/app/<package>/[path][?key=value]https://hapjs.org/app/<package>/[path][?key=value]hap://app/<package>/[path][?key=value]Example HTML to launch a Quick App:
<html>
<body>
<a href="hap://app/com.application.demo/" style="font-size:40px">跳转quick app</a>
</body>
</html>Saving this file and opening it in a browser will trigger the Quick App with package name com.application.demo.
Quick App vs. WeChat Mini‑Program vs. JDReact
Comparison chart (image omitted for brevity) highlights differences in ecosystem, tooling, and runtime.
Conclusion
The article provides a concise introduction to Quick App development, covering architecture, environment setup, UI creation, JavaScript interaction, debugging, and deep linking. While documentation still lags behind WeChat Mini‑Programs, developers interested in modern mobile front‑end should explore Quick Apps to stay ahead of the fast‑moving ecosystem.
Further learning links:
Flexbox layout tutorials
Official Quick App documentation
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
JD Retail Technology
Official platform of JD Retail Technology, delivering insightful R&D news and a deep look into the lives and work of technologists.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.