web-view

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。

属性名类型默认值说明
srcStringwebview 指向网页的链接。
bindmessageEventHandler网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }

示例代码

  1. <!-- jxml -->
  2. <!-- 指向京东公众平台首页的web-view -->
  3. <web-view src="http://admin.vapp.jd.com"></web-view>
相关接口 1

<web-view/>网页中可使用以下API：

接口名说明
jd.miniProgram.navigateTo参数与小程序接口一致
jd.miniProgram.navigateBack参数与小程序接口一致
jd.miniProgram.switchTab参数与小程序接口一致
jd.miniProgram.reLaunch参数与小程序接口一致
jd.miniProgram.redirectTo参数与小程序接口一致
jd.miniProgram.postMessage向小程序发送消息
jd.miniProgram.getEnv获取当前环境

示例代码

  1. <!-- html -->
  2. <script type="text/javascript" src="xxxxxx.js"></script>
jd.miniProgram.navigateTo({url: '/path/to/page'})
jd.miniProgram.postMessage({ data: 'fromMy' })
jd.miniProgram.postMessage({ data: {id: '3'} })
jd.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })
Bug & Tip

  1. 网页内 iframe 的域名也需要配置到域名白名单。
  2. 开发者工具上，可以在 <web-view/> 组件上通过右键 - 调试，打开 <web-view/> 组件的调试。每个页面只能有一个 <web-view/>，<web-view/> 会自动铺满整个页面，并覆盖其他组件。
  3. <web-view/> 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。