applet执行过程分析（applet操作规划的三个步骤）

线索:

微信小程序，小程序的一种，英文名微信小程序，是一种无需下载安装即可使用的应用程序。它实现了应用触手可及的梦想，用户可以通过扫描或搜索打开应用。

申请全面开放后，主要类型为企业、政府、媒体、其他组织或个人的开发者均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行系统。

我们这边最近在做基础服务，都是为了完善技术体系。这里，对于前端，我们需要制作一个混合动力系统。如果我们制作一个应用程序，React Native也是一个不错的选择，但我们必须拥有完美的分层:

（1）底层框架解决开发效率，把复杂的部分做成黑盒，对页面开发只显示固定的三板板斧，可以固定模式开发。

（2）工程部封装了业务开发人员的最低开发环境，最好的是浏览器。如果实在不行，会提供类似浏览器的调试环境。

通过这种方式，业务可以快速迭代，因为业务开发人员编写的代码是相似的，因此底层框架可以与工程团队（通常是同一团队）一起在底层解决许多效率和性能问题。

稍微大一点的公司和稍微富裕一点的团队还会同时做大量的后续性能监控和错误日志记录，从而形成一套文档-》开发-》调试-》构建-》发布-》监控和分析的完整技术体系。

如果形成了这样一个系统，后续的内部框架变化和技术创新都将基于这个系统，但不幸的是，许多团队只会做这条路径的一部分，并且由于各种原因，他们可能会觉得毫无价值，而最恐怖的行为是在没有形成自己的系统的情况下贸然改变基本框架，因此要小心！

从第三方应用接入的角度来看，微信应该是最好的。百度有直达号等类似产品，但系统感仍有待提高。阿里应该也有类似的技术产品。从我们的水平来说，知识不多，所以要么操作不好，要么做得不好。

自从小程序诞生以来，我这边就一直在关注它。截至目前，整个小程序系统已经非常完整。腾讯小程序和腾讯云深度融合。如果你使用内部测试的开发者工具，它将是免费的。Pure js将获得小程序的前端和后端，无需服务器、存储、cdn和服务代码。它将是免费的。开发完成后，终端将无需自行运营和维护。我有时候觉得腾讯的技术实力真的很强！

小程序的结构可追溯性

小程序的开发文档还是比较完善的，还是账户申请-》演示流程。当您熟悉它时，您可以经历将代码上架的过程。前端代码用工具搭建后上传，后台服务自行维护，配置地址映射。我们只关注这里的开发过程，所以我们可以使用它的测试帐户。

1 appid wx0c 387 c 8c 19b df 782 app secret AC D6 c 02 e 2 fdca 183416 df 1269 D2 e 3fb 9经过一年多的发展，小程序形成的文档已经相对完善。我们可以从文档和演示中对小程序做出大致判断:

下面是业务人员可以看到小程序的代码。从这段代码和操作中，我们基本可以猜出小程序的轮廓。这里，我们先来看看它的全局控制器应用程序:

//app . jsapp（{ on launch:function（））{//显示本地存储容量var logs = wx . getstoragesync（&；#39;日志& amp#39;) ||

让我们追溯一下小程序架构层的执行逻辑，如何从app到视图实例化，这里先明确几点:

①微信小程序实际上仍然是webview的执行环境，因此我们仍然可以在js环境中访问窗口和位置等属性。

②微信小程序提供的展示都是原生定制UI，不用考虑DOM操作。

这里可以想象一下，在小程序界面中有一个执行真实代码逻辑的webview，但这个webview除了加载js程序之外什么都没做，所有的页面渲染都是js通过URL Schema或JSCore进行的原生通信，这被称为原生按照设定的规则完成的页面渲染。

全局控制器应用程序

在这里，我们重点介绍全局控制器应用程序类所做的工作。因为拿不到源代码，只能猜测加一步调试。首先，微信容器将准备一个webview容器，为我们的js代码提供主机环境。容器和构建工具将协作生成以下页面:

他应该在这里实现了实例化应用程序的方法:

这段代码在这个环境中相当晦涩:

