web-view

承载网页的容器。会自动铺满整个小程序页面。一个页面只允许存在一个<web-view>，否则会导致当前页面的导航栏返回按钮不可用。
网页内 iframe 的域名需要配置到域名白名单，请在「GMU小程序开放平台-小程序开发-版本发布-域名管理」中进行配置，配置时需要注意：域名只支持 https 协议。

效果展示

示例代码

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">web-view</text>
        <text class="page__desc">承载网页的容器。</text>
    </view>
    <view class="page__bd">
        <web-view src="https://m.baidu.com/" bindload="onload" bindmessage="onmessage"></web-view>
    </view>
</view>

嵌套的js文件向小程序发送消息

window.parent.postMessage({ data: {foo: 'bar'} }, "*")

API

属性	类型	默认值	必填	说明
src	string	无	否	webview 指向网页的链接。
bindmessage	eventhandle	无	否	网页向小程序 postMessage 时，会触发并收到消息。e.detail = { data }
bindload	eventhandle	无	否	网页加载成功时候触发此事件。e.detail = { src }

多平台支持

属性	平台支持
src	支付宝
bindmessage	支付宝
bindload

注释：

支付宝需进行域名白名单配置，个人小程序不支持webview组件，如需查看效果，需在支付宝小程序开发者工具中忽略Webview域名合法性检查（仅在本地模拟、预览和远程调试时生效）

接口名	说明
gmu.miniProgram.navigateTo	参数与小程序接口一致 #
gmu.miniProgram.navigateBack	参数与小程序接口一致 #
gmu.miniProgram.switchTab	参数与小程序接口一致 #
gmu.miniProgram.redirectTo	参数与小程序接口一致 #

示例代码

// 在需要调用JS接口的页面引入JS文件
// <script src="webviewSDK.min.js"></script>

gmu.miniProgram.navigateTo({
  url: '/page/index?id=1',
  success: function(res) {
    console.log(res)
  }
});
// 也可以不写callback 
gmu.miniProgram.switchTab({ url: '/page/index' });

gmu.miniProgram.navigateBack();

gmu.miniProgram.redirectTo({ url: '/page/index' });

接口名	说明
gmu.miniProgram.navigateToMiniProgram	参数与小程序接口一致 #
gmu.miniProgram.navigateBackMiniProgram	参数与小程序接口一致 #
gmu.miniProgram.setStorage	参数与小程序接口一致 #
gmu.miniProgram.getStorage	参数与小程序接口一致 #
gmu.miniProgram.removeStorage	参数与小程序接口一致 #

示例代码

gmu.miniProgram.navigateToMiniProgram({
  appId: '',
  path: 'page/index/index?id=123',
  extraData: {
    foo: 'bar'
  },
  success(res) {
    // 打开成功
  }
})

// 安卓暂不支持在二级页面调用
gmu.miniProgram.navigateBackMiniProgram();


gmu.miniProgram.setStorage({
  key: "key",
  data: "value"
})


gmu.miniProgram.getStorage({
  key: 'key',
  success (res) {
    let data = res.data
  }
})

gmu.miniProgram.removeStorage({key: 'key'})

效果展示

示例代码

WXML

API

多平台支持

注释：

相关接口1：

示例代码

相关接口2：

示例代码