Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to embed WeChat Mini Programs webView into H5". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The method is as follows

1. Directly introduce the page address

Url is the address that needs to be redirected. You can encode url with encodeURIComponent and decode Mini Program with decodeURIComponent. Can you use it in url? With parameters, Mini Program can receive parameters directly in onLoad by option.

two。 Transparent settings at the top of Mini Program

The H5 page embedded by web-view cannot be transparent and can only modify the color at the top of the page.

a. All page settings are transparent (add navigationStyle:custom to the window in app.json and the top navigation bar disappears, leaving only the capsule buttons in the upper right corner)

b. Separate page settings are transparent (add navigationStyle:custom to each separate json)

3. Mini Program jumps to H5 page

Note: after using redirectTo to jump to the H5 page, all embedded H5 pages have no return button, only a return home button on the left

4.H5 jumps to the Mini Program page

Need to be introduced to use parameters

Wx.miniProgram.switchTab ({url:url}); / / Jump to Mini Program tabbar page. Parameters cannot be passed.

Wx.miniProgram.navigateTo ({url:url,query: {/ / enter parameters}}); / / Jump to the non-tabbar page of Mini Program to pass parameters

Other jumps refer to the following figure

5.H5 uses bindmessage to pass parameters to Mini Program.

Tips: when using bindmessage, only the user clicks Mini Program's back, share button or destroy the embedded H5 page of Mini Program to trigger the passing of parameters, otherwise it will not be triggered.

This is the end of the introduction of "how to embed WeChat Mini Programs webView into H5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.