终端事件

有一些事件不是发给单个 UI,而是发给整个业务的,例如屏幕的翻转、网络的变化等等,我们称之它为 终端事件。 在 hippy-vue 中,所有终端事件都是分发到 Vue 的实例上(范例中实例名为 app),通过 Vue 的内部事件机制进行分发的。

事件监听器

这里是向前端发送一个名叫 rotate 的事件,里面有个参数是 result,这样就发送到前端去了。 1. // 将入口文件中 setApp() 时保存的 Vue 实例取出来。 2. const app = getApp(); 3. 4. export default { 5. method: { 6. listener(rsp) { 7. console.log(rsp.result); 8. } 9. }, 10. didMount() { 11. // 通过 app 监听 rotate 事件,并通过 this.listener 在事件发生时触发回调。 12. app.$on('rotate', this.listener); 13. } 14. }

事件卸载

如果不需要使用的时候记得调用一下移除监听的方法,一般放在组件的卸载生命周期中执行。 1. app.$off('rotate', this.listener);

实例销毁事件

最低支持版本 2.3.4 当 hippy js 引擎或者 context 被销毁时会触发该事件,hippy 业务可以通过监听 destroyInstance 事件做一些离开时的操作,但回调函数不能使用 async 1. Hippy.on('destroyInstance', () => { 2. // do something 3. });

容器大小改变事件

只有 Android 支持 当容器大小改变时,如屏幕旋转、折叠屏切换等,会触发该事件 1. app.$on('onSizeChanged', ({ oldWidth, oldHeight, width, height }) => { 2. // oldWidth: 旧的宽度;oldHeight: 旧的高度;width: 新的宽度; height: 新的高度 3. console.log('size', oldWidth, oldHeight, width, height); 4. });