Quick App Development: Practices, Challenges, and Solutions in Vivo Mall

Recently, the Quick App Standard Launch Conference was held, marking the public beta phase of quick apps. Quick apps are a lightweight, install‑free application form built on a mobile hardware platform, with standards defined by a consortium of major phone manufacturers.

The article introduces quick apps, their characteristics (lightweight, no installation, high‑performance front‑end stack, native‑like experience), and the motivation behind the quick‑app standard.

Development Environment

Developers set up the environment by installing Node.js and the hap‑toolkit ( npm install -g hap-toolkit ). The toolkit provides commands such as hap init <ProjectName> to create a project and hap update to upgrade it. A quick‑app debugging APK is also required for testing.

Key Questions Explored

1. Differences between quick apps and traditional web single‑page applications (SPA). Quick apps download an RPK package, which the engine unpacks and renders using native components, preserving page state in a page stack, unlike web SPAs that reload on navigation.

2. How to achieve unified UI interactions (loading, error, network error) across pages. The solution is to create a reusable layout component (e.g., baselayout.ux ) that imports common components (titleBar, error, loadingPage) and uses slots for page‑specific content.

Example layout component code:

<import name='titleBar' src='./titleBar'></import>
<import name='error' src='./error'></import>
<import name='loadingpage' src='../Component/loadingPage'></import>
<template>
  <div class="page-doc">
    <!-- Title Bar -->
    <titleBar title-config="{{titleConfig}}"></titleBar>
    <!-- Error Page -->
    <error if="{{isError}}" @retry="retryEvent"></error>
    <!-- Loading Page -->
    <loadingpage if="{{isLoading}}"></loadingpage>
    <div class="page-content">
      <slot></slot>
    </div>
  </div>
</template>

Pages import this layout and replace the slot with their own UI.

3. Whether to encapsulate network requests for unified data loading. The article provides a Promise‑based wrapper around the native @system.fetch API, adding optional authentication handling (cookie injection) and converting callback‑style responses to async/await.

import nativeFetch from '@system.fetch'
async function fetch (options) {
  return new Promise((resolve, reject) => {
    options.success = function (data, code) { resolve({ data, code }) }
    options.fail = function (data, code) { resolve({ data, code }) }
    nativeFetch.fetch(options)
  })
}

async function setAuth(obj) {
  if (obj.auth) {
    let accountInfo = await account.getAccountInfo()
    let header = obj.header || {}
    if (header.Cookie) {
      let cookieArr = header.Cookie.split(';').filter(item =>
        item.indexOf('openId') === -1 && item.indexOf('token') === -1)
      cookieArr.unshift(` token=${accountInfo.token}`)
      cookieArr.unshift(` openId=${accountInfo.openId}`)
      header.Cookie = cookieArr.join(';')
    } else {
      header.Cookie = `openId=${accountInfo.openId}; token=${accountInfo.token}`
    }
    obj.header = header
  }
}

async function fetch(options) {
  let authRes = await setAuth(options)
  // ... further processing
}

The wrapper simplifies data fetching and automatically attaches authentication cookies when auth:true is passed.

System Capabilities

The quick‑app engine offers native APIs such as network.subscribe for real‑time network status detection, shortcut.install for adding the app to the home screen, and vendor services for account, payment, and analytics. These enable richer interactions than pure H5 web apps.

Common Pitfalls

Inconsistent border thickness when toggling element borders.

router.back can only return one page at a time.

Limited support for gradient backgrounds with border-radius .

Shadow effects are not supported in CSS.

Checkbox component styles cannot be customized; input text lacks max-length .

Animation capabilities are limited to a few properties (background‑color, opacity, width/height, transform).

Advantages

Quick apps have low development cost compared to native apps because they use a Vue‑like front‑end stack, allowing rapid onboarding and reuse of existing web logic. Flex layout simplifies UI construction, and the engine provides extensive native capabilities (account, payment, analytics). Deployment is straightforward—updates are delivered instantly without version fragmentation.

In the Vivo Mall quick‑app case, the first version with over ten pages, account integration, and payment was built in about one week, with another week for multi‑system integration. The app delivered native‑like performance, fast loading, and high visual fidelity.

Overall, the article shares practical experiences, code samples, and lessons learned for developers interested in building quick apps, especially on the Vivo platform.