WeChat Mini Program Framework Internal Analysis: Startup Process and Instance Management

This article provides an in-depth technical analysis of the WeChat Mini Program framework based on three weeks of debugging research (base library 1.9.93). The author, a developer at YouZan with over a year of mini program development experience, shares insights into the framework's internal workings.

The article begins by discussing the background of mini program development challenges, particularly the complexity of large-scale mini program projects and the limitations in component support before custom components were introduced.

The core content explores the startup process and framework details through eight main sections:

1. Global Variable Initialization : The framework initializes various global variables at startup, including __wxAppCode__ which contains JSON and WXML types - the latter being executable functions that generate JSON trees representing node relationships.

2. Framework Loading (WAService.js) : The mini program framework consists of several key components: WeixinJSBridge , NativeBuffer , wxConsole , WeixinWorker , JavaScript compatibility layer , Reporter , wx , exparser , __virtualDOM__ , and __appServiceEngine__ . Among these, exparser , __virtualDOM__ , and __appServiceEngine__ form the core framework, providing fundamental APIs like App, Page, and Component.

3. Business Code Loading : Developer JavaScript code is packaged using a define/require pattern similar to AMD specifications, but with restrictions on accessible modules. The loading order is: other JS files → app.js → custom component JS → page JS.

4. App.js Loading and Registration : After app.js loads, the framework calls the App method to instantiate the application, handling lifecycle functions like onLaunch and onShow with different option parameters.

5. Custom Component Loading and Registration : Custom components are loaded after app.js, with all components loaded and registered sequentially before proceeding to the next component.

6. Page Loading and Registration : Page loading follows the same pattern as custom components - loading completes, then registration occurs before loading the next page.

7. Page Ready and Instantiation : The framework waits for browser readiness, then navigates to the entry page using appLaunch. Page instantiation occurs when entering a page, with pages using custom components being processed identically to custom components.

8. setData Mechanism : As a data-driven framework, the article explores how setData implements data binding, showing the execution flow for both regular Page instances and those using custom components.

The article concludes by discussing performance considerations: custom component count affects startup time, file count impacts file reading time, and reasonable sub-package design is crucial for optimization.