Multi-Platform Micro-Component Development for Mini‑Programs and Quick Apps Using uni‑app

Background

With the growing user experience of mini‑programs and quick apps, marketers are shifting activities to micro‑applications such as WeChat, Alipay, and quick apps. These apps are lightweight, fast to load, and can be precisely targeted, prompting many enterprises to seize the opportunity for massive traffic and marketing effects.

However, the underlying implementations of mini‑programs differ across platforms, creating technical isolation and increasing development cost when using a case‑by‑case approach. To reduce learning cost, adaptation time, and human resources, the team aims to build a plug‑in, visual, and self‑adapting solution across all mini‑program platforms.

Technical Challenges of Multi‑End Scenarios

1. Enterprise‑level capability reuse – The existing Wukong activity platform provides rich tools, but extending them to multi‑end scenarios must follow the workless micro‑frontend architecture (component hot‑plug, independent subsystem deployment).

2. Dynamic construction of target activities – Different mini‑programs have distinct APIs, which multiplies development effort. An automated compilation service is needed to generate platform‑specific code from a unified configuration.

3. Deep support for quick apps – Quick apps, backed by major phone manufacturers, offer billions of exposures. Leveraging their unique capabilities (negative‑screen, smart scenes, app store, browser) is a key focus.

Finding the Optimal Reuse Platform: Multi‑End Framework

The team selected Vue as the front‑end technology and designed a three‑stage pipeline:

DSL stage – create a domain‑specific language and an enumeration of syntax tokens.

AST stage – parse the DSL into an abstract syntax tree (AST) using Babel‑like tools.

AST transformation – extend the AST with platform‑specific rules for mini‑programs and quick apps.

Reference definition of AST (from Wikipedia) is included to clarify its role in code transformation.

Multi‑End Framework Selection

After evaluating open‑source solutions (Flutter, React‑Native, Weex, mpvue, uni‑app, Taro, chameleon), the team chose DCloud’s uni‑app because it provides a complete Vue development experience, componentization, and Vuex data management, and can compile to multiple targets (WeChat/Alipay/Baidu/ByteDance/QQ mini‑programs, iOS/Android apps, H5).

Building Multi‑End Micro‑Components

1. Local multi‑end SFC component

<template>
  <view>
    <image :src="item.imgSrc" mode="aspectFill"></image>
  </view>
</template>
<script>
export default {
  props: ['item']
}
</script>

2. Compile to UMD

cross-env NODE_ENV=production UNI_PLATFORM=H5 vue-cli-service build --target lib --name code './src/plugin/code.vue' --dest ./src/plugin/dist --no-clean

3. Online rendering – Export the component object from the generated UMD file and render it dynamically with Vue’s component API.

import Vue from 'vue'
import Plugin from './Plugin.vue'
export default Vue.extend({
  mpType: 'app',
  props: ['pages'],
  components: { Plugin },
  created() {
    const self = this
    Vue.component('pages-index', {
      render(h) {
        return h('view', {}, self.pages.items.map((item, index) => {
          return h(Plugin, { key: item.domId, props: { item, pluginIndex: index } })
        }))
      }
    })
  }
})

The micro‑component structure includes code.vue (runtime component), prop.vue (configuration panel), setting.json (initial config), and package.json (dependencies). Data synchronization between the editor and the component is handled via Vuex.

Quick App Deep Support

Quick apps are a new application form based on hardware platforms, standardized by a consortium of manufacturers. Vivo’s “Quick App Million Plan” provides massive traffic, sharing, payment, voice, account linking, URL jump, negative‑screen cards, and POI capabilities.

The conversion flow from multi‑end micro‑components to quick‑app mini‑programs uses Vivo’s conversion tool, which deeply customizes logic and code to ensure performance.

Results and Demonstration

Using uni‑app, the team achieved plug‑in visual preview, multi‑end compilation (mini‑programs, quick apps, Alipay, Toutiao), and a single component running on multiple platforms. The demo showcases a simple image component built with Vue syntax, configured via prop.vue , and compiled into code.umd.min.js for sandbox execution.

Key Takeaways for Developers

Do not manipulate the DOM directly; use uni‑app APIs instead of document , window , localStorage , or cookies.

Only third‑party libraries approved in the uni‑app plugin market are supported.

Avoid excessive communication overhead between logic and view layers.

Use uni‑app conditional compilation for platform‑specific logic.

Conclusion

The article demonstrates the feasibility of a plug‑in, self‑adapting multi‑end framework for activity configuration, providing a low‑cost, reusable solution for developers, operators, and product teams.