草庐IT

uni-app app端web-view通信

德育处主任 2023-09-28 原文

本文简介

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

在 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 文档 里，滑到“注意事项”里面找到最新版的下载地址

file


主应用 /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种组件通讯方式》
点赞 + 关注 + 收藏 = 学会了

appweb-viewtext-alignalignstyle

有关uni-app app端web-view通信的更多相关文章

  1. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  4. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  5. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  6. ruby-on-rails - 复数 for fields_for has_many 关联未显示在 View 中 - 2

    目前，Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段，但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联，它们似乎是正确的，这可能与嵌套在公司下的项目有关，还是我遗漏了其他东西？提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关，但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi

  7. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  8. ruby-on-rails - 在 haml View 中重构条件 - 2

    除了可访问性标准不鼓励使用这一事实指向当前页面的链接，我应该怎么做重构以下View代码？#navigation%ul.tabbed-ifcurrent_page?(new_profile_path)%li{:class=>"current_page_item"}=link_tot("new_profile"),new_profile_path-else%li=link_tot("new_profile"),new_profile_path-ifcurrent_page?(profiles_path)%li{:class=>"current_page_item"}=link_tot("p

  9. ruby - Sinatra 找不到 View 目录 - 2

    我正在尝试以一种更类似于普通RubyGem结构的方式构建我的Sinatra应用程序。我有以下文件树:.├──app.rb├──config.ru├──Gemfile├──Gemfile.lock├──helpers│  ├──dbconfig.rb│  ├──functions.rb│  └──init.rb├──hidden│  └──Rakefile├──lib│  ├──admin.rb│  ├──api.rb│  ├──indexer.rb│  ├──init.rb│  └──magnet.rb├──models│  ├──init.rb│  ├──invite.rb│  ├─

  10. ruby - 如何配置 Ruby Mechanize 代理以通过 Charles Web 代理工作？ - 2

    我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe

随机推荐