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

简介:

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

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

最近在这里做基础服务，都是为了完善技术体系。这里，对于前端，我们需要做一个混合系统。如果我们做一个App，React Native也是不错的选择，但是一定要有完美的层次感:

①底层框架解决开发效率，把复杂的部分做成黑盒，展示页面开发只有固定的三轴，可以固定模式开发。

②工程部封装了业务开发人员最起码的开发环境，浏览器是最好的。如果不行，会提供类似浏览器的调试环境。

这样业务才能快速迭代。因为业务开发人员写的代码都差不多，底层框架通过与工程团队(通常是同一个团队)合作，可以解决很多底层的效率和性能问题。

稍微大一点的公司和稍微富裕一点的团队会同时做很多后续的性能监控和错误日志，从而形成一套文档->: ->: ->: ->: ->:监控和分析是一个完善的技术体系。

如果形成了这样的体系，那么后续的内部框架变化和技术创新也会在这个体系上转化。可惜很多团队只会做这条路的一部分，因为各种原因不会深入。可能是觉得自己一文不值，最恐怖的行为是在自己的体系还没有成型之前就贸然改变基本框架。小心点！

从第三方应用接入来看，微信应该是最好的一个。百度有直达号等类似产品，但系统性还有待提高。阿里应该也有类似的技术产品。从我们的水平来说，不太了解他们，所以要么是操作不好，要么是工作不好。

从小程序诞生开始，我这边就一直在关注。到目前为止，整个小程序系统已经非常完整了。腾讯的小程序和腾讯云深度融合。如果你使用开发者工具进行内部测试，这一切都是免费的。纯js会得到小程序的前台和后台，没有服务器、存储、cdn和服务代码。都是免费的。开发完成后，就不用自己去运营维护小程序了。我有时候觉得腾讯的技术实力真的很强！

小程序的结构追踪

小程序的开发文档比较完善，依然是账号申请->: Demo流程，熟悉之后就可以走代码上架等流程了。前端代码用工具搭建并上传，后端服务自行维护并配置地址映射。我们这里只关注开发过程，都可以使用他们的测试账号。

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

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

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

这里，我们追溯一下applet架构层的执行逻辑，以及从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

在这里，将在应用程序中注册一个事件。我们在这里注册的是onLaunch事件，它对应于applet初始化时的这个回调。所以原则上应该是原生安装成功后会执行这个功能。这里我就更详细的解释一下H5和Native的交互过程(这里是我之前做混合框架时和Native同事的交互协议，小程序应该差不多):

一般来说，我们在全局环境中有一个对象，它保存了所有需要native来执行功能的对象，比如这里的onLaunch。Native执行到一个状态，就会调用js全局环境中这个对象上的一个函数。因为我们的js注册Native执行是以字符串key为标志的，所以Native执行的时候可能是window.app。

这里默认会结合app.json获取第一个加载页面的信息，选择pages数组中的第一个页面，但是没有找到获取和设置的具体代码，与主进程无关。我们在这里忽略它......然后我们看到代码在显示逻辑上执行:

然后流向注册微信容器级别的事件。我想，无论如何，应该就像在这里注册了微信容器的事件，却找不到全局键。

页面过程

如果有同学有微信小程序，请在此指出猜测是否正确。顺便在这里帮忙解释一下，这也是我觉得全局键被Native调用的点。然后，逻辑上，将获得默认视图的类将开始实例化。这里我们来看级别代码:

//index.js//获取应用实例constapp = getapp()page({ data:{ Motto: # 39；你好世界 # 39；，userInfo: {}，hasUserInfo: false，cani use:wx . cani use( # 39；button . open -type . get userinfo # 39；}}，//事件处理程序bindviewtap:function(){ wx . navigate to({ URL: # 39；../logs/logs # 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 . userinfoeadycallback = RES = >；{ this . setdata({ userInfo:RES . userInfo，has userInfo:true })} else {//在兼容处理wx . get userInfo({ success:RES = >；{ app . global data . userInfo = RES . userInfo this . setdata({ userInfo:RES . userInfo，has userInfo:true })} } }，Getinfo:function(e){ console . log(e)app . global data . userInfo = e . detail . userInfo this . setdata({ userInfo:e . detail . userInfo，hasuserinfo: true}})他一来就得到当前的app实例:

const app = getApp()

其次，启动视图实例化的过程，也就是页面的类入口。大家要注意那个view.js只是一个定义好的类，但是它的实例化应该在全局控制器里面，在这里完成实例化:

摘要

在这里，我们和盲人一起对微信小程序架构做了一个简单的探索，发现其实小程序流程和我们想的有些出入。这里，我们初步认为过程如下:

①我们写好小程序代码后，提交代码。

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

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

④微信容器打开混合容器，webview加载门户页面(我觉得通过url打开和修复一个小程序页面应该是有规则的，这里后面再说开发案例)

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

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

⑥进入页面渲染逻辑。

⑦ ......

在这里，我更关心的是事件执行后对应的原生页面是如何更新的，所以这里我们重点看一下这段代码:

1调试器；2 this . setdata({ 3 userInfo:app . global data . userInfo，4 hasUserInfo: true5 })

下面是一段非常关键的代码:

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

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

推荐:以上小程序开发教程是小程序执行过程分析的详细内容。请多关注主机参考其他相关文章！

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：小程序执行的过程分析(过程分析案例) https://zhujicankao.com/80153.html