首页 > 网络编程 > JavaScript > javascript类库 > vue.js > uni-app App与webview双向实时通信

uni-app中App与webview双向实时通信详细代码示例

2024-07-17 09:38:04 作者：智能คิดถึง

在移动应用开发中,uni-app是一个非常流行的框架,它允许开发者使用一套代码库构建多端应用,包括H5、小程序、App等,这篇文章主要给大家介绍了关于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部分

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

// 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,
}

在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；

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

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

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

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

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

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

App 向 webview 发送消息

使用 evalJS

分两步：

webview 在 window 注册事件
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;
});

总结

到此这篇关于uni-app中App与webview双向实时通信的文章就介绍到这了,更多相关uni-app App与webview双向实时通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

uni-app中App与webview双向实时通信详细代码示例

webview 向 app 发送信息

app部分

webview 部分

App 向 webview 发送消息

webview 部分

App

GitHub 地址

附录

uni.webview.js

总结

您可能感兴趣的文章: