序言
今天闲逛”小程序开发社区”,无意中看到有一个同行贴出了以下的一段代码。
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构造器的注入的数据的。
暂时性结论
按照我的个人理解,启动的时候,小程序就已经提前把页面的模板注册好了。如果后面再次访问该页面时,仅仅是会基于页面模板创建出新的页面实例。也就是只有Page()构造器里面定义的data,在同一个页面下,实例与实例之间是独立的,但是Page外部定义的变量是共用的。
后续
如果未来有能力的话,希望可以反编译一下小程序的基础库,从源码正向来理解小程序页面渲染的流程。