web-view 网页容器

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

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例1 ：

在开发者工具中预览效果

  1. <view>    <web-view src="{{src}}"></web-view></view>
  1. Page({    data: {        src: 'https://smartprogram.baidu.com'    },   //接收H5页传过来的参数    onLoad(options) {        console.log(options.webViewUrl);    }});

代码示例2 - 在特定时机接受到H5传递参数的函数 ：

在开发者工具中预览效果

  1. <view>    <web-view src="{{src}}"></web-view></view>
  1. Page({    data: {        src: 'https://smartprogram.baidu.com'    },    //小程序后退、组件销毁、分享时，由此函数来接收H5页传过来的参数    postMessage(options) {        console.log(options);    }});

代码示例3 - 如何判断 H5 页面是否在小程序 web-view 打开 ：

在开发者工具中预览效果

  1. let UA = window.navigator.userAgent;var regex = /swan\//;console.log( regex.test(UA) );// 若为true，则是在小程序的web-view中打开

代码示例4 - 原生页面与H5页面之间的跳转刷新：

在开发者工具中预览效果 -

  1. <web-view src="{{url}}"></web-view>
  1. Page({    data: {        src: ''    },   //接收H5页传过来的参数    onLoad(options) {        this.setData({'src': options.webViewUrl})    },    onShow(){        this.onLoad()    }});

-

  1. Page({    data: { },    navigateTo(e) {        swan.navigateTo({            url: "/detail/detail?webViewUrl=https://smartprogram.baidu.com&Math.radom()"        });    }});

相关接口介绍

相关接口1

web-view 网页中可使用 JSSDK 提供的接口返回智能小程序页面。 支持的接口有：

旧版本 swan.xxxx,已更新为 swan.webView.xxxx。

代码示例

  1. <!-- html --><script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.20.js"></script>
  1. // javascriptswan.webView.navigateTo({url: '/pages/detail/index'});swan.webView.postMessage({data: 'foo'})swan.webView.postMessage({data: {foo: 'bar'} })swan.webView.getEnv(function(res) {console.log(res.smartprogram) // true })

相关接口2

web-view 网页中支持的接口有：

相关接口3

用户分享时可获取当前web-view的URL，即在onShareAppMessage回调中返回webViewUrl参数。 代码示例：

  1. Page({    onShareAppMessage(options) {        console.log(options.webViewUrl);    }})

使用 web-view 打开限定域名内的网页

智能小程序开发者平台，单击“设置->开发设置”，即可在业务域名中下载、配置校验文件并配置业务域名。

Bug & Tip

  • web-view/>，<web-view/> 会自动铺满整个页面，并覆盖其他组件。
  • swanjs。 -