[笔记]小程序JS 变量的生命周期探究

序言

今天闲逛”小程序开发社区”,无意中看到有一个同行贴出了以下的一段代码。

https://developers.weixin.qq.com/s/mqa4fHme7ZnX

从A页面当中跳转到B页面,点击按钮后,再返回上一页就不能触发按钮对应的事件了。

探究代码

第一次渲染

第一次渲染成功时,用户点击setData测试,按钮能正常触发事件(按钮内容变成setData成功),点击”点击另外打开当前页面”按钮之后,跳转到新的页面。

跳转到第二个页面

此时nodeid发生变化,证实跳转到了新的页面。此时点击左上角的返回按钮后,原来的setData按钮无法触发事件。

分析输出

从代码中我们很容易就能分析出,第一次渲染成功时,that和this指向的页面nodeid应该是acf9ce91,当我们跳转到第二个页面时,此时的that和this就变成了bd622626。

此时神奇的事情就发生了,当我们点击返回按钮回到上一个页面,我们就能看到that的输出值依然是 bd622626 ,但this的输出值就变回了 acf9ce91.

返回第一个页面

由此我的一个想法是,跳转页面只会初始化一个新的页面实例,而不是重新运行这个JS文件.

证明想法

辅助代码

为了证明跳转页面后不是重新运行这个JS文件的想法,我在Page构造器的外部增加了如下的代码.

但我重新渲染页面时,console页面成功输出了2

证明第一次渲染时,小程序是运行过这个JS文件的。但当我们点击跳转到新的页面时,2没有继续出现,此时我认为小程序在新的页面当中,小程序是没有运行过这个JS文件的。

查阅文档

小程序为了实现对视图层标签的管控,开发了一套内置的框架”Exparser框架”。在该框架当中,页面的渲染是基于Exparser框架提供的Page和Component构造器的注入的数据的。

文档链接:https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=0000aac998c9b09b00863377251c0a

暂时性结论

按照我的个人理解,启动的时候,小程序就已经提前把页面的模板注册好了。如果后面再次访问该页面时,仅仅是会基于页面模板创建出新的页面实例。也就是只有Page()构造器里面定义的data,在同一个页面下,实例与实例之间是独立的,但是Page外部定义的变量是共用的

后续

如果未来有能力的话,希望可以反编译一下小程序的基础库,从源码正向来理解小程序页面渲染的流程。

引用

  1. 教程|《小程序开发指南》
  2. 同一page页面重复打开时,页面js里声明的变量会互相污染?

你好,2021

四级更迭,时光流转,又一个按下了快进键的365天。告别2020年,感谢遇见你2021,还请多多指教。

过去的2020年,经历了新冠病毒的侵袭,经历了全民隔离,网课教学。2020年的上半年是黑白的,感觉时间都被暂停了。但多亏大家的努力,让2020年的下半年逐渐重返前进的轨道之上,希望2021年,能够牛转乾坤,为美好的生活继续努力。

2020年,我第一次参加了微信小程序全国高校大赛,取得了华南赛区三等奖。但这个奖不会是我的终点,它会继续激励我,向着更高的目标继续进发,希望能够在未来取得更好的成绩。从年初的0.0.1版的GCU课表+,一直迭代到今天的1.8.1版本,一年来我对这个小程序进行了上百次的更新,现在回头看真的是成就感满满,即学习到了开发方面的知识,交到了更多的好友,也帮自己争得了一个奖项,希望明年能够继续进步。

2021年,一个新的开始,一页新的篇章,下面是我短期(1-2月)的一个目标。

  1. GCU课表+ 功能增强
  2. 自制LL(1)文法的编译器
  3. 学会用Coco2dx制作小游戏
  4. 用库乐队做一个 trap beat
  5. 雅思考到6.5

希望一切都能如约而至,也祝福大家心想事成,学业进步,身体健康。