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

已于 2024-06-01 17:05:50 修改
阅读量1.3k 收藏 25
点赞数 27
文章标签： uni-app
于 2024-06-01 17:02:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Assa_ss/article/details/139376323
版权

【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;
});
智能คิดถึง
关注
  • 27
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp - 如何跟内嵌 web-view 组件内的网页交互，与 web-view 内嵌网页进行双向通信（uniapp 与 webview 网页之间的 “相互“ 传值）提供详细的示例代码及解决方案
高级前端工程师
02-08 4153
uni-app如何实现在H5环境中与web-view中的网页交互通讯uniappuni-app 与 web-view内嵌网页 双向通信 如何跟内嵌web-view交互uniappAPP与webview子页面交互uniappAPP与webview子页面交互关于uni-app 使用 web-view 页面之间互相跳转、通信等问题uniapp的web-view嵌入网页,网页与uniapp通信webview如何与uniapp写的H5页面交互嵌套webview调用uniapp各种API组件实现H5和app通讯和交互
小程序中 和web-view通信、Uniapp和webview通信
初遇你时动了情
11-08 2086
按上面那种写法，你会发现怎么回事？bdinmaeeage接收不到消息？上方的代码，操作之后点击分享小程序段就收到信息了。
uniappAPP和webview互相通讯，webview调用APP原生方法
c347087870的博客
07-31 1645
uniappAPP和webview互相通讯，webview调用APP原生方法
uniapp web-view组件双向通信
lauwen
01-19 2699
本文主要介绍在uniapp中页面与webview组件内页面的双向通信问题。
uni-app开发介绍PPT
08-12
uni-app的生命周期与Vue标准组件的生命周期相同。uni-app语法支持js、css、vue等。uni-app在发布到H5时支持所有vue的语法；发布到App和小程序时，由于平台限制，无法实现全部vue语法，但uni-app仍是对vue语法支持度...
uni-app:从运行原理上面解决性能优化问题
01-27
【uni-app】是一款多端开发框架，它允许开发者编写一次代码，就能运行在iOS、Android、Web等不同平台上。然而，由于其非原生的特性，可能会遇到性能问题，这在React Native、Flutter等框架中也同样存在。本文将探讨...
uni-app调用摄像头扫码功能示例（支持前置和后置摄像头）
03-07
在移动应用开发中，uni-app是一个非常流行的框架，它允许开发者使用一套代码库构建多端应用，包括H5、小程序、App等。本示例主要介绍如何在uni-app中实现调用摄像头进行扫码功能，同时支持前置和后置摄像头切换。这...
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
uni-ui:基于uni-app的ui框架
03-30
优化逻辑层和视图层通讯折损非H5，不管是小程序还是App，不管是app的webview渲染还是原生渲染，全都是逻辑层和视图层分离的。这里就有一个逻辑层和视图层通讯的折损问题。动一个可跟手的组件，由于通讯的损耗，用js...
智慧医院智能导诊系统源码，智慧导诊小程序源码，采用前端框架：Uniapp+后端框架：springboot+移动端：微信小程序、H5自主研发
baina666的博客
07-16 1198
智慧导诊系统是一种基于人工智能和大数据技术的医疗辅助系统，旨在提高患者的就医效率和医院的管理效率。以下是对智慧导诊系统的详细解析：定义与功能智慧导诊系统通过自然语言处理、机器学习等技术，自动分析患者的病情及伴随症状，并根据疾病类型和症状推荐合适的科室和医生，为患者提供精准的分诊服务。该系统能够帮助患者快速了解医院信息、科室布局、医生排班等情况，从而提高就医效率。
基于springboot+vue+uniapp的高校就业招聘系统小程序
老卓爱爪哇 的博客
07-15 1858
系统以高校就业招聘系统为主题，利用不断发展和进步的网络技术，实现用户注册、登录、浏览公告信息、企业通知、简历投递、职位招聘、企业等信息，并进行简历、公告信息、企业通知、简历投递、职位招聘、职位收藏、职位留言、论坛信息的操作等。本论文介绍高校就业招聘系统软件的开发，主要是借助微信平台来完成的，框架使用的是Spring Boot框架，编程语言使用的是Java语言，数据库使用的是MySQL数据库。
uniapp 手写签名实现
baifangfang521的博客
07-17 444
这个例子提供了一个基本的手写签名实现，但在实际应用中可能需要考虑更多细节，比如签名质量的调整、设备兼容性问题等。注意：实际应用中可能需要额外的处理，比如按钮按压效果、签名清除功能等。在uniapp中实现手写签名功能，可以使用HTML5的。在这个例子中，我们定义了一个。元素和相关的方法来处理绘图。方法记录线条的移动并绘制，方法来保存或处理签名。
HBuilder X3.4版本中使用uni-app自定义组件
weixin_44464850的博客
07-16 400
2.在pages.json文件中，设置easycom参数。1.创建componets文件，并编写你的组件页面。2.使用页面import导入和注册组件。1.在uni_modules下，路径为。
uniapp动态计算并设置元素高度
最新发布
weixin_43066287的博客
07-17 256
uniapp动态计算并设置元素高度。
uniapp H5 如何根据接口返回form表单，跳转银联支付界面？
Smile_ping的博客
07-14 261
uniapp根据接口返回form表单，自动跳转第三方网站，实现银联支付
uniapp：国家、省市区，4级联动
sunluyi的博客
07-15 267
选择器完成国家，省市区，4级联动。
uni-app 文件上传实战：适配多平台
qq_22232065的博客
07-15 1020
在文件上传方面，不同平台存在显著的差异。小程序：对文件类型和大小限制严格，以保障性能和用户体验。文件选择接口特定，且在安卓和 iOS 系统可能存在差异和 bug。需关注网络状况，做好重试和错误提示机制。快应用：文件类型和大小的限制与其他平台有所不同，需提前了解规范。运行环境特殊，对文件路径处理和权限获取有特定要求，且用户交互设计需更简洁直观。App 端：若选择非媒体文件，需借助特定插件。若选择特定目录下的文件，可通过相关 API 实现。H5 端。
uni-app webview 解决兼容性
08-24
在uni-app中使用webview存在兼容性问题。根据引用的描述，webview在uni-app中的通信机制存在问题，可能无法正常接收数据。另外，web-view的bug也较为常见且没有被官方及时解决，因此一些开发者选择不使用web-view。而引用中提到的web-view是通过plus.webview.create创建的frame窗口，这种方式可以在uni-app中使用。但是，引用中指出，nvue获取webview窗口的方式与普通vue的方式不同，需要进行特殊处理。 解决兼容性问题可以考虑以下几点方法: 1.避免使用web-view，在uni-app中使用其他组件或技术来实现相同的功能，如使用h5标签、页面跳转等。 2.如果必须使用web-view，可以尝试使用plus.webview.create创建frame窗口的方式来解决部分兼容性问题。注意在nvue中获取webview窗口的方式需要与普通vue有所不同，可以参考引用中提到的方法进行处理。 3.及时向官方反馈发现的bug，希望能够得到官方的解决方案或修复。 综上所述，解决uni-app webview的兼容性问题可以考虑避免使用web-view、使用plus.webview.create创建frame窗口、特殊处理nvue中获取webview窗口的方式以及向官方反馈问题。具体的解决方法需要根据具体情况进行调整和选择。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [uni-app webview(非web-view)与网页的通讯方法](https://blog.csdn.net/qq_23064433/article/details/120289001)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性](https://blog.csdn.net/tangdou369098655/article/details/130234169)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值