乐趣区

关于前端:uniapp-app端webview通信

jiezi

本文简介

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

在 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="/hybrid/html/index.html?msg=hello"
    ></web-view>
  </view>
</template>

这种办法的长处是简略，毛病是传输的数据量无限，而且根本传输的都是字符串。

2、应用 uni.webview.js 传值

本文应用的是 uni.webview.1.5.3.js，在浏览本文时可能官网曾经更新了新版。

你能够在 web-view 文档 里，滑到“注意事项”外面找到最新版的下载地址

主利用 /pages/index/index.vue

<template>
  <view class="content">
    <web-view
      ref="webview"
      src="/hybrid/html/index.html"
      @message="handleMessage"
    ></web-view>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'

const webview = ref(null)

const pages = getCurrentPages()

const vw = ref(null)

// 获取子利用
function getVw() {
  // 找到路由栈里的最初一位
  vw.value = pages[pages.length - 1].$getAppWebview().children()[0]

  // 应用 evalJS 办法，调用子利用里的事件
  // receiveData 是在子利用里定义的事件
  // 最初须要留神，evalJS 传入的是一个字符串。vw.value.evalJS("receiveData({msg:' 雷猴啊 '})")
}

onLoad(() => {
  // 如果是页面初始化调用时，须要延时一下
  setTimeout(() => {getVw()
  }, 1000)
})
</script>

子利用 /hybrid/html/index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web-view</title>
</head>
<body>
  <!-- 引入 uni.webview.js -->
  <script src="./js/uni.webview.1.5.3.js"></script>
  <script>
    // 接管外层传进来的数据
    function receiveData(data) {console.log(JSON.stringify(data))
    }
  </script>
</body>
</html>

这么简略就实现了大量数据的传输，而且还能够传对象等数据。

最初须要留神的是，子利用定义接收数据的办法名，要跟主利用调用时统一。

比方本例定义的办法名为 receiveData。

子传父

子利用要向主利用传值，uni-app 官网就提供了办法 @message。

主利用 /pages/index/index.vue

<template>
  <view class="content">
    <web-view
      src="/hybrid/html/index.html"
      @message="handleMessage"
    ></web-view>
  </view>
</template>

<script setup>
import {ref} from 'vue'

// 承受 webview 传递过去的数据
function handleMessage(msg) {console.log(msg)
}
</script>

子利用 /hybrid/html/index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web-view</title>
</head>
<body>
  <div>
    <button onclick="handleClick()"> 向上传递数据 </button>
  </div>
    
  <script src="./js/uni.webview.1.5.3.js"></script>
  <script>
    // 向外传递数据，数据要放在 data 里
    function handleClick () {
      uni.postMessage({
        data: {msg: '雷猴'}
      })
    }
  </script>
</body>
</html>

此时在页面上点击按钮，主利用就会接管到子利用传过来的数据。

除了 @message 外，uni-app 还提供了很多办法和属性能够调用。

办法

办法名 阐明 平台差别阐明
uni.navigateTo navigateTo
uni.redirectTo redirectTo
uni.reLaunch reLaunch
uni.switchTab switchTab
uni.navigateBack navigateBack
uni.postMessage 向利用发送音讯 字节跳动小程序不反对、H5 暂不反对（能够间接应用 window.postMessage (opens new window)）
uni.getEnv 获取以后环境 字节跳动小程序与飞书小程序不反对

属性

属性名 类型 阐明 平台差别阐明
src String webview 指向网页的链接
allow String 用于为 iframe (opens new window)指定其特色策略(opens new window) H5
sandbox String 该属性对出现在 iframe (opens new window)框架中的内容启用一些额定的限度条件。 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)）
@onPostMessage EventHandler 网页向利用实时 postMessage App-nvue

以上官网提供的办法和属性倡议你都尝试一遍，都是非常简单的。

举荐浏览

👍《『uni-app、小程序』蓝牙连贯、读写数据全过程》

👍《uni-app App 端半屏间断扫码》

👍《Vue3 过 10 种组件通信形式》
点赞 + 关注 + 珍藏 = 学会了

退出移动版