web-view 网页容器

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

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例1 ：

在开发者工具中预览效果

<view>
    <web-view src="{{src}}"></web-view>
</view>

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

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

在开发者工具中预览效果

<view>
    <web-view src="{{src}}"></web-view>
</view>

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

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

在开发者工具中预览效果

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

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

在开发者工具中预览效果

• 在 detail文件中

<web-view src="{{url}}"></web-view>

Page({
    data: {
        src: ''
    },
   //接收H5页传过来的参数
    onLoad(options) {
        this.setData({'src': options.webViewUrl})
    },
    onShow(){
        this.onLoad()
    }
});

• 在 index 文件中

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。

代码示例

<!-- html -->
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.20.js"></script>

// javascript
swan.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参数。

代码示例：

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

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

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

Bug & Tip

• Tip：网页内 iframe 的域名也需要配置到域名白名单。
• Tip：每个页面只能有一个 <web-view/>，<web-view/> 会自动铺满整个页面，并覆盖其他组件。
• Tip：网页与智能小程序之间不支持除 JSSDK 提供的接口之外的通信。
• Tip：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。
• Tip：如果使用了 JSSDK 提供的接口，需要引入 swanjs。
• Tip：H5 运行时，通过 window.navigator.userAgent 获取浏览器 userAgent。当 userAgent 字符串中包含小程序标识：‘swan/’时，则说明当前环境为小程序 web-view。