【uni-app】App与webview双向实时通信

【uni-app】App与webview双向实时通信

在 Uniapp 中，App 与 里面嵌入的 webview 进行双向的实时通信

vue2 ， 模拟器

主要分为两部分

  • webview 向 app 发送信息

  • app 向 webview 发送信息

以下是实现方式，用一个例子来说明

（文章最后我会放这个例子的github地址）

webview 向 app 发送信息

示例： webview 里面向 app 发送 图片的 base64 ， app 保存图片到系统相册；

此处分为， app 和 webview 部分：

  • app 注册事件

  • webview 触发 app 的事件

app部分

  1. 保存到系统相册功能（功能具体细节不重要）

    // utils/appMessageHandler.js
// 这里代码都在app下执行
function appSaveImgFile(params) {
  const { base64, downloadName } = params
  const bitmap = new plus.nativeObj.Bitmap("test");
  bitmap.loadBase64Data(
    base64,
    function () {
      const url = "_doc/" + downloadName + ".png"; // url为时间戳命名方式
      bitmap.save(
        url,
        {
          overwrite: true, // 是否覆盖
          // quality: 'quality'  // 图片清晰度
        },
        (i) => {
          plus.gallery.save(
            i.target,
            function () {
              uni.showToast({
                title: "APP图片保存至相册",
                icon: "none",
              });
              bitmap.clear();
            },
            function (e) {
              uni.showToast({
                title: "APP图片保存至相册失败:" + JSON.stringify(e),
                icon: "none",
              });
              bitmap.clear();
            }
          );
        },
        (e) => {
          uni.showToast({
            title: "图片保存失败1:" + JSON.stringify(e),
            icon: "none",
          });
          bitmap.clear();
        }
      );
    },
    (e) => {
      uni.showToast({
        title: "图片保存失败2:" + JSON.stringify(e),
        icon: "none",
      });
      bitmap.clear();
    }
  );
}

export {
  appSaveImgFile,
}

  2. 在App.vue中注册事件；将 appMessageHandle.js 里面所有导出的事件进行注册；注意需要条件编译

    // App.vue
<script>
import * as appPlusMessageHandler from "./utils/appMessageHandler";

export default {
  data() {
    return {
      appRegisterMap: undefined,
    };
  },
  onLaunch: function () {
    console.log("App Launch");
    // #ifdef APP-PLUS
    // 注册事件
    plus.globalEvent.addEventListener("plusMessage", this.plusMessageHandler);
    // #endif
  },
  methods: {
    /**
     * 将所有导出的 app 事件
     * 用 map 建立 函数名 - 函数 的联系
     * 返回 map
     */
    registerAppPlusMap() {
      if (this.appRegisterMap) {
        return this.appRegisterMap;
      }
      let map = new Map();
      Object.keys(appPlusMessageHandler).forEach((item) => {
        map.set(item, appPlusMessageHandler[item]);
      });
      this.appRegisterMap = map;
      return map;
    },
    /**
     * 用 action 获取的函数名
     * 通过 map 获取到函数，调用执行
     */
    plusMessageHandler(msg) {
      let map = this.registerAppPlusMap();
      if (msg.data.args.data.arg?.action) {
        let handler = map.get(msg.data.args.data.arg?.action);
        let params = msg.data.args.data.arg?.params;
        handler && handler(params);
      }
    },
  },
};
</script>
webview 部分

通过使用 uni.webview.js (文末附录放源码，我做了些许修改，逻辑没改，是一些变量调整了下) 的功能 postMessage , 向 app 发送图片生成的 base64；

  1. main.js 中挂载 uWeb (uni.webview.js)

    // main.js
// 全局添加uWeb
// #ifdef H5
import uWeb from "@/utils/uni.webview.js";
// #endif

// #ifdef H5
Vue.prototype.$uWeb = uWeb;
// #endif

  2. 生成的图片base64，通过以下方式发送给 app

    此处 action 与 上面 plusMessageHandler方法的 action 是对应的

    appSaveImgFile 与 appMessageHandler.js 里的函数名是对应的

    // 某个页面或者js
this.$uWeb.postMessage({
        data: {
          action: "appSaveImgFile",
          params: {
            base64: imgBase64,
            downloadName,
          },
        },
      });

至此，webview 能随时向 app 发送消息了

在这里插入图片描述

App 向 webview 发送消息

使用 evalJS

分两步：

  1. webview 在 window 注册事件

  2. app 使用 evalJs 触发 webview 的事件

