WeChat browser back button interception function in the upper left corner

In the development of WeChat public accounts, sometimes it is necessary to intercept and process the page logic related to the return button in the upper left corner of the browser, instead of letting the page directly return to the previous page. This detail has not been implemented very well before. However, I saw that the results on the JD Shopping official account were very good, so I started to try this myself. The effect of JD.com is as follows:

Judging from the Jingdong shopping effect in the picture above, clicking on search brings up a search interface, and then clicking on the upper left corner to return. It just closes the search interface, but the page does not return like reading the progress bar again, and my page needs It is this effect. Let’s use vue to make a demo of this process.

Premise: The return button in the upper left corner of WeChat cannot be intercepted, but the return event can be monitored.

Idea: If you want to truly intercept the return event, you can first add a record to window.history on the current page (actually just add a record pushState to the history stack, the browser will not actually load this path), when you click to return , listen to the return event and process the logic you want to process. Anyway, WeChat must execute the return. The record just added will be taken out from window.history and this path will replace the current page path. Note: This is just a replacement of the path. It just changes the name of the path and does not actually load the path.

Implementation: Two vue pages (first and two) are created in the demo, and the first page jumps to the second page. Then a mask layer pops up on the second page. When you click on the upper left corner to return, it does not return to the first, but the mask layer disappears first. When you click back again, you return to the previous page;

The effect is as follows:

1 Add to the mounted method of the second page and add a method to listen for the return event. When the return button is clicked, the pop-up mask is hidden;

 mounted() { let that = this; // Add return event listener window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false); },

2. Monitor the masking layer and add a record to window.history (history stack) when it is displayed;

 watch: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); } } } pushHistory() { // Modify history var state = { title: , url: /two / / This URL can be filled in casually, just to prevent the URL address displayed by the browser from changing, and it has no effect on the page}; window.history.pushState(state, state.title, state.url); },

3. If the user clicks the relevant operation on the masked layer to close the masked layer, he or she must manually remove the record he added from the history and back the route in Vue.

 helloClick() { // Click on the pop-up hello mask this.isShowTestDiv = false; this.$router.back(); // Remove the added record from the history}

demo address

gitHub:https://github.com/LiJinShi/wechat_back_vue

The above is the back button blocking function in the upper left corner of the WeChat browser introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!