web-view

web-view 组件用于承载 H5 网页，自动铺满整个小程序页面。每个页面只能有一个web-view，请不要渲染多个web-view，会自动铺满整个页面，并覆盖其它组件。

说明：基础库 1.6.0 开始支持，低版本需做兼容处理，操作参见 小程序基础库说明。
属性名 类型 默认值 描述
src String 无 web-view 要渲染的 H5 网页 URL。
onMessage EventHandle 无 网页向小程序 postMessage 消息。e.detail = { data }

代码示例

  1. <!-- axml -->
  2. <!-- 指向支付宝首页的web-view -->
  3. <web-view src="https://ds.alipay.com/" onMessage="test"></web-view>

相关 API

web-view H5页面可以使用手动引入 https://appx/web-view.min.js（此链接仅支持在 mPaaS 客户端内访问）, 提供了相关的接口返回小程序页面。支持的接口有：

接口类别 接口名 说明
导航栏 my.navigateTo 保留当前页面，跳转到应用内的某个指定页面。
导航栏 my.navigateBack 关闭当前页面，返回上一级或多级页面。
导航栏 my.switchTab 跳转到指定 tabBar 页面，并关闭其他所有非 tabBar 页面。
导航栏 my.reLaunch 关闭当前所有页面，跳转到应用内的某个指定页面。
导航栏 my.redirectTo 关闭当前页面，跳转到应用内的某个指定页面。
图片 my.chooseImage 拍照或从手机相册中选择图片。
图片 my.previewImage 预览图片。
位置 my.getLocation 获取用户当前的地理位置信息。
位置 my.openLocation 使用内置地图查看位置。
交互反馈 my.alert alert 警告框。
交互反馈 my.showLoading 显示加载提示。
交互反馈 my.hideLoading 隐藏加载提示。
缓存 my.setStorage 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的数据。
缓存 my.getStorage 获取缓存数据。
缓存 my.removeStorage 删除缓存数据。
缓存 my.clearStorage 清除本地数据缓存。
缓存 my.getStorageInfo 异步获取当前 storage 的相关信息。
网络状态 my.getNetworkType 获取当前网络状态。
向小程序发送消息 my.postMessage 向小程序发送消息，自定义一组或多组 key、value 数据，格式为 JSON，如：my.postMessage({name:"测试 web-view"})。
监听小程序发过来的消息 my.onMessage 监听小程序发过来的消息， webview 组件控制。
获取当前环境 my.getEnv 获取当前环境。

代码示例

  • web-viewH5 页面：

    1.   <!-- html -->
    2.   <script type="text/javascript" src="https://appx/web-view.min.js"></script>
    3.   // 如该 H5 页面需要同时在非 mPaaS 客户端内使用，为避免该请求404，可参考以下写法
    4.   // 请尽量在 html 头部执行以下脚本
    5.   <script>
    6.     if (navigator.userAgent.indexOf('AlipayClient') > -1 || navigator.userAgent.indexOf('mPaaSClient') > -1) {
    7.       document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
    8.     }
    10.   // javascript
    11.   my.navigateTo({url: '../get-user-info/get-user-info'});
    13.   // 网页向小程序 postMessage 消息
    14.   my.postMessage({name:"测试 web-view"});
    16.   // 接收来自小程序的消息。
    17.   my.onMessage = function(e) {
    18.     console.log(e); //{'sendToWebView': '1'}
    19.   }
    21.   // 判断是否运行在小程序环境里
    22.   my.getEnv(function(res) {
    23.     console.log(res.miniprogram) // true
    24.   });
    26.   my.startShare();
    28.   </script>

  • my.postMessage 信息发送后，小程序页面接收信息时，会执行 onMessage 配置的方法：

    1.   // 小程序页面对应的 page.js 声明 test 方法，
    2.   // 由于 page.axml 里的 web-view 组件设置了 onMessage="test",
    3.   // 当网页里执行完 my.postMessage 后，test 方法会被执行
    4.   Page({
    5.     onLoad(e){
    6.       this.webViewContext = my.createWebViewContext('web-view-1');    
    7.     },
    8.     test(e){
    9.       my.alert({
    10.         content:JSON.stringify(e.detail),
    11.       });  
    12.       this.webViewContext.postMessage({'sendToWebView': '1'});
    13.     },
    14.   )};

  • my.getEnv 示例代码：

    1.   // 判断是否运行在小程序环境里
    2.   my.getEnv(function(res){
    3.       console.log(res.miniprogram); //true
    4.   });

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

    1.   Page({
    2.     onShareAppMessage(options) {
    3.       console.log(options.webViewUrl)
    4.     }
    5.   });

常见问题

H5 怎么传递信息给小程序？

请使用 my.postMessage 接口来传递数据，代码示例如下：

  1. my.postMessage({key1:"value1",key2:"value2"});

小程序如何传递信息给 H5？

web-view 目前已支持了双向通信能力，更多细节参见 webview 组件控制 一节。

webview 里如何返回小程序？

web-view H5 页面可以使用手动引入 https://appx/web-view.min.js(此链接仅支持在 mPaaS 客户端内访问），再调用 my.navigateTo 接口即可。

使用了小程序的 chooseImage 接口，如何在 H5 里进行图片上传？

可将获取到的图片路径通过 my.postMessage() 将相关数据传递给小程序后进行上传。