注意： 确保webview 先注册好事件之后，app发送的事件才能被 webview 接收到

具体实现，utils下新建appToWebview.js; appSendMessage 是给 App 用的；webviewGetMessage 是给 webview 注册用的

// appToWebview.js
// 发送信息之前，先要有 webviewGetMessage
function appSendMessage(_this, action, params) {
  const self = _this;
  self.currentWebview = self.$scope?.$getAppWebview()?.children()[0];
  //传递大量数据
  self.currentWebview?.evalJS(`${action}(${JSON.stringify(params)})`);
}

function webviewGetMessage(action, callback) {
  // #ifdef H5
  window[action] = (data) => {
    let params = JSON.parse(JSON.stringify(data));
    callback(params);
  };
  // #endif
}

export { appSendMessage, webviewGetMessage };
webview 部分

用 webviewGetMessage 注册一个 msgFromApp 名字的事件，给 App 调用；

  // 某个 webview 页面，
  created() {
    webviewGetMessage("msgFromApp", (params) => {
      console.log("getAppParams", params);
      this.appMsg = params;
    });
  },
App

用 appSendMessage 发送一个信息给 webview

  // 某个有 webview 的 app 页面，
  mounted() {
    setTimeout(() => {
      appSendMessage(this, "msgFromApp", { msgFromApp: 233 });
    }, 5000);
  },

在这里插入图片描述

至此，完成了 app 向 webview 发送信息

GitHub 地址

GitHub - adcGG/uniapp-app-webview: Communication between app and webview

这里 uniapp 项目，app 和 用到的 h5 地址是同一个项目下的

app/index 用到的 webview 的 url 为 webviewUrl: “http://192.168.1.16:8080/#/pages/h5/index”,

在这里插入图片描述

附录

