web-view

--- theme: smartblue --- # 本文简介 **点赞 + 关注 + 收藏 = 学会了** 在 `uni-app` 或者 `微信小程序` 中，都有 `web-view` 组件。该组件是一个浏览器组件，可以承载网页的内容。而且该组件是全屏的，会覆盖该组件之外的其他内容。
本文要讲解在 `uni-app` 中使用 `web-view` 怎么实现大量数据通信。我所使用的是 `Vue 3` 语法。

# web-view 数据通信方法 [web-view 文档](https://uniapp.dcloud.io/component/web-view.html) `web-view` 其实有点像 `iframe` ，但在 `uni-app` 又提供了几种基础的通信方式。基础用法可以看文档，本文主要讲解如何在 **主应用** 向 **web-view** 传输数据。
本案例目录结构 ``` 省略部分目录 - hybrid |- html |- js |- uni.webview.1.5.3.js |-index.html - pages |- index |- index.vue ```
## 父传子我们暂定，**主应用** 为 **父**，`web-view` 的页面为 **子** 。 “父传子” 的方式有2种： 1. 通过 `url` 传值 2. 使用 `uni.webview.js`
### 1、通过 url 传值数据量少的话，可以通过 `url` 的方式传给子应用。 **index.vue** ```html ``` 这种方法的优点是简单，缺点是传输的数据量有限，而且基本传输的都是字符串。
### 2、使用 uni.webview.js 传值本文使用的是 [`uni.webview.1.5.3.js`](https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js) ，在阅读本文时可能官方已经更新了新版。你可以在 [web-view 文档](https://uniapp.dcloud.io/component/web-view.html) 里，滑到“注意事项”里面找到最新版的下载地址 ![01.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad0fc360d5054b03912f84d09e67a9ad~tplv-k3u1fbpfcp-watermark.image?)
**主应用 /pages/index/index.vue** ```html ```
**子应用 /hybrid/html/index.html** ```html web-view ```
这么简单就实现了大量数据的传输，而且还可以传对象等数据。最后需要注意的是，子应用定义接收数据的方法名，要跟主应用调用时一致。比如本例定义的方法名为 `receiveData` 。

## 子传父子应用要向主应用传值，`uni-app` 官方就提供了方法 `@message` 。
**主应用 /pages/index/index.vue** ```html ```
**子应用 /hybrid/html/index.html** ```html web-view

``` 此时在页面上点击按钮，主应用就会接收到子应用传过来的数据。
除了 `@message` 外，`uni-app` 还提供了很多方法和属性可以调用。 **方法** | 方法名 | 说明 | 平台差异说明 | | :--------------- | :----------------------------------------------------------- | :----------------------------------------------------------- | | uni.navigateTo | [navigateTo](https://uniapp.dcloud.io/api/router#navigateto) | | | uni.redirectTo | [redirectTo](https://uniapp.dcloud.io/api/router#redirectto) | | | uni.reLaunch | [reLaunch](https://uniapp.dcloud.io/api/router#relaunch) | | | uni.switchTab | [switchTab](https://uniapp.dcloud.io/api/router#switchtab) | | | uni.navigateBack | [navigateBack](https://uniapp.dcloud.io/api/router#navigateback) | | | uni.postMessage | 向应用发送消息 | 字节跳动小程序不支持、H5 暂不支持（可以直接使用 [window.postMessage (opens new window)](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)） | | uni.getEnv | 获取当前环境 | 字节跳动小程序与飞书小程序不支持 |
**属性** | 属性名 | 类型 | 说明 | 平台差异说明 | | :------------- | :----------- | :----------------------------------------------------------- | :----------------------------------------------------------- | | src | String | webview 指向网页的链接 | | | allow | String | 用于为 [iframe (opens new window)](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)指定其[特征策略(opens new window)](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/策略特征) | H5 | | sandbox | String | 该属性对呈现在 [iframe (opens new window)](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)框架中的内容启用一些额外的限制条件。 | H5 | | webview-styles | Object | webview 的样式 | App-vue | | update-title | Boolean | 是否自动更新当前页面标题。默认值：`true` | App-vue (HBuilder X 3.3.8+) | | @message | EventHandler | 网页向应用 `postMessage` 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 | H5 暂不支持（可以直接使用 [window.postMessage (opens new window)](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)） | | @onPostMessage | EventHandler | 网页向应用实时 `postMessage` | App-nvue | 以上官方提供的方法和属性建议你都尝试一遍，都是非常简单的。

# 推荐阅读 👍[《『uni-app、小程序』蓝牙连接、读写数据全过程》](https://juejin.cn/post/7093171532318375950) 👍[《uni-app App端半屏连续扫码》](https://juejin.cn/post/7072621583939928077) 👍[《Vue3 过10种组件通讯方式》](https://juejin.cn/post/7069251532339806238)