WeChat Mini Programs and Fast Apps: Market Landscape, Technical Architecture, and Development Practices

Since its launch in 2017, the WeChat mini program has grown from a niche feature to a major mobile application model, attracting hundreds of millions of daily users and offering a wide range of APIs for login, payment, and biometric authentication, thereby challenging traditional native apps.

The article outlines three main sections: the new application form, the emerging market structure, and the opportunities and challenges for front‑end technology stacks.

New Application Form – Introduces various mini programs developed by 360 Search, their release process, and the rapid adoption of the platform.

New Market Structure – Discusses how mini programs compare with native apps, highlighting advantages such as no download required, easy sharing via WeChat, reduced development cost (approximately one‑third of native apps), and extensive API support.

Opportunities and Challenges – Analyzes how the rise of mini programs and fast apps may trigger a new wave of front‑end development, requiring cross‑platform code reuse, performance optimization, and handling of diverse device capabilities.

The article also presents practical development guidance, covering registration, development tools, debugging, review, publishing, and operation. It emphasizes the use of the WeChat Developer Tools for real‑time testing and the importance of configuring sub‑packages (size limits: total ≤ 4 MB, each ≤ 2 MB).

Key frameworks are introduced:

WePY – a component‑based framework that supports NPM packages, async/await, and style preprocessors. Example code:

<style lang="less">
  @import "common.wxss";
  .list { display: flex; padding: 40rpx; }
  .list-item { margin: 10rpx; }
</style>

<template>
  <view wx:if="{{!hasUserInfo && canIUse}}">
    <map bindmarkertap="markertap" longitude="北京经度" latitude="北京纬度"></map>
    <text>{{name}}</text>
  </view>
</template>

<script>
  import wepy from 'wepy';
  import util from '../../utils/util';
  export default class Index extends wepy.page {
    config = {
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "当前标题",
      "navigationBarTextStyle":"black"
    };
    data = { userInfo: [] };
    async onLoad() {
      this.userInfo = await wepy.getUserInfo({});
    }
  }
</script>

mpVue – an open‑source framework from Meituan that enables Vue.js‑style development and easy code sharing between H5 and mini programs. Its repository is available at mpVue .

Fast App (快应用) is presented as a counterpart to mini programs, using a similar MVVM architecture with Webpack. Example fast‑app code:

<template>
  <div class="container" onclick="press">
    <text class="{{title}}" style="font-size:14px;">Hello {{title}}</text>
  </div>
</template>

<style>
  .container{ flex-direction: column; justify-items: center; }
  .title { color: red; }
</style>

<script>
  module.exports = {
    props:['title'],
    data:function(){ return { title: 'World' }; },
    press:function(e){ this.title = 'XXX'; },
    onInit:function(){ this.title = this.$app.$data.appName; }
  };
</script>

The article also provides JSON configuration examples for mini programs and CSS snippets for .wxss files, all wrapped in tags to preserve formatting.

Finally, it notes that both mini programs and fast apps evolve quickly, with the content accurate up to March 2018, and encourages readers to follow for the latest updates.