微信小程序 网页 微信小程序承载网页 web-view

web-view

基础库 1.6.4 开始支持，低版本需做兼容处理

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

示例代码：

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/" rel="external nofollow" ></web-view>

相关接口 1

<web-view/>网页中可使用JSSDK 1.3.0提供的接口返回小程序页面。 支持的接口有：

示例代码：

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js" rel="external nofollow" ></script>

// javascript
wx.miniProgram.navigateTo({url: "/path/to/page"})

相关接口 2

<web-view/>网页中仅支持以下JSSDK接口：

相关接口 3

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

示例代码：

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

相关接口 4

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。

示例代码：

// web-view下的页面内
wx.ready(function() {
    console.log(window.__wxjs_environment === "miniprogram") // true
})

Bug & Tip

1. 网页内iframe的域名也需要配置到域名白名单。
2. 开发者工具上，可以在 <web-view/> 组件上通过右键 - 调试，打开 <web-view/> 组件的调试。
3. 每个页面只能有一个<web-view/>，<web-view/>会自动铺满整个页面，并覆盖其他组件。
4. <web-view/>网页与小程序之间不支持除JSSDK提供的接口之外的通信。
5. 在iOS中，若存在JSSDK接口调用无响应的情况，可在<web-view/>的src后面加个#wechat_redirect解决。