SoFunction
Updated on 2025-05-11

Detailed explanation of the use and application scenarios of webview components in WeChat applets

1. Basic use of webview components

The webview component in the WeChat applet is equivalent to an iframe in the HTML page, which allows developers to open an H5 page in the WeChat applet. Starting from the WeChat applet basic library version 1.6.4, developers can use it in the applet<web-view>Components to link HTML pages. Here are the basic steps to use the webview component:

  • Configure business domain name：
    • In the development settings of the WeChat applet background, find the "Business Domain Name" under "Development Management" and add the legal domain name that needs to be embedded in the H5 page in the applet (up to 200 can be added).
  • Usage Components：
    • Add in the applet's page<web-view>Components and set upsrcThe attribute is a link to the page H5. There can only be one per page<web-view>component, and it will be displayed at the highest level by default.
<web-view src=""></web-view>

2. Application scenarios of webview components

  • Realize login-free：
    • By embedding the H5 page in the applet, you can associate and bind third-party accounts (such as portal websites) with the applet openId/UnionId to achieve a user's login-free experience between the applet and the H5 page.
  • Embed rich text content：
    • For portals or community-like applications, they usually contain a large amount of news and posts, which usually come with rich text in various CSS styles. By embedding these H5 news pages in the applet, development costs can be greatly reduced while maintaining the richness of content and consistency of styles.
  • Hot updates and reduced audits：
    • For content, announcements or activity pages that need to be updated frequently, embedded H5 pages can reduce the hassle of frequently submitting applet reviews. In addition, the H5 page can also use the mini program's recording, scanning and other functions to provide a richer user experience.
  • Implement cross-platform sharing：
    • In some cases, developers may want to share data and features between different platforms such as applets and H5 pages. Through the webview component, two-way communication and data transmission between applets and H5 pages can be realized, thereby achieving seamless cross-platform connection.

3. Communication between mini program and H5

  • Mini program passes parameters to H5：
    • The applet can be modified by<web-view>ComponentsrcProperties to pass parameters to H5 pages. These parameters can be passed through URL path stitching and parsed and obtained through JavaScript in H5 pages.
  • H5 transfer parameters to the mini program：
    • In the H5 page, you can use the JSSDK provided by the WeChat applet (such asweixin-js-sdk) to send messages to the applet. By callingMethod, you can pass data to the applet and bind it in the appletbindmessageEvents to receive this data.

4. Things to note

  • Personal type applet does not support：
    • Please note that personal-type applets do not support the use of webview components, which are only applicable to enterprise applets.
  • Security and privacy protection：
    • When using webview components, you need to ensure that the source of the H5 page is trustworthy to avoid security risks. In addition, attention should be paid to protecting users' privacy data and avoiding passing sensitive information between the H5 page and the applet.
  • Compatibility and performance：
    • Different versions of WeChat clients may support webview components differently. Therefore, it is necessary to pay attention to compatibility issues during the development process and conduct sufficient testing to ensure performance stability and reliability.

Through the above introduction, I believe readers have a deeper understanding of the usage methods and application scenarios of webview components in WeChat applets. In actual development, appropriate components and technical solutions can be selected according to specific needs and scenarios to achieve better user experience and business results.

Summarize

This is the article about the use and application scenarios of webview components in WeChat applets. For more related contents of webview components in WeChat applets, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!