web-view

web-view组件用于承载 H5 网页，自动铺满整个小程序页面。

属性名 类型 默认值 描述
src String 无 web-view 要渲染的 H5 网页 URL
onMessage EventHandle 无 网页向小程序 postMessage 消息。e.detail = { data }

说明：每个页面只能有一个web-view，请不要渲染多个web-view，会自动铺满整个页面，并覆盖其它组件。

代码示例

  1. <!-- axml -->
  2. <web-view src="https://xxxx.com/" onMessage="test"></web-view>

相关API
web-view H5页面可以使用手动引入 https://appx/web-view.min.js, 提供了相关的接口返回小程序页面。支持的接口有：

说明：webview组件中调用小程序的方法，还是需要使用my进行调用。

接口类别 接口名 说明
导航栏 my.navigateTo 保留当前页面，跳转到应用内的某个指定页面
导航栏 my.navigateBack 关闭当前页面，返回上一级或多级页面
导航栏 my.switchTab 跳转到指定 tabBar 页面，并关闭其他所有非 tabBar 页面
导航栏 my.reLaunch 关闭当前所有页面，跳转到应用内的某个指定页面
导航栏 my.redirectTo 关闭当前页面，跳转到应用内的某个指定页面
向小程序发送消息 my.postMessage 向小程序发送消息，自定义一组或多组key、value数据，格式为JSON，如：my.postMessage({name:”测试web-view”})
监听小程序发过来的消息 my.onMessage 监听小程序发过来的消息

代码示例

  • web-view H5页面：

    1. <!-- html -->
    2. <script type="text/javascript" src="https://appx/web-view.min.js"></script>
    3. // 头部执行以下脚本 或 
    4. <script>
    5.   if (navigator.userAgent.indexOf('AlipayClient') > -1 || navigator.userAgent.indexOf('mPaaSClient') > -1) {
    6.     document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
    7.   }
    8. // javascript
    9. my.navigateTo({url: '../get-user-info/get-user-info'});
    10. // 网页向小程序 postMessage 消息
    11. my.postMessage({name:"测试web-view"});
    12. // 接收来自小程序的消息。
    13. my.onMessage = function(e) {
    14.   console.log(e); //{'sendToWebView': '1'}
    15. }
    16. </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 = dd.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. )};