超详细!监听微信小程序五种切后台情况

7,419 阅读4分钟

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金

项目背景

最近接到一个项目,第一次进入A页面调用接口/init,需要监听用户在离开小程序A页面时(切出小程序指定的A界面),前端去调用接口/report上报该行为,如果A页面已经调用过接口/init,用户再次返回A页面,需要调接口/back。但是由于在iOS端和安卓端的离开形式不同,还是要分别处理一下的

离开小程序的情况有哪些

按照官方文档描述,离开小程序可以具体分为以下五种情况:

  • 点击右上角胶囊按钮离开小程序
  • iOS 从屏幕左侧右滑离开小程序
  • 安卓点击返回键离开小程序
  • 小程序前台运行时直接把微信切后台(手势或点击Home键)
  • 小程序前台运行时直接锁屏

以下分别根据五种情况去进行监听并调用report()方法进行上报,我是选用Taro框架制作小程序的,以下代码在Taro框架里适用

情况一:点击右上角胶囊按钮离开小程序

这种情况是把小程序切后台了,会触发app.tsx的componentDidHide()的钩子函数

// app.tsx
class App extends Component {
  componentWillMount() {}
  componentDidMount() {}
  ...
  componentDidHide() {
    // 上报用户离开指定页面事件
    report()
  }

情况二:iOS 从屏幕左侧右滑离开小程序

如果是离开小程序同情况一处理,但是如果从左侧右滑离开的是Detail页面,并没有退出小程序,这时要在当前页面监听离开事件,我是使用react hooks的写法,因此使用useEffect这个hook,在里面的返回函数里处理上报离开事件

// A.tsx
const Detail = () => {
    // 注意第二个参数是空数组
    useEffect(() => {
        // 上报用户指定页面事件
        report()
    }, [])
    return (
        <View>我是详情页面</View>
    )
}

情况三:安卓点击返回键离开小程序

此时是离开整个小程序了,会触发app.tsxcomponentDidHide()钩子,处理同情况一

情况四:小程序前台运行时直接把微信切后台(手势或点击Home键)

iOS端下处理方法同情况一,但是在安卓端下,点击Home健,此时小程序是在屏幕里缩小了,但是再次点击缩小的界面返回小程序里,我是根据url是否带指定参数去判断是调用接口/init还是/back的,小程序是不支持动态修改url的,没有像window.location.replace(url)这样子的方法。因此需要在内存里记录个值,表示下次回到当前页面时是调用/back接口,因此在report()方法里需要针对这种情况做特殊处理

const report = () => {
    // 当用户离开时,设置个flag标示下次进入需要调用back接口
    isinit = true
}

情况五:小程序前台运行时直接锁屏

这种情况同情况一,一样触发了componentDidHide()钩子函数

离开A页面后再回来A页面触发的事件

无论是离开小程序再返回到小程序A页面,还是安卓机子下点击home健把A页面失焦处理,亦或是A页面直接锁屏再次解锁屏幕回到A页面,回到A页面统一会触发useDidShow这个hook,我们可以在这个hook里面处理返回的事件

// A.tsx
const A = () => {
    useDidShow(() => {
        if (!isInit) {
            // 调用接口 /init
        } else {
            // 调用接口 /back
        }
    })
    // 注意第二个参数是空数组
    useEffect(() => {
        // 上报用户指定页面事件
        report()
    }, [])
    return (
        <View>我是详情页面</View>
    )
}

结语

以上是我制作微信小程序时对监听五种情况切后台事件的具体探讨,希望能对大家有帮助~如果能获得一个小小的赞作为鼓励会十分感激!!大家也可以多在评论区交流讨论哦

更多文章推荐:

「HTTP响应头之内容安全策略(CSP)为你的网站保驾护航」

「不再迷茫!看了这篇文章让你上手Vue3.0开发有丝滑般体验」

「三分钟学会使用requestAnimationFrame实现倒计时」

「欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边,抽奖详情见活动文章」