uni-app app端web-view通信

本文简介

点赞 + 关注 + 收藏 = 学会了

在 uni-app 或者 微信小程序 中，都有 web-view 组件。

该组件是一个浏览器组件，可以承载网页的内容。而且该组件是全屏的，会覆盖该组件之外的其他内容。

本文要讲解在 uni-app 中使用 web-view 怎么实现大量数据通信。

我所使用的是 Vue 3 语法。

web-view 数据通信方法

web-view 文档

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

<template>
  <view class="content">
    <web-view
        src="/https/blog.csdn.net/hybrid/html/index.html?msg=hello"
    ></web-view>
  </view>
</template>

这种方法的优点是简单，缺点是传输的数据量有限，而且基本传输的都是字符串。

2、使用 uni.webview.js 传值

本文使用的是 uni.webview.1.5.3.js ，在阅读本文时可能官方已经更新了新版。

你可以在 web-view 文档