Skip to main content

Web Page Nesting

WebView

Web Embedding Component is a universal component compatible with three platforms, requiring only one-time development to adapt to PC, H5, and Mini Program platforms.

  • On PC and H5 platforms, the Web Embedding Component functions as an iframe tag.
  • On the Mini Program platform, the Web Embedding Component functions as a web-view component. Only Mini Programs with an enterprise entity can use it. Before publishing, you need to configure the business domain for the web page to display properly. The web content on the Mini Program end automatically fills the entire page and overlays other components.

Usage Instructions​

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

  2. Set the web page URL to be embedded in the properties panel

  3. When embedding web pages on the web end, no business domain configuration is required. When embedding web pages on the Mini Program end, business domain configuration is required. Fully managed authenticated Mini Programs are only supported in the Enterprise edition or higher. You can upgrade your plan version on the Tencent Cloud WeDa Low-Code purchase page.

Business Domain Configuration​

QR Code Authorization and Authentication for Mini Programs​

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

  • image

  • Click the Mini Program list, enter the details page, and configure the business domain.

  • image

Fully Managed Authenticated Mini Programs​

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

Only enterprise Mini Programs have the business domain module.

  • image

Component Usage Limitations​

  1. When using web page embedding components in Mini Programs, it is necessary to ensure that the Mini Program is an enterprise entity.

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

  • On the web end, referencing Official Account articles cannot be previewed. The reference strategy is to allow embedding iframes in Official Account articles. For third-party iframes, the business domain will be verified. It can be understood as:

      1. It is supported when opening an official account article that embeds an iframe containing Tencent Video.
      1. When opening the developer's own business domain, if the web page embeds an iframe containing Tencent Video, this scenario is not supported.

Properties​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
网页链接linkstring

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

示例："https://cloud.tencent.com/product/weda"

allowallowstring

用于为 指定其权限策略。该策略根据请求的来源规定 可以使用哪些特性（例如，访问麦克风、摄像头、电池、web 共享等）。该属性暂不支持小程序。

示例："microphone;camera;midi;encrypted-media;geolocation;fullscreen;clipboard-write;clipboard-read;"

sandboxsandboxstring

控制应用于嵌入在 中的内容的限制。该属性的值可以为空以应用所有限制，也可以为空格分隔的标记以解除特定的限制。该属性暂不支持小程序。

示例："allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads"

Events​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
网页加载成功loadobject
  • src: string网页链接地址

    网页链接地址
兼容三端

-

网页加载失败errorobject
  • src: string网页链接地址

    网页链接地址
兼容三端

-

接收网页消息messageobject
  • data: object 接收信息内容

    接收信息内容
    		兼容三端

    -

    Property API​

    通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

    只读属性名
    属性标识
    类型
    说明
    网页链接linkstring

    Method API​

    Only supports calling the method to send messages to the page on the web end. The Mini Program end has more restrictions. Refer to the Mini Program documentation for implementation: Sending Messages from Mini Program to Page

    通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

    方法名
    方法标识
    参数
    方法说明
    发送消息postMessageobject
    • message: string消息内容
    • targetorigin: stringtargetorigin

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

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

    向页面发送消息

    Style API​

    通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

    名称
    类名
    说明和示例
    根元素.wd-web-view网页嵌套组件根元素
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-web-view {
  /* 在这里编写CSS 样式 */
}
    PC 端网页嵌套根元素.wd-pc-web-view可以为 PC 端的网页嵌套编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-web-view {
  /* 在这里编写CSS 样式 */
}
    H5 端网页嵌套根元素.wd-h5-web-view可以为 H5 端的网页嵌套编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-web-view {
  /* 在这里编写CSS 样式 */
}
    小程序端网页嵌套根元素.wd-mp-web-view可以为小程序端的网页嵌套编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-web-view {
  /* 在这里编写CSS 样式 */
}

    了解样式 API