2023年微信小程序承载网页 web-view
作者: --时间: 2022-09-29
阅读量：
随着移动互联网的普及，微信小程序已成为企业推广和服务的新渠道之一。其中，微信小程序承载网页 web-view 的容器是一个重要的功能，可以直接将网页内嵌到小程序中展示。以下是与 web-view 相关的几个要点：
1. web-view 的基本属性
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。需要注意的是，它仅在基础库 1.6.4 及以上版本支持，低版本需要做兼容处理。个人类型与海外类型的小程序暂不支持使用。
其中，最重要的属性是 src ，它指向网页的链接。需要登录小程序管理后台配置域名白名单，使得 web-view 能够打开该链接。
2. 相关接口
<web-view/> 网页中可使用 JSSDK 1.3.0 提供的接口返回小程序页面。支持的接口包括:
- wx.miniProgram.navigateTo
- wx.miniProgram.navigateBack
- wx.miniProgram.switchTab
- wx.miniProgram.reLaunch
- wx.miniProgram.redirectTo
同时，从 web-view 网页中仅支持少量 JSSDK 接口，如：
- checkJSApi
- chooseImage
- previewImage
- uploadImage
- downloadImage
- getLocalImgData等。
用户分享时可获取当前 web-view 的URL，即在onShareAppMessage回调中返回webViewUrl参数。同时，在网页内可以通过window.__wxjs_environment变量判断是否在小程序环境。
3. Bug & Tip
需要注意以下几个要点：
- 网页内iframe的域名也需要配置到域名白名单。
- 开发者工具上，可以在 <web-view/> 组件上通过右键 - 调试，打开 <web-view/> 组件的调试。
- 每个页面只能有一个<web-view/>，<web-view/>会自动铺满整个页面，并覆盖其他组件。
- <web-view/>网页与小程序之间不支持除JSSDK提供的接口之外的通信。
- 在iOS中，若存在JSSDK接口调用无响应的情况，可在<web-view/>的src后面加个#wechat_redirect解决。
