Shulou(Shulou.com)05/31 Report--

This article mainly introduces "the monitoring method of the return button in the upper left corner of uniapp WeChat Mini Programs". In daily operation, I believe that many people have doubts about the monitoring method of the return button in the upper left corner of uniapp WeChat Mini Programs. The editor consulted all kinds of data and sorted out a simple and useful method of operation. I hope it will be helpful to answer the doubts of "the monitoring method of the return button in the upper left corner of uniapp WeChat Mini Programs". Next, please follow the editor to study!

Project scenario:

WeChat Mini Programs is developed by uni-app. Click the return button in the upper left corner or the system's own virtual return operation in the interface to monitor whether the user has performed the corresponding operation on the page before returning. If so, prompt the user (prompt whether the user is sure to return), and return directly if not.

Problem description:

There is onBackPress in the life cycle of uni-app pages, but WeChat Mini Programs is not supported.

Looking through the official documents of WeChat Mini Programs, we did not find that we could listen to the events of the return button in the upper left corner.

Check the relevant technical documentation to confirm that WeChat Mini Programs does not provide a function to listen for events returned in the upper left corner at this stage.

Cause analysis:

Page An enters page B, and the user does some actions on page B (for example, page C selects some items to add to page B). At this time, the user returns from page B (triggering the return button in the upper left corner or the return event that comes with the system).

As a result of the user's operation, the stranded data is generated, which is stored in the storage.

Assuming that the user's return is unintentional, we need to make a confirmation when the user returns to page A, that is, a pop-up prompt box to let the user see that this action will empty the item he has just selected.

If the user confirms that he wants to return, he returns to page An and empties the storage.

If the user cancels the return, that is, for reasons such as mistakenly touching the return button, the return event is cancelled, the page stays on page B, and the data storage is retained.

Solution one:

Page An onshow listens for data returned from page B during the life cycle, that is, whether storage has a value.

Page A:

OnShow () {let choose = uni.getStorageSync ('product'), / / data cached by page B obj = uni.getStorageSync (' backsure') / / data needed for page B (based on actual project development) if (choose.length) {uni.showModal ({title: 'prompt', content: 'there is unsaved data on the current page, are you sure you want to cancel it?' , success: function (res) {if (res.confirm) {uni.setStorageSync ('product','') } else if (res.cancel) {uni.navigateTo ({url:'. / pageB?data=' + obj.data})} }) }, methods: {topageB () {let backsure = {data: this.data / / data needed by page B}; uni.setStorageSync ('backsure',backsure) Uni.navigateTo ({url:'. / pageB?data=' + this.data});}}

Note: the backsure here is only the data needed for page B (that is, during the onLoad () life cycle), choose whether or not to add this storage according to the actual situation. The judgment is still based on whether the storage product has a value when page B returns page A.

Solution 2:

Page B uses the custom custom navigation bar instead of WeChat Mini Programs's default navigation bar.

1. Rewrite the navigation bar at the top of page B to suit all models. Refer to api: uni.getSystemInfo ().

2. Define the click event for the return button in the upper left corner to determine whether to confirm the return.

3. In order to prevent users from using the system to return, page A needs to repeat the steps of Plan 1.

Page B:

/ / Top navigation bar {{thetitle}} / / assign navigation bar height onLoad () {let that = this; uni.getSystemInfo in the life cycle ({success (res) {that.top_height = res.statusBarHeight; / / data declared top_height:0}}) } / / methods method toback () {let choose = uni.getStorageSync ('product'); if (choose.length) {uni.showModal ({title:' prompt', content: 'there is unsaved data on the current page, are you sure you want to cancel?' , success: function (res) {if (res.confirm) {uni.navigateBack (); uni.setStorageSync ('product','');}) } else {uni.navigateBack ();}}

Page An is the same as scenario one.

This scheme can prompt the user in the box on the current page (page B) when clicking the return button in the upper left corner, while in scheme 1, the prompt is triggered only after page B has returned to page A.

Here, page A realizes that when the user uses the system's return button, because Mini Program cannot listen to the return event, it can only rewrite the top navigation bar of page B that needs to be returned, and then add a click event to the custom return button to realize the pop-up box prompt on the current page.

At this point, the study of "the monitoring method of the return button in the upper left corner of uniapp WeChat Mini Programs" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.