web-view

本文介绍web-view组件的使用。

****组件是一个可以用来承载H5网页的组件，自动铺满整个小程序页面。需要开发者到开发者后台配置渲染H5网页的安全域名。

注意

每个页面只能有一个<web-view />，该组件会自动铺满整个页面，并覆盖其它组件。暂时不支持钉钉微应用相关JSAPI使用，后续迭代支持。

属性

属性	类型	说明
src	String	web-view 要渲染的H5网页URL。H5网页URL需要登录开发者后台，进行H5域名白名单配置。
onMessage	EventHandler	网页向小程序 postMessage 消息，e.detail = { data }。

示例代码

<web-view id="web-view-1" src="https://open.dingtalk.com/mobile" onMessage="test"></web-view>

<web-view />要渲染的H5页面可以使用手动引入https://appx/web-view.min.js （此链接仅支持在钉钉客户端内访问），组件提供了相关与小程序交互的接口。

说明

该示例代码的双向通信能力的流程是 H5 先发消息给小程序，小程序接收到消息后再发消息给 H5。

接口名	接口类别	说明
dd.postMessage	向小程序发送消息	向小程序发送消息，自定义一组或多组key、value数据，格式为JSON，如：dd.postMessage({name:"测试web-view"})。
dd.onMessage	监听小程序发过来的消息	监听小程序发过来的消息。

示例代码

<web-view />H5页面内：

dd.postMessage信息发送后，小程序页面接收信息时，会执行onMessage配置的方法：

下面介绍一种通过桥接的方式在 H5 中调用 dd.alert 的方法，通过该方式也可以调用其他 dd 上挂载的 api。

承载 <web-view /> 组件的小程序页面内的 index.axml：

<web-view id="web-view-1" src="https://open.dingtalk.com/mobile" onMessage="onmessage"></web-view>

承载 <web-view /> 组件的小程序页面内的 index.js：

<web-view />H5页面内：