web-view

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

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

代码示例

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

相关 API

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

代码示例

• <web-view />H5页面：

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

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

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

• my.getEnv 示例代码：

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

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

    Page({
      onShareAppMessage(options) {
        console.log(options.webViewUrl)
      }
    });

常见问题

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

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

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() 将相关数据传递给小程序后进行上传。