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

项目背景

最近接到一个项目，第一次进入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.tsx的componentDidHide()钩子，处理同情况一

情况四：小程序前台运行时直接把微信切后台（手势或点击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>
    )
}
复制代码

结语

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