Skip to main content
Supported Regions:上海

WebView

Web Page Embedding​

WebView

The web page embedding component is a cross-platform solution that requires only a single development effort to adapt to PC, H5, and Mini Program environments.

  • On PC and H5 platforms, the Web Page Nesting Component can function as the iframe tag.
  • On the Mini Program side, the Web Page Nesting Component functions as the web-view component. Only Mini Programs with an Enterprise Account can use it. Business domain names must be configured before publishing to ensure proper web page display. The web page content automatically fills the entire screen and overlays other components on the Mini Program side.

Usage Instructions​

  1. Add the Web Page Nesting component in the editor.

  2. Set the web page link to be embedded in the property panelImage faf7558d560e1491eb6755185869f644

  3. On the web side, no business domain configuration is required when embedding web pages. On the Mini Program side, business domain configuration is necessary. Only the Enterprise edition and above support fully managed certified Mini Programs. You can upgrade your plan edition on the Tencent Cloud WeDa purchase page.

Business Domain Configuration​

Scan-to-Authorize Certified Mini Program​

  • Go to the Mini Program Authentication page and set the authentication method to Fully Managed Authentication.

  • Image d06a7f2e-28cc-46e5-8ea5-0b3c7ea72253

  • Click the Mini Program list to go to the details page and configure business domains.

  • Image c3733674-a712-4e1c-b54f-a26ad982bdfa

Fully Managed Certified Mini Program​

  • Go to Mini Program Development Management > Development Settings > Business Domains
Note

Only Mini Programs of enterprise type have the business domain module.

  • Image cd20766beba5f34fa7bb859694aebdbe

Component Usage Limits​

  1. When using web-view components in Mini Programs, the Mini Program must be an enterprise entity.

  2. When the web-view opens a page embedded with Tencent Video, it prompts that the iframe does not support referencing non-business domains.

  • When referencing official account articles on the web end, preview is unavailable. The reference policy allows embedding iframes in official account articles, while third-party iframes require business domain verification. It can be understood as:

      1. Opening an official account article containing an embedded iframe with Tencent Video is supported.
      1. Accessing the developer's own business domain where the web page embeds an iframe containing Tencent Video is not supported.

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
webpage linklinkstring

小程序端以真机调试效果为准。除关联公众号文章链接外，其他链接需配置业务域名才可生效

Example: "https://cloud.tencent.com/product/weda"

allowallowstring

Specify the permission policy for an . This policy defines which features (such as microphone, camera, battery, web share) the can use based on the request source. This attribute is not currently supported for mini programs.

Example: "microphone;camera;midi;encrypted-media;geolocation;fullscreen;clipboard-write;clipboard-read;"

sandboxsandboxstring

Control the restrictions applied to content embedded in . The attribute's value can be empty to apply all restrictions, or separated by spaces to lift specific limitations. This property is not currently supported in mini programs.

Example: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads"

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
Web page loaded successfullyloadobject
  • src: string网页链接地址

    网页链接地址
Compatible with all platforms

-

Web page failed to loaderrorobject
  • src: string网页链接地址

    网页链接地址
Compatible with all platforms

-

Receive web page messagesmessageobject
  • data: object 接收信息内容

    接收信息内容
    		Compatible with all platforms

    -

    Properties API​

    Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

    Read-only Property Name
    Property Identifier
    Type
    Description
    webpage linklinkstring

    Method API​

    Only web-side invocation of the method to send messages to pages is supported. Mini Program side has more restrictions. Refer to the Mini Program documentation for implementation: Mini Program sending messages to pages.

    Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

    Method Name
    Method Identifier
    Parameters
    Method Description
    send messagepostMessageobject
    • message: string消息内容
    • targetorigin: stringtargetorigin

      web端通过窗口的 origin 属性来指定哪些窗口能接收到消息事件
    • transfer: stringtransfer

      是一串和 message 同时传递的 Transferable 对象。web端参数。

    sendMessage to the page

    Style API​

    Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

    Name
    Class Name
    Description and Examples
    root element.wd-web-viewweb page nested component root element
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-web-view {
  /* Write CSS styles here */
}
    PC web page nested root element.wd-pc-web-viewCan write styles for web pages on PC
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-web-view {
  /* Write CSS styles here */
}
    H5 web page root element.wd-h5-web-viewCan write styles for web pages on H5
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-web-view {
  /* Write CSS styles here */
}
    WeChat Mini Program web page nested root element.wd-mp-web-viewCan write styles for web pages in mini programs
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-web-view {
  /* Write CSS styles here */
}

    Learn about Style API

    Frequently Asked Questions​

    Methods for Implementing Mini Program Navigation in Nested Web Page Components​

    To implement the feature of navigating back to a specific Mini Program page within the nested web page components of a Mini Program (typically referring to H5 pages loaded in the web-view component), the core approach is to utilize the JavaScript SDK officially provided by WeChat. Below are the detailed implementation steps and key considerations. For details, refer to web-view.

    1. Import WeChat JS-SDK: In your H5 page, it is necessary to first import WeChat's JavaScript SDK.
    <script
      type="text/javascript"
      src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
    ></script>

    If your H5 page is built on the Tencent Cloud WeDa low-code platform, refer to External Resource (js/css) Loading. If it is a self-developed page, simply add the above script tag.

    1. Invoke the navigation interface: At the location where navigation needs to be triggered in the H5 page (e.g., a button click event), call the wx.miniProgram.navigateTo method provided by the SDK.
    // javascript
    wx.miniProgram.navigateTo({ url: '/path/to/page' });