More detailed! Monitor micro channel small program five kinds of cutting background situation

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

Project background

Recently RECEIVED A project, enter page A for the first time to call interface /init, need to listen to the user when leaving page A of small program (cut out interface A specified by small program), the front end to call interface /report to report this behavior, if page A has called interface /init, the user returns to page A again, need to call interface /back. However, due to the different forms of departure in iOS and Android terminals, it should be handled separately

What happens when you leave a small program

According to the official documentation, leaving small programs can be specifically divided into the following five situations:

Click the capsule button in the upper right corner to leave the applet
IOS swipe from the left and right of the screen to leave the applet
Android click back to leave the applet
The small program directly cut wechat into the background when running in the foreground (gesture or click the Home button)
Lock screen directly when running small program foreground

The following are five cases to monitor and call the report() method to report. I use the Taro framework to make small programs, and the following codes are applicable in the Taro framework

Case 1: Click the capsule button in the upper right corner to leave the applet

TSX’s componentDidHide() hook function is triggered

// app.tsx
class App extends Component {
  componentWillMount() {}
  componentDidMount(){}...componentDidHide() {
    // The user leaves the specified page
    report()
  }

Copy the code

Case 2: iOS swipe from the left side of the screen to the right to leave the applet

Use useEffect hooks to report leave events in the return function of the react-hooks function. If you want to leave the applet, use useEffect hooks to report leave events in the return function of the react-hooks

// A.tsx
const Detail = () = > {
    // Notice that the second argument is an empty array
    useEffect(() = > {
        // Reports a user-specified page event
        report()
    }, [])
    return (
        <View>I'm the details page</View>)}Copy the code

Case three: Android click back to leave the applet

TSX’s componentDidHide() hook is triggered to handle the same situation

Situation four: When the small program runs in the foreground, it directly cuts wechat into the background (gesture or click the Home button)

In iOS, the processing method is the same as in case 1, but in Android, click the Home button, at this time, the applet is shrunk in the screen, but click the narrowed interface again to return to the applet. I decide whether to call the interface /init or /back according to whether the URL has specified parameters, and the applet does not support dynamic url modification. There is no method like window.location.replace(URL). So you need to record a value in memory that the /back interface is called the next time you return to the current page, so you need to do something special in the report() method for this case

const report = () = > {
    // When the user leaves, set a flag indicating that the back interface needs to be called in the next entry
    isinit = true
}
Copy the code

Case five: lock screen directly when small program foreground runs

This case triggers the componentDidHide() hook function as well as case one

Event triggered by page A after leaving page A

Whether it is to leave the small program and return to the page of small program A, or click the home button under the Android machine to de-focus the page of A, or directly lock the screen of page A to unlock the screen again and return to page A, returning to page A will trigger the hook of useDidShow, and we can process the returned events in this hook

// A.tsx
const A = () = > {
    useDidShow(() = > {
        if(! isInit) {// Call interface /init
        } else {
            // Call interface /back}})// Notice that the second argument is an empty array
    useEffect(() = > {
        // Reports a user-specified page event
        report()
    }, [])
    return (
        <View>I'm the details page</View>)}Copy the code

conclusion

The above is my micro channel small program to monitor the five cases of cutting background events of the specific discussion, I hope to help you ~ if you can get a small praise as encouragement will be very grateful!! You can also exchange ideas in the comments section