< 文档首页
全部产品
弹性计算
存储
数据库
安全
大数据
人工智能
网络与CDN
视频服务
容器与中间件
开发与运维
API与工具
物联网
物联网行业方案
专有云
专有云（线下）
企业应用与服务
数字金融
域名与网站
工商财税与知识产权
解决方案
会员服务
更多
搜本产品
搜全站

    webview 组件控制

    更新时间：2020-07-07 19:42:03

    ★ 我的收藏
    本页目录

    通过创建 webviewContext，提供从小程序向 web-view 发送消息的能力。

    说明：
    • 基础库 1.8.0 及以上版本支持本功能，低版本需做兼容处理，操作参见 小程序基础库说明。
    • mPaaS 10.1.32 及以上版本支持本功能。

    my.createWebViewContext(webviewId)

    该接口用于通过创建 webviewContext 提供从小程序向 web-view 发送消息的能力。创建并返回 web-view 上下文 webViewContext 对象。

    入参

    参数 类型 必填 说明
    webviewId String 是 要创建的 web-view 所对应的 ID 属性。

    返回值

    为一个 webViewContext 对象。

    webViewContext 通过 webviewId 跟一个 web-view 组件绑定，通过它可以实现一些功能。

    webViewContext 对象的方法如下：

    方法 参数 描述 兼容性
    postMessage Object 小程序向 web-view 组件发送消息，配合 web-view.js 中提供的 my.postMessage 可以实现小程序和 web-view 网页的双向通信。 1.8.0

    代码示例

    1. <view>
    2.   <web-view id="web-view-1" src="..." onMessage="onMessage"></web-view>
    3. </view>
    1. Page({
    2.   onLoad() {
    3.     this.webViewContext = my.createWebViewContext('web-view-1');
    4.   },
    5.   // 接收来自H5的消息
    6.   onMessage(e) {
    7.       console.log(e); //{'sendToMiniProgram': '0'}
    8.     // 向H5发送消息
    9.     this.webViewContext.postMessage({'sendToWebView': '1'});
    10.   }
    11. })
    1. // H5的js代码中需要先定义my.onMessage 用于接收来自小程序的消息。
    2. my.onMessage = function(e) {
    3.     console.log(e); //{'sendToWebView': '1'}
    4. }
    5. // H5向小程序发送消息
    6. my.postMessage({'sendToMiniProgram': '0'});
    说明：以上的双向通信能力的流程是 H5 先发消息给小程序，小程序接收到消息后再发消息给 H5。
    上一篇：小程序跳转
    下一篇：接入 mPaaS 小程序
    相关文档
    相关产品
    • 移动开发平台 mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 移动研发平台EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。
    • 移动推送
      移动推送（Mobile Push）是提供给移动开发者的移动端消息推送服务，通过在App中集成推送功能，进行高效、精准、实时的消息推送，从而使业务及时触达用户，提高用户粘性。