Example of how to embed H5 in WeChat applet webView

Preface

WeChat Mini Programs provide new open capabilities! It finally opens the function of embedding HTML pages in mini programs! Starting from WeChat Mini Program Basic Library 1.6.4, we can place a <web-view> component in the mini program to link our HTML page. Before this, we had no way to integrate our existing HTML programs (such as HTML5 article system, shopping mall system, etc.) into the mini program. We could only develop a new set using the mini program. Now with <web-view>, we can easily integrate these web systems, which reduces our workload considerably.

Tips: Personal mini programs do not currently support web-viwe references to H5. You also need to configure the H5 domain name as a business domain name in the mini program management background.

Here’s how

1. Directly introduce the page address;

<web-view :src="url"></web-view>

url is the address to be redirected. You can use encodeURIComponent to encode the url, and the mini program uses decodeURIComponent to decode it. You can use ? and & to carry parameters in the url, and the mini program can directly receive parameters in option in onLoad;

2. Set the top of the mini program to be transparent;

The H5 page embedded in the web-view cannot be set to be transparent, and you can only change the color of the top of the page;

• a. Set all pages to be transparent (add navigationStyle:custom to window in app.json, the top navigation bar will disappear, leaving only the capsule-shaped button in the upper right corner);
• b. Set individual pages to be transparent (add navigationStyle:custom to each individual json);

3. The applet jumps to the H5 page

Note: After using redirectTo to jump to the H5 page, all embedded H5 pages have no back button, and there is only one back to homepage button on the left.

4. H5 jumps to the mini program page

You need to introduce <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> to use parameters

wx.miniProgram.switchTab({ url:url}); // Jump to the mini program tabbar page, parameters cannot be passed

wx.miniProgram.navigateTo({ url:url,query:{//fill in parameters}});//jump to the mini program non-tabbar page, you can pass parameters

For other jumps, refer to the figure below.

5. H5 uses bindmessage to pass parameters to the mini program

Tips: When using bindmessage, the parameter transfer can only be triggered when the user clicks the back or share button of the mini program or the H5 page embedded in the mini program is destroyed, otherwise it will not be triggered.

6. H5 uses the interface of other mini programs, you can refer to the API. Since I haven’t involved it myself, I will give you a link for reference

Reference link: developers.weixin.qq.com/miniprogram…

Summarize

This is the end of this article about embedding WeChat applet webView into H5. For more relevant WeChat applet webView embedding into H5 content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!