阅读(3493) 赞(9)

百度智能小程序网页容器

2020-08-11 17:41:34 更新

web-view 网页容器

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

属性说明

属性名	类型	默认值	必填	说明				最低版本
src	String		是	webview 指向网页的链接				-
bindmessage	EventHandler		否	网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }				1.12.0 低版本请做兼容性处理

示例

在开发者工具中打开

代码示例 1

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

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

相关接口介绍

相关接口 1

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

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

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

代码示例 2

<!-- html -->
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.21.js" rel="external nofollow" ></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

接口模块	接口说明	具体接口	备注
设备	拨打电话	swan.makePhoneCall
开放接口	打开小程序	swan.navigateToSmartProgram	2.0.18 版本开始，支持使用 envVersion 打开不同版本的小程序
开放接口	登录	swan.login
剪贴板	设置剪贴板	swan.setClipboardData
设备	获取网络类型	swan.getNetworkType
媒体	预览图片	swan.previewImage
开放接口	分享	swan.openShare	需传入当前要分享的小程序的 appKey
地理位置	使用内置地图打开地点	swan.openLocation
地理位置	获取地理位置	swan.getLocation
图像接口	拍照或上传	swan.chooseImage

Bug & Tip

Tip：网页内 iframe 的域名也需要配置到域名白名单。
Tip：每个页面只能有一个 <web-view/>，<web-view/> 会自动铺满整个页面，并覆盖其他组件。
Tip：网页与智能小程序之间不支持除 JSSDK 提供的接口之外的通信，如果使用了 JSSDK 提供的接口，需要引入 swanjs，参见上方代码示例 2。
Tip：避免给组件设置的网页链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议做一下 encodeURIComponent。

参考示例

参考示例 1: 在特定时机接收到 H5 传递参数的函数
在开发者工具中打开

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

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

参考示例 2: 如何判断 H5 页面是否在小程序 web-view 打开

在开发者工具中打开

// isWebView 若为 true，则是在小程序的 web-view 中打开
const isWebView = /swan\//.test(window.navigator.userAgent) || /^webswan-/.test(window.name);

常见问题

Q：web-view 页面里如何使用拨打电话接口
Q：如何在 web-view 中使用拨打电话的功能

A：如果想在 web-view 使用 JSSDK 提供的接口能力，需要引入 swanjs 包，如下示例：

图中 “2.0.6.js”版本为举例，开发时请参考代码示例 2 中的最新版本号进行填写。

完整的 H5 示例：

生成的 h5 站点地址放入小程序 web-view 的 src 即可。

代码示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>call phone</title>
        <script src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.6.js" rel="external nofollow" ></script>
    </head>
    <body>
        <button onclick="callMobile()">clickMe</button>
    </body>
    <script type="text/javascript">
        function callMobile() {
            swan.makePhoneCall({
                phoneNumber: '10086' 
            });
        }
    </script>
</html>

Q：在 web-view 中使用了 cookie，导致存储信息与小程序不能共享的原因是什么

小程序中如需设置 cookie 建议使用 Storage；参见详情。
如需要共享小程序参数到 webview 页面中，可在 webview 的 src 中加上链接参数。

Q：小程序使用 web-view，分享时path字段指定的链接能直接是 web-view 对应的 url 而不是小程序的 path 吗

A：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信；

A：不能，使用 onShareAppMessage 或者 swan.openShare 进行分享时，path只能设置为小程序页面的 path，不能设置为 h5 页面的 url。

← 百度智能小程序开放数据

百度智能小程序点赞 →

百度智能小程序 网页容器