uni.webview.js
!(function (e, n) {
  "object" == typeof exports && "undefined" != typeof module
    ? (module.exports = n())
    : "function" == typeof define && define.amd
    ? define(n)
    : ((e = e || self).webUni = n());
})(this, function () {
  "use strict";
  try {
    var e = {};
    Object.defineProperty(e, "passive", {
      get: function () {
        !0;
      },
    }),
      window.addEventListener("test-passive", null, e);
  } catch (e) {}
  var n = Object.prototype.hasOwnProperty;

  function t(e, t) {
    return n.call(e, t);
  }
  var i = [],
    a = function (e, n) {
      var t = {
        options: {
          timestamp: +new Date(),
        },
        name: e,
        arg: n,
      };
      if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) {
        if ("postMessage" === e) {
          var a = {
            data: [n],
          };
          return window.__dcloud_weex_postMessage
            ? window.__dcloud_weex_postMessage(a)
            : window.__dcloud_weex_.postMessage(JSON.stringify(a));
        }
        var o = {
          type: "WEB_INVOKE_APPSERVICE",
          args: {
            data: t,
            webviewIds: i,
          },
        };
        window.__dcloud_weex_postMessage
          ? window.__dcloud_weex_postMessageToService(o)
          : window.__dcloud_weex_.postMessageToService(JSON.stringify(o));
      }
      if (!window.plus)
        return window.parent.postMessage(
          {
            type: "WEB_INVOKE_APPSERVICE",
            data: t,
            pageId: "",
          },
          "*"
        );
      if (0 === i.length) {
        var r = plus.webview.currentWebview();
        if (!r) throw new Error("plus.webview.currentWebview() is undefined");
        var d = r.parent(),
          s = "";
        (s = d ? d.id : r.id), i.push(s);
      }
      if (plus.webview.getWebviewById("__uniapp__service"))
        plus.webview.postMessageToUniNView(
          {
            type: "WEB_INVOKE_APPSERVICE",
            args: {
              data: t,
              webviewIds: i,
            },
          },
          "__uniapp__service"
        );
      else {
        var w = JSON.stringify(t);
        plus.webview
          .getLaunchWebview()
          .evalJS(
            'UniPlusBridge.subscribeHandler("'
              .concat("WEB_INVOKE_APPSERVICE", '",')
              .concat(w, ",")
              .concat(JSON.stringify(i), ");")
          );
      }
    },
    o = {
      navigateTo: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url;
        a("navigateTo", {
          url: encodeURI(n),
        });
      },
      navigateBack: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.delta;
        a("navigateBack", {
          delta: parseInt(n) || 1,
        });
      },
      switchTab: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url;
        a("switchTab", {
          url: encodeURI(n),
        });
      },
      reLaunch: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url;
        a("reLaunch", {
          url: encodeURI(n),
        });
      },
      redirectTo: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url;
        a("redirectTo", {
          url: encodeURI(n),
        });
      },
      getEnv: function (e) {
        window.plus
          ? e({
              plus: !0,
            })
          : e({
              h5: !0,
            });
      },
      postMessage: function () {
        var e =
          arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
        a("postMessage", e.data || {});
      },
    },
    r = /uni-app/i.test(navigator.userAgent),
    d = /Html5Plus/i.test(navigator.userAgent),
    s = /complete|loaded|interactive/;
  var w = window.my && navigator.userAgent.indexOf("AlipayClient") > -1;
  var u =
    window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
  var c =
    window.qq &&
    window.qq.miniProgram &&
    /QQ/i.test(navigator.userAgent) &&
    /miniProgram/i.test(navigator.userAgent);
  var g =
    window.tt &&
    window.tt.miniProgram &&
    /toutiaomicroapp/i.test(navigator.userAgent);
  var v =
    window.wx &&
    window.wx.miniProgram &&
    /micromessenger/i.test(navigator.userAgent) &&
    /miniProgram/i.test(navigator.userAgent);
  var p = window.qa && /quickapp/i.test(navigator.userAgent);
  for (
    var l,
      _ = function () {
        (window.UniAppJSBridge = !0),
          document.dispatchEvent(
            new CustomEvent("UniAppJSBridgeReady", {
              bubbles: !0,
              cancelable: !0,
            })
          );
      },
      f = [
        function (e) {
          if (r || d)
            return (
              window.__dcloud_weex_postMessage || window.__dcloud_weex_
                ? document.addEventListener("DOMContentLoaded", e)
                : window.plus && s.test(document.readyState)
                ? setTimeout(e, 0)
                : document.addEventListener("plusready", e),
              o
            );
        },
        function (e) {
          if (v)
            return (
              window.WeixinJSBridge && window.WeixinJSBridge.invoke
                ? setTimeout(e, 0)
                : document.addEventListener("WeixinJSBridgeReady", e),
              window.wx.miniProgram
            );
        },
        function (e) {
          if (c)
            return (
              window.QQJSBridge && window.QQJSBridge.invoke
                ? setTimeout(e, 0)
                : document.addEventListener("QQJSBridgeReady", e),
              window.qq.miniProgram
            );
        },
        function (e) {
          if (w) {
            document.addEventListener("DOMContentLoaded", e);
            var n = window.my;
            return {
              navigateTo: n.navigateTo,
              navigateBack: n.navigateBack,
              switchTab: n.switchTab,
              reLaunch: n.reLaunch,
              redirectTo: n.redirectTo,
              postMessage: n.postMessage,
              getEnv: n.getEnv,
            };
          }
        },
        function (e) {
          if (u)
            return (
              document.addEventListener("DOMContentLoaded", e),
              window.swan.webView
            );
        },
        function (e) {
          if (g)
            return (
              document.addEventListener("DOMContentLoaded", e),
              window.tt.miniProgram
            );
        },
        function (e) {
          if (p) {
            window.QaJSBridge && window.QaJSBridge.invoke
              ? setTimeout(e, 0)
              : document.addEventListener("QaJSBridgeReady", e);
            var n = window.qa;
            return {
              navigateTo: n.navigateTo,
              navigateBack: n.navigateBack,
              switchTab: n.switchTab,
              reLaunch: n.reLaunch,
              redirectTo: n.redirectTo,
              postMessage: n.postMessage,
              getEnv: n.getEnv,
            };
          }
        },
        function (e) {
          return document.addEventListener("DOMContentLoaded", e), o;
        },
      ],
      m = 0;
    m < f.length && !(l = f[m](_));
    m++
  );
  l || (l = {});
  var E = "undefined" != typeof webUni ? webUni : {};
  if (!E.navigateTo) for (var b in l) t(l, b) && (E[b] = l[b]);
  return (E.webView = l), E;
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/937027.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

微信小程序处理交易投诉管理，支持多小程序

微信小程序处理交易投诉管理，支持多小程序

大家好&#xff0c;我是小悟 1、问题背景 玩过微信小程序生态的&#xff0c;或许就有这种感受&#xff0c;如果收到投诉单&#xff0c;不会及时通知到手机端&#xff0c;而是每天早上10:00向小程序的管理员及运营者推送通知。通知内容为截至前一天24时该小程序账号内待处理的交…
阅读更多...
AIGC-------AI生成内容如何赋能AR和VR体验?

