WeChat Mini Program Architecture: From Dual‑Thread Model to Fast Rendering

WeChat Mini Programs have become mainstream, and their rendering layer uses a dual‑thread architecture separating the view (rendering) thread and the logic thread.

The rendering thread runs in a WebView, while the logic thread executes JavaScript in platform‑specific environments (JSCode on iOS, X5 on Android, NW.js in dev tools), providing advantages such as non‑blocking UI, native‑like experience, and sandboxed security.

Analysis of the rendering WebView shows its HTML structure, including style and script tags that load configuration (wxconfig.js), device info, the core library WAWebview.js and other resources. The body contains an Exparser‑based component system that manages the virtual DOM.

The rendering template (pageframe/instanceframe.html) acts as a factory to generate lightweight WebViews for each page. It loads placeholder HTML, injects compiled page code via NW.js, and listens for load events to signal readiness.

During page navigation, the framework creates a new template WebView, sets its src to the pageframe URL, injects the page’s JavaScript, and finally WAWebview.js converts the virtual DOM into real DOM nodes, completing the fast rendering cycle.

Code examples illustrate how to locate a specific WebView and open its DevTools, as well as how the script inside the template registers listeners and overrides document properties.

// 具体是第几个webview，根据具体项目确定
document.getElementsByTagName('webview')[0].showDevTools(true, null)

Another snippet shows the script that handles the "generateFuncReady" event and document readiness:

// script标签内代码
document.addEventListener("generateFuncReady", function(){
  setTimeout(function() {
    Object.defineProperty(document.body, 'scrollTop', {
      get() { return document.documentElement.scrollTop },
      set(value) { document.documentElement.scrollTop = value },
      configurable: true,
    })
  }, 100)
})
if (document.readyState === 'complete') { // 资源加载完成
  alert("DOCUMENT_READY") // alert发送通知
} else {
  const fn = () => {
    alert("DOCUMENT_READY")
    window.removeEventListener('load', fn)
  }
  window.addEventListener('load', fn)
}

The navigation script that pushes a new page into the history and merges configuration is also shown:

<script>
    history.pushState('', '', 'http://127.0.0.1:55595/__pageframe__/pages/home/index')
    __wxConfig=Object.assign(__wxConfig || {}, {"window":{"backgroundColor":"#ffffff","backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"Weixin","navigationBarTextStyle":"black","usingComponents":{}}})
    eval('...')
    ...
</script>

Overall, the article walks through the dual‑thread architecture, WebView inspection, template structure, and the rapid rendering pipeline of WeChat Mini Programs.