<h2>一、写作背景</h2>    <p>接触小程序一年多，真实体验就是小程序开发门槛相对而言确实比较低。不过小程序的开发方式，一直是开发者吐槽的，如习惯了 Vue，React 开发的开发者经常会吐槽小程序一个 Page 必须由多个文件组成，组件化支持不完善或者说不能非常愉快的开发组件。在以前小项目中没太大感觉，从加入有赞，参与有赞微商城小程序的开发，是真切的体会到对于大型小程序项目开发的复杂性。</p>    <p>有赞从微信小程序内测就开始开发小程序，在不支持自定义组件的时代，只能通过 import 的形式拆分模块或实现组件。在业务复杂的页面，可能会 import 非常多的模块，而相应的 wxss 也需要 import 样式，除了操作繁琐，有时候也难免遗漏。</p>    <p>作为开发者，我们当然希望可以让工作更简单，更愉快，也希望改善我们的开发方式。所以希望能够更了解微信小程序框架，减少不必要的试错，于是有了一次对小程序框架的 debug 之旅。(基础库 1.9.93)</p>    <p>通过三周空余时间的 debug，也算对小程序框架有了一些浅显的认识，达到了最初的目的；对小程序启动，实例，运行等有了真切的体会。这篇文章记录了小程序框架的基本代码结构，启动流程，以及程序实例化过程。</p>    <p>本文的目的是希望把我看到的分享给对小程序感兴趣或者正在开发小程序的读者，主要解答“框架对传入的对象等到底做了什么”。</p>    <h2>二、从启动流程一窥小程序框架细节</h2>    <p>在开发者工具中使用 help() 方法，可以查看一些指令和方法。使用其中的 openVendor 方法可以打开微信开发者工具在小程序框架所在目录。其中以包括以基础库命名的目录和其他帮助文件，如其中有两个工具 wcc，wcsc。wcc 可把 wxml 转换为对应的 JS 函数 —— $gwx(path, global)，wcsc 可将 wxss 转换为 css。而基础库目录包括 WAService.js 和 WAWebview.js 文件。小程序框架在开发者工具中以 WAService.js 命名（WAWebview.js 不知其作用，听说在真机环境使用该文件）。</p>    <p>在开发中工具命令行使用 document.head 可以查看到小程序的启动流程大致如下： <img src="https://simg.open-open.com/show/9417b39bdfcf2bdfb1440090d778cb51.png"> 以小节的方式分别介绍这些流程，小程序是如何处理的（小节编号与图中编号相同）。</p>    <h3>1、初始化全局变量</h3>    <p>下图是小程序启动是初始化的一些全局的变量： <img src="https://simg.open-open.com/show/32c8db62faf071673c34dbd63a8455aa.png"></p>    <p>那些使用“__”开头，未在文档中提及可使用变量是不建议使用的，__wxAppCode__ 在开发者工具中分为两类值，json 类型和 wxml 类型。以 .json 结尾的，其 key 值为开发者代码中对应的 json 文件的内容，.wxml 结尾的，其 key 值为通过调用 $gwx('./pages/example/index.wxml') 将得到一个可执行函数，通过调用这个函数可得到一个标识节点关系的 JSON 树。</p>    <p><img src="https://simg.open-open.com/show/5da6866590e3e49929bc31176f5bfa10.png"></p>    <h3>2、加载框架（WAService.js）</h3>    <p>使用工具对 WAService.js 进行格式化后进行 debug。可以发现小程序框架大致由： WeixinJSBridge 、 NativeBuffer 、 wxConsole 、 WeixinWorker 、 JavaScript 兼容 （这部分为猜测）、 Reporter 、 wx 、 exparser 、 __virtualDOM__ 、 __appServiceEngine__ 几部分组成。</p>    <p>其中除了 wx 和 WeixinJSBridge 这两个基础 API 集合， exparser , __virtualDOM__ , __appServiceEngine__ 这三部分作为框架的核心， __appServiceEngine__ 提供了框架最基本的接口如 App，Page，Component； exparser 提供了框架底层的能力，如实例化组件，数据变化监听，view 层与逻辑层的交互等；而 __virtualDOM__ 则起着链接 __appServiceEngine__ 和 exparser 的作用，如对开发者传入 Page 方法的对象进行格式化再传入 exparser 的对应方法处理。</p>    <p>框架对外暴露了以下API：Behavior，App，Page，Component，getApp，getCurrentPages，definePlugin，requirePlugin，wx。</p>    <h3>3、业务代码的加载</h3>    <p>在小程序中，开发者的 JavaScript 代码会被打包为</p>    <pre>  define('xxx.js', function(require, module, exports, window, document, frames, self, location, navigator, localStorage, history, Caches, screen, alert, confirm, prompt, fetch, XMLHttpRequest, WebSocket, webkit, WeixinJSCore, Reporter, print, WeixinJSBridge) {      'use strict';      // your code  })</pre>    <p>这里的 define 是在框架中定义的方法，在框架中提供了两个方法：require 和 define 用来定义和使用业务代码。其方式有些像 AMD 规范接口，通过 define 定义一个模块，使用 require 来应用一个模块。但是也有很大区别，首先 define 限制了模块可使用的其他模块，如 window，document；其次 require 在使用模块时只会传入 require 和 module，也就是说参数中的其他模块在定义的模块中都是 undefined，这也是不能在开发者工具中获取一些浏览器环境对象的原因。</p>    <p>在小程序中，JavaScript 代码的加载方式和在浏览器中也有些不同，其加载顺序是首先加载项目中其他 js 文件（非注册程序和注册页面的 js 文件），其次是注册程序的 app.js，然后是自定义组件 js 文件，最后才是注册页面的 js 代码。而且小程序对于在 app.js 以及注册页面的 js 代码都会加载完成后立即使用 require 方法执行模块中的程序。其他的代码则需要在程序中使用 require 方法才会被执行。</p>    <p>下面详细介绍了 app.js，自定义组件，页面 js 代码的处理流程。</p>    <h3>4、加载 app.js 与注册程序</h3>    <p>在 app.js 加载完成后，小程序会使用 require('app.js') 注册程序，即对 App 方法进行调用，App 方法是对 __appServiceEngine__.App 方法的引用。</p>    <p>下图是框架对于 App 方法调用时的处理流程： <img src="https://simg.open-open.com/show/40259aaf1a1b83388b59ca1ea48b91a8.png"></p>    <p>App 方法根据传入的对象实例化一个 app 实例，其生命周期函数 onLaunch 和 onShow 因为使用不同的方式获取 options的参数。在有些需要根据场景值来实现需求的，或许使用 onShow 中的场景值更合适。</p>    <p>在实际开发过程中发现，在微信顶部唤起小程序和在小程序列表唤起的 options 也是不一样的。在该案例中通过点击分享的小程序进入后，关闭小程序，再通过不同方式进入小程序，通过顶部唤起的还是 options 的 path 属性还是分享出来的 path，但是通过列表中打开直接回到了首页，这里 App 中的 onShow 就会获取到不同的 options。</p>    <h3>5、加载自定义组件代码以及注册自定义组件</h3>    <p>自定义组件在 app.js 之后被加载，小程序会在这个过程中加载完所有的自定义组件（分包中自定义组件没有有测试过），并且是加载完成后自动注册，只有注册完成后才会加载下一个自定义组件的代码。</p>    <p>下图是框架对于 Component 方法处理流程： <img src="https://simg.open-open.com/show/1db973138af405efdc00b0ba6d8cdd5a.png"></p>    <p>图中介绍了框架如何对传入 Component 方法的对象的处理，其后面还有很多深入的对于组件实例化的步骤没有在图中表示出来，具体可以在文章最后的附件中查看。</p>    <p>自定义组件在小程序中越来越完善，其拥有的能力也比 Page 更强大，而后面会提到在使用自定义组件的 Page 中，Page 实例也会使用和自定义组件一样的实例化方式，也就是说，他拥有和自定义组件一样的能力。</p>    <h3>6、加载页面代码和注册页面</h3>    <p>加载页面代码的处理流程和加载自定义组件一样，都是加载完成后先注册页面，然后才会加载下一个页面。</p>    <p>下图是注册一个页面时框架对于 Page 方法的处理流程： <img src="https://simg.open-open.com/show/24cff97bf8cb1a1313ad638d0b040cfd.png"></p>    <p>Page 方法会根据是否使用自定义组件做不同的处理。使用自定义组件的 page 对象会被处理为和自定义组件的结构，并在页面实例化时使用不同的处理流程进行实例化。当然对于开发而言没任何不同。</p>    <p>从图中可以发现 Page 传入的（生命周期）代码并不会在这里被执行，可以通过下面小节了解 Page 实例化的详细过程。</p>    <h3>7、等待页面 Ready 和 Page 实例化</h3>    <p>还记得上面介绍的启动流程中最后一步等待页面 Ready？严格来讲是等待浏览器 Ready，小程序虽然有部分原生的组件，不过本质上还是一个 web 程序。</p>    <p>在小程序中切换页面或打开页面时会触发 onAppRoute 事件，小程序框架通过 wx.onAppRoute 注册页面切换的处理程序，在所有程序就绪后，以 entryPagePath 作为入口使用 appLaunch 的方式进入页面。</p>    <p>下图是处理导航的程序流程： <img src="https://simg.open-open.com/show/f484cbb7932998c38e80c2bb91974ead.png"></p>    <p>从图中可以看出页面的实例化是在进入页面时进行，下图是具体的实例化过程：</p>    <p><img src="https://simg.open-open.com/show/6ab01ea36731790edc2d80da8467fdf3.png"></p>    <p>下图是最终可得到 Page 实例：</p>    <p><img src="https://simg.open-open.com/show/d42ca834a3af0e328d339d99ea534424.png"></p>    <p>可以发现其中多了 onRouteEnd API，实际该接口不会被调用。其中以 component 标记的表示只有在使用了自定义组件时才会有的方法和属性。在前面第 5 小节提到了对于使用自定义组件的页面会按照自定义组件方式解析，这些属性和方法与自定义组件表现一致。</p>    <h3>8、关于 setData</h3>    <p>小程序框架是一个以数据驱动的框架，当然不能少了对他如何实现数据绑定的探索，下图是 Page 实例的 setData 执行流程：</p>    <p><img src="https://simg.open-open.com/show/c3cd209671b33a466af87eee09f10c61.png"></p>    <p>其中 component:setData 表示使用自定义组件的 Page 实例的 setData 方法。</p>    <h2>三、写在最后</h2>    <p>这是一次不完全的小程序框架探索，是在微信开发工具中 debug 的结果。虽然对于实际开发没有什么太大的帮助，但是对框架如何对开发的 js 代码进行处理有了一个很明确的认识，在使用一些 js 特性时可以有明确的感知。如果你还疑惑“小程序框架对传入的对象等到底做了什么”那一定是我表达能力太差，说声对不起。</p>    <p>通过这一次 debug ，也给我引入了新的问题，还希望能够有更多的讨论：</p>    <ul>     <li>自定义组件太多启动时会耗时处理自定义组件</li>     <li>文件太多会耗时读文件</li>     <li>合理的设计分包很重要</li>    </ul>    <p>一份在调试过程中的笔记 <a href="/misc/goto?guid=4959757760694573502" rel="nofollow,noindex">小程序框架不完全分析.xmind</a> ，如果看官有兴趣可以下载看看。当然最后对于框架中已有的能力，还是分层希望微信可以开放更多稳定的接口，并在文档中告知开发者，让开发变得简单一些。</p>    <p> </p>    <p>来自：https://tech.youzan.com/weapp-booting/</p>    <p> </p>