AIGC-------AI生成内容如何赋能AR和VR体验?

AI生成内容如何赋能AR和VR体验 引言 增强现实&#xff08;AR&#xff09;和虚拟现实&#xff08;VR&#xff09;技术近年来蓬勃发展&#xff0c;为用户提供了沉浸式的体验。这些技术已经广泛应用于游戏、教育、医疗、建筑等领域。然而&#xff0c;AR和VR体验的质量与内容的丰富…
阅读更多...
zotero安装教程（包括茉莉花插件）

zotero安装教程（包括茉莉花插件）

zotero安装教程&#xff08;包括茉莉花插件&#xff09; zotero下载(windows)1-安装 Zotero2-安装 Zotero Connector3-安装浏览器插件--jasminum茉莉花功能&#xff1a;插件下载地址&#xff1a;[https://github.com/search?qjasminum&typerepositories](https://github.c…
阅读更多...
M｜可可西里

M｜可可西里

title: 可可西里 time: 2024-12-15 周日 rating: 8.5 豆瓣: 8.9 上映时间: “2004” 类型: M剧情犯罪 导演: 陆川 Chuan Lu 主演: 多布杰 Duobujie张垒 Lei Zhang 国家/地区: 中国大陆 片长/分钟: 90分钟 M&#xff5c;可可西里 粗砺的苍凉&#xff0c;沉默的悲壮。…
阅读更多...
ArcGIS教程(007)：制作中国行政区划图

ArcGIS教程(007)：制作中国行政区划图

文章目录 000：数据准备001：利用地理数据制作中国行政区划图000：数据准备 通过网盘分享的文件：ArcGIS教程(007)：中国行政区划图教程练习数据.zip 链接: https://pan.baidu.com/s/1nMiRYD-dbv2S0DoeQzR87g?pwd=3535 提取码: 3535001：利用地理数据制作中国行政区划图 ne_…
阅读更多...
KeepAlive与RouterView缓存

KeepAlive与RouterView缓存

参考 vue动态组件&#xff1c;Component&#xff1e;与&#xff1c;KeepAlive&#xff1e; KeepAlive官网介绍 缓存之keep-alive的理解和应用 Vue3Vite KeepAlive页面缓存问题 vue多级菜单(路由)导致缓存(keep-alive)失效 vue3 router-view keeperalive对于同一路径但路径…
阅读更多...
类与对象以及ES6的继承

类与对象以及ES6的继承

认识class定义类 类的声明用的比较多 类与构造函数的异同 类的构造函数 类的实例方法 类的访问器方法 在类里面写拦截方法 类的静态方法 通过类名直接访问 es6类的继承-extends super关键字 子类可以重写父类方法包括父类的静态方法也可以继承父类的静态方法 babel可以将新的代…
阅读更多...
AI监控赋能健身馆与游泳馆全方位守护，提升安全效率

AI监控赋能健身馆与游泳馆全方位守护，提升安全效率

一、AI视频监控技术的崛起 随着人工智能技术的不断发展&#xff0c;AI视频监控正成为各行业保障安全、提升效率的关键工具。相比传统监控系统&#xff0c;AI技术赋予监控系统实时分析、智能识别和精准预警的能力&#xff0c;让“被动监视”转变为“主动防控”。 二、AI监控应用…
阅读更多...
嵌入式学习(18)-stm32F407串口接收空闲中断+DMA

嵌入式学习(18)-stm32F407串口接收空闲中断+DMA

一、概述 在一些一次性接收大批量数据的引用场合&#xff0c;如果使用接收中断会频繁的进入接收中断影响代码的运行效率。为了解决这个问题可以使用串口的空闲中断DMA实现。 二、应用 在网上招了一些例程在STM32F407的平台上都没有跑通会出现各种异常&#xff0c;主要原因还…
阅读更多...
2024.12.15CISCN长城杯铁人三项赛

2024.12.15CISCN长城杯铁人三项赛

WEB Safe_Proxy 刚开始比赛看到题目名字里面有Proxy 就先来做这个了(在最近的比赛中见到的proxy题比较多) 题目进入之后给了源码 源码 from flask import Flask, request, render_template_string import socket import threading import htmlapp Flask(__name__)app.rout…
阅读更多...
【Linux服务器nginx前端部署详解】ubantu22.04，前端Vue项目dist打包

