web-view 网页容器

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

# 属性说明

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

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 代码示例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.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 网页中支持的接口有:

      接口模块 接口说明 具体接口 备注
      设备 拨打电话 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

      # 相关接口3

      用户分享时可获取当前web-view的URL,即在onShareAppMessage回调中返回webViewUrl参数。

      # 代码示例3

        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。

        # 常见问题

        # Q:web-view页面里如何使用拨打电话接口

        A:请参考如下示例,示例中swan.js版本号仅为参考,请参考最新版本号进行开发。

        代码示例

        <!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"></script>
            </head>
            <body>
                <button onclick="callMobile()">clickMe</button>
            </body>
            <script type="text/javascript">
                function callMobile() {
                    swan.makePhoneCall({
                        phoneNumber: '10086' 
                    });
                }
            </script>
        </html>
        

        # 参考示例

        # 参考示例 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 打开

          在开发者工具中预览效果

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

            # 常见问题

            # Q: 如何判断 H5 页面是否在小程序 web-view 打开?

            A: H5 运行时,通过 window.navigator.userAgent 获取浏览器 userAgent。当 userAgent 字符串中包含小程序标识:‘swan/’时,则说明当前环境为小程序 web-view。

            代码示例:

            在开发者工具中预览效果

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

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

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

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

            # Q: web-view 中参入含有中文使用三方自己的约定方式进行编码 iOS 打开后出现白屏的情况该如何处理?

            A: 避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,如需要使用中文字体,请对中文字符进行 encodeURIComponent

            # Q: 如何在 web-view 中使用拨打电话的功能?

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

            图中 “2.0.6.js”版本为举例,开发时请参考swanjs文档中的最新版本好进行填写。


            完整的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"></script>
                </head>
                <body>
                    <button onclick="callMobile()">clickMe</button>
                </body>
                <script type="text/javascript">
                    function callMobile() {
                        swan.makePhoneCall({
                            phoneNumber: '10086' 
                        });
                    }
                </script>
            </html>
            

            # Q:小程序使用 webview,分享出去的链接能直接是 webview 对应的 url 而不是小程序的 url 么?

            A:小程序页面在进行分享时,如果分享出去的是web view引入的H5 页面,只能是分享的小程序的页面路径,不能是原H5 的页面路径。