The small program goes to the H5 page

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

preface

Recently received a small program jump H5 page demand. Requires that the applet be able to jump to the H5 page and return to the current page of the applet. I used webview nesting to complete the jump of H5 page, and there was a bug in the later testing, which took some time to check and fix. I hereby write this down for the record. I hope I can help you.

Bug

After using webView to jump to H5 page, when clicking the back button in the top bar, clicking back for the first time will not return to the applet page, but return to a blank page. (In fact, the so-called blank page is the authentication page when connecting to the enterprise wechat API.)

Repair the train of thought

Considering that this H5 page is a SPA page written with VUE, and the page is embedded in the enterprise wechat. At first, I thought that the return problem might be caused by the WebView page, so I added the printing of the console in the life cycle of the WebView page, but I found that the blank page was not the page where the WebView was located. Later, I searched the data and found that if I wanted to return the small program page successfully when jumping to the H5 page in the small program, The relevant package for weixin-sdK.js must be configured on the current H5 page. Since the H5 project is a scaffolding project, I introduced this package with NPM I weixin-js.sdk. Thinking that the H5 page will close when you return to the applet calls the window.onunload() method in main.js Listening to the closing of the H5 page to invoke weixin – js. SDK package of wx. MiniProgram. NavigateBack navigate () method returns, But when I committed to the test environment to test it and found that the code didn’t work, I once again had no clue (as most people do in this case).

To find the information

Did not solve the problem, always is to solve, so I continue to search for relevant information, finally in a big guy’s blog(click jump) to find a solution.

Create a new JS file and write the code shown above, importing the JS file in the VUE entry file. Can solve the small program jump enterprise wechat H5 page problem.

The last

Thank you for watching this blog, if it is helpful to you, I hope to give 👍 comment collection three even!