WebView

<web-view /> 组件是一个可以用来承载H5网页的组件，会自动铺满整个小程序页面。

属性名类型默认值描述最低版本
srcStringweb-view 要渲染的H5网页URL。H5网页URL需要登录小程序管理后台-小程序详细-设置中，进行H5域名白名单配置
onMessageEventHandle网页向小程序 postMessage 消息。e.detail = { data }
基础库 1.6.0 开始支持，低版本需做兼容每个页面只能有一个<web-view />，请不要渲染多个<web-view />，会自动铺满整个页面，并覆盖其它组件。

示例代码

  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 （此链接仅支持在支付宝客户端内访问）, 提供了相关的接口返回小程序页面。支持的接口有：

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

示例代码

<web-view />H5页面：

  1. <!-- html -->
  2. <script type="text/javascript" src="https://appx/web-view.min.js"></script>
  3. // 如该H5页面需要同时在非支付宝客户端内使用，为避免该请求404，可参考以下写法
  4. // 请尽量在html头部执行以下脚本
  5. <script>
  6.   if (navigator.userAgent.indexOf('AlipayClient') > -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域名不在web-view的H5域名白名单内，请重新到支付宝小程序配置后台→设置→H5域名配置里设置（如下图）。
    • 原因二：使用了scheme方式进行页面跳转，请不要使用该方式；
    • 原因三：跳转链接是支付宝钱包客户端某个端内H5页面，请不要使用该方式。
    • 原因四：配置域名后，未重新设置体验版或者推送真机预览导致
      图片.png

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

    • 请使用my.postMessage接口来传递数据，代码示例如：
  1.   my.postMessage({key1:"value1",key2:"value2"});
  • 小程序如何传递信息给H5？
    • <web-view />目前已支持了双向通信能力，更多细节请参考webview组件控制一节。
  • webview里如何会返回小程序？
  • 使用了小程序的chooseImage接口，如何在H5里进行图片上传？
    • 可将获取到的图片路径通过my.postMessage()将相关数据传递给小程序后进行上传。

原文: https://docs.alipay.com/mini/component/web-view