记编程中遇到的奇奇怪怪的问题

微信小程序,一个页面做了另一个页面该做的事

问题描述

这是昨天写微信小程序时遇到的事。

页面A是我正在开发的页面,A上有个按钮,按住它会录音,之后会请求一个聊天机器人,和用户对话。另外A还有一个地方,点一下能跳到页面B。

B是按住按钮录音,然后实现中英文互翻,和A完全不搭介的。

小程序刚启动,测试页面A,功能是完全正常的。然而,如果此时我点一下跳到B,然后再返回A,再按A的按钮讲话,返回的却不是聊天机器人的对话,而是翻译后的语音,也就是录了音之后,A实现了B的功能。

讲道理,B是A的子页面,从B返回A时,B已被销毁,而且我按的按钮也是A的按钮,没理由会弄串啊。

一开始以为是对JavaScript不熟悉,作用域之类的出了问题。然后想想不对,微信小程序里只有app.js里的变量可以全局引用,页面和页面之间是完全隔离的。而且这两个页面也没读写缓存,不太可能把变量弄串。

原因

后来灵光一闪,想起“全局唯一”。原来页面A和B都用了一个插件,这个插件有一个全局唯一的实例。在页面初始化的时候,要对这个实例设置一系列回调函数,以控制整个页面的行为。A中,设置回调函数都写在生命周期函数onLoad()里面;跳到B之后,B中的回调函数覆盖了A中的回调函数;再回到A的时候,A不会再次调用onLoad(),因为A没有被unload,只是被hide了,所以回调函数仍然是B的,所以录音之后整个流程就按B的流程走了。

解决办法

要确保每次回到页面A的时候都重新设置回调函数,把设置回调函数的过程放到onShow()里面就解决了。onShow()是不管页面被show还是被load都会调用的函数。