微信小程序架构分析 (下)

最新推荐文章于 2025-07-08 20:13:36 发布

原创

最新推荐文章于 2025-07-08 20:13:36 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序开发文档 #微信小程序开发 #微信小程序开发教程

这一篇拖了一段时间，原因是实现一个可以运行微信小程序的 web 环境比我想象中要困难一些，这一方面是因为微信对于代码进行了压缩混淆，另一方面主要原因是开发者工具内部逻辑调用比较复杂（难怪 bug 不少），完全无法拿出来重用。

小程序实时运行工具 wept 的开发已经基本完成了，你可以通过我的代码对小程序的 web 环境实现有更全面的认识。下面我将介绍它的实现过程以及实时更新的原理。

小程序 web 服务实现

我在 wept 的开发中使用 koa 提供 web 服务，以及 et-improve 提供模板渲染。

第一步：准备页面模板

我们需要三个页面，一个做为控制层 index.html，一个做为 service 层service.html，还有一个做为 view 层的 view.html

index.html:

<div class="head">
</div>
<div class="scrollable">
</div>
<div class="tabbar-root">
</div>
<script>
  var __wxConfig__ = {
   
   {= _.config}}
  var __root__ = '{
   
   {= _.root}}'
</script>
<script src="/script/build.js"></script>

service.html:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon">
  <script>
  var __wxAppData = {}
  var __wxRoute
  var __wxRouteBegin
  global = {}
  var __wxConfig = {
   
   {= _.config}}
  </script>
  <script src="/script/bridge.js" type