y = function（）{ function e（t）{ var n = this；o（this，e），s . foreach（function（e）{ var o = function（）{ var n =（t

在这里，App中会注册一个事件，我们在这里注册的是onLaunch事件，这意味着这个回调将在小程序初始化时执行，所以原则上应该是本机在成功安装后执行该功能。在这里，我将详细解释H5和原生的交互过程（这里是我之前做混合框架时与原生同事的交互协议，小程序应该类似）:

通常，我们会在全局环境中有一个对象来存储所有需要本机执行功能的对象。例如这里的onLaunch，当Native执行到一个状态时，它将调用js全局环境中对象上的函数。因为js以字符串键作为符号注册本机执行，所以本机执行时可能是window.app。

这里我们先结合app.json获取加载页面的信息。默认情况下，我们会取第一个页面数组，但获取和设置的具体代码还没有找到，与主进程无关。这里我们将忽略它...然后我们看到代码按照以下逻辑执行:

然后流向在微信容器级别注册事件。我想，反正应该是像微信容器注册事件一样，但是找不到全局键。

页面处理

如果有使用微信小程序的同学，请在这里给我一些建议。猜测正确吗？对了，你可以在这里帮忙解释一下。这也是我认为全局键由Native调用的点。然后，从逻辑上讲，将获得默认视图的类将开始实例化。下面我们来看视图级别代码:

//index.js//获取应用程序实例constapp = getapp（）page（{ data:{ moto to:&；#39;你好世界& amp#39;，userInfo: {}，hasUserInfo: false，cani use:wx . cani use（& amp；#39;button . open -type . get userinfo & amp；#39;）}，//事件处理程序bindviewtap:function（）{ wx . navigate to（{ URL:&；#39;../logs/logs & amp；#39;}）}，onLoad:function（）{ if（app . global data . userInfo）{ this . setdata（{ userInfo:app . global data . userInfo，has userInfo:true }）} else if（this。data . cani use）{//因为getUserInfo是一个网络请求，它可能会在Page.onLoad//So在此处添加回调后返回以防止这种情况。App。userinforeadycallback = RES =》{ this . setdata（{ userInfo:RES . userInfo，has userInfo:true }）} else {//在没有兼容版本的open-type=getUserInfo的情况下，处理wx . Get userInfo（{ success:RES =》{ app . global data . userInfo = RES . userInfo this . setdata（{ userInfo:RES . userInfo，has userInfo:true }）}）}），Get userinfoglobal data . userinfo = e . detail . userinfo this . setdata（{ userinfo:e . detail . userinfo，hasuserinfo: true}}）他一过来就拿到了当前的app实例:

const app = getApp（）

其次，开始视图实例化过程。这是佩奇的班级入口。需要注意的是，view.js只是一个已定义的类，但是它的实例化应该在全局控制器中，并且它的实例化在这里完成:

摘要

我们在这里对微信小程序的架构做了一个简单的探索，发现小程序的流程实际上与我们想象的不同。在这里，我们最初认为过程是这样的:

（1）我们写好小程序代码后，提交代码。

②在发布过程中，我们的代码通过门户的构造过程、app.json和index.html（伪造页面）重新组装成一个只有js代码的空页面。

③加载过程从这里开始，用户点击一个微信按钮进入小程序。

④微信容器打开混合容器，webview加载入口页面（我觉得应该有通过url打开和修复小程序页面的规则，后面遇到开发案例再讲）。

⑤ webview执行环境实例化App，然后自动加载默认页面（这里默认为index）。

PS:我这里有一个很疑惑的点。微信原生容器的事件什么时候执行，由谁执行？

⑥进入页面渲染逻辑。

⑦ ......

这里我更关心的是事件执行后相应的本机页面是如何更新的，所以让我们注意这里的代码:

1台调试器；2 this . setdata（{ 3 userInfo:app . global data . userInfo，4 has userInfo:true 5 }）

这里有一段非常关键的代码:

可以看到，我们在这里向微信容器注册了一个appDataChange的异步事件，此时，我们将所有逻辑都交给了Native本身。执行Native后，我们会根据webviewIds找到后面要执行的回调继续执行。

至于容器如何使用webviewId查找相应函数的代码，我还没有找到。至此，我们对小程序结构的初步探索结束了，我们将在本周晚些时候继续深入研究小程序。

相关推荐:小程序开发教程

这几篇文章你可能也喜欢：

• 小程序执行的过程分析(过程分析案例)

本文由主机参考刊发，转载请注明：applet执行过程分析（applet操作规划的三个步骤） https://zhujicankao.com/115237.html