【Linux服务器nginx前端部署详解】ubantu22.04，前端Vue项目dist打包

本文主要讲一下在Linux系统环境下&#xff08;以ubantu22.04为例&#xff09;&#xff0c;如何用nginx部署前端Vue项目打包的dist静态资源。有些具体的命令就不展开讲了&#xff0c;可以自行查看其他博主的文章&#xff0c;我主要讲整体的步骤和思路。 一、ubantu系统安装ngin…
阅读更多...
SAP软件如何启用反记账功能

SAP软件如何启用反记账功能

SAP软件和国内ERP软件不一样&#xff0c;它在录入会计凭证时是不可以录入负数的&#xff08;即红冲凭证&#xff09;&#xff0c;因此无法直接实现传统意义上的红字冲销。 比如&#xff0c;如下SAP正常和冲销业务产生会计凭证如下&#xff1a; 正常的业务凭证&#xff1a; 借…
阅读更多...
iOS swift开发系列 -- tabbar问题总结

iOS swift开发系列 -- tabbar问题总结

1.单视图如何改为tabbar&#xff0c;以便显示2个标签页 右上角➕&#xff0c;输入tabbar 找到控件&#xff0c;然后选中&#xff0c;把entrypoint移动到tabbar控件 2.改成tabbar&#xff0c;生成两个item&#xff0c;配置各自视图后&#xff0c;启动发现报错 Thread 1: “-[p…
阅读更多...
Level DB --- coding

Level DB --- coding

Util coding是Level DB中重要的数据结构&#xff0c;它主要用来将uint32&#xff0c;和uint64高效的序列化到字符串中和从字符串中反序列化出来。 coding两种序列化形式 Util coding中主要提供两种序列化形式&#xff0c;即Fixed形式和Var形式。其中Fixed形式是常规形式&…
阅读更多...
EfficientNet与复合缩放理论（Compound Scaling Theory） 详解（MATLAB）

EfficientNet与复合缩放理论（Compound Scaling Theory） 详解（MATLAB）

1.EfficientNet网络与模型复合缩放 1.1 EfficientNet网络简介 1.1.1 提出背景、动机与过程 EfficientNet是一种高效的卷积神经网络&#xff08;CNN&#xff09;&#xff0c;由Google的研究团队Tan等人在2019年提出。EfficientNet的设计目标是提高网络的性能&#xff0c;同时减…
阅读更多...
CentOS7 Apache安装踩坑

CentOS7 Apache安装踩坑

Gnome桌面右键弹出终端。 [rootlocalhost ~]# yum repolist 已加载插件&#xff1a;fastestmirror, langpacks /var/run/yum.pid 已被锁定&#xff0c;PID 为 2611 的另一个程序正在运行。 Another app is currently holding the yum lock; waiting for it to exit... [root…
阅读更多...
接收文件并保存在本地

接收文件并保存在本地

接受多个文件 前端 <input typefile namefilelist> <input typefile namefilelist> <input typefile namefilelist> ... 后端 filelist request.files.getlist(name属性值) 获取文件内容 单个文件 file request.files.get(file)content file.read…
阅读更多...
关于解决VScode中python解释器中的库Not Found的问题

关于解决VScode中python解释器中的库Not Found的问题

关于解决VScode中python解释器中的库Not Found的问题 背景介绍解决步骤1. 检查当前使用的Python解释器2. 确保选择正确的Python解释器3. 安装库到指定的Python环境①使用 pip 完整路径指定&#xff1a;②使用 conda 安装&#xff1a;③使用 python -m pip 指定解释器&#xff1…
阅读更多...
springboot436校园招聘系统(论文+源码)_kaic

springboot436校园招聘系统(论文+源码)_kaic

摘 要 使用旧方法对校园招聘系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在校园招聘系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的校园招聘系…
阅读更多...
YOLOv9改进，YOLOv9引入DLKA-Attention可变形大核注意力，WACV2024，二次创新RepNCSPELAN4结构

YOLOv9改进，YOLOv9引入DLKA-Attention可变形大核注意力，WACV2024，二次创新RepNCSPELAN4结构

摘要 作者引入了一种称为可变形大核注意力 （D-LKA Attention） 的新方法来增强医学图像分割。这种方法使用大型卷积内核有效地捕获体积上下文，避免了过多的计算需求。D-LKA Attention 还受益于可变形卷积，以适应不同的数据模式。 理论介绍 大核卷积（Large Kernel Convolu…
阅读更多...
最新文章

Copyright @ 2022~2023