uniapp 使用 webview 触发uni.postMessage

https://uniapp.dcloud.net.cn/component/web-view.html#uniappjsbridgeready-%E7%9A%84%E4%BD%BF%E7%94%A8

uni-app应用端web-view代码：

<template>
    <cl-page>
        <!-- <view class="m-wrap">
            <cl-button @click="handleClick">测试</cl-button>
        </view> -->
        <web-view
            :src="webViewSrc"
            @load="handleLoad"
            @error="handleError"
            @onPostMessage="handlePostMessage"
            @message="handleMessage"
        ></web-view>
    </cl-page>
</template>

<script setup lang="ts">
import moment from "moment";
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useConfig } from "@/config/hook";
import { useUi } from "@/ui";

const ui = useUi();
const { router } = useConfig();
let webViewSrc = ref("");

//#region 其他事件
const handleClick = () => {};
//#endregion

//#region webView事件
const handleH5Message = (value: any) => {
    console.log("handleH5Message", value);
};
const handleMessage = (value: any) => {
    console.log("handleMessage", value);
};

const handlePostMessage = (value: any) => {
    console.log("handlePostMessge", value);
};

const handleLoad = (value: any) => {
    console.log("handleLoad", value);
};

const handleError = (value: any) => {
    console.log("handleError", value);
};

//#endregion

const init = () => {
    let { title, webViewUrl } = router.query;
    uni.setNavigationBarTitle({
        title,
    });
    if (webViewUrl && webViewUrl !== "undefined") {
        webViewSrc.value = "http://localhost:99/"; // webViewUrl;
    } else {
        ui.showToast("未设置webview链接");
    }
    window.addEventListener("message", handleH5Message);
};

onMounted(() => {
    init();
});

onBeforeUnmount(() => {
    window.removeEventListener("message", handleH5Message);
});
</script>

<style lang="scss" scoped>
.m-wrap {
    height: 100%;
}
</style>

嵌入的h5页面代码：

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>网络网页</title>
    <style type="text/css">
      .btn {
        display: block;
        margin: 20px auto;
        padding: 5px;
        background-color: #007aff;
        border: 0;
        color: #ffffff;
        height: 40px;
        width: 200px;
      }

      .btn-red {
        background-color: #dd524d;
      }

      .btn-yellow {
        background-color: #f0ad4e;
      }

      .desc {
        padding: 10px;
        color: #999999;
      }

      .post-message-section {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <p class="desc">
      web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。
    </p>
    <div class="btn-list">
      <button class="btn" type="button" data-action="navigateTo">
        navigateTo
      </button>
      <button class="btn" type="button" data-action="redirectTo">
        redirectTo
      </button>
      <button class="btn" type="button" data-action="navigateBack">
        navigateBack
      </button>
      <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
      <button class="btn" type="button" data-action="switchTab">
        switchTab
      </button>
    </div>
    <div class="post-message-section">
      <p class="desc">
        网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。
      </p>
      <div class="btn-list">
        <button class="btn btn-red" type="button" id="postMessage">
          postMessage
        </button>
      </div>
    </div>
    <script type="text/javascript">
      var userAgent = navigator.userAgent
      if (userAgent.indexOf('AlipayClient') > -1) {
        // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
        document.writeln(
          '<script src="https://appx/web-view.min.js"' +
            '>' +
            '<' +
            '/' +
            'script>'
        )
      } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
        // QQ 小程序
        document.write(
          '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
        )
      } else if (
        /miniProgram/i.test(userAgent) &&
        /micromessenger/i.test(userAgent)
      ) {
        // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>'
        )
      } else if (/toutiaomicroapp/i.test(userAgent)) {
        // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>'
        )
      } else if (/swan/i.test(userAgent)) {
        // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
        )
      } else if (/quickapp/i.test(userAgent)) {
        // quickapp
        document.write(
          '<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>'
        )
      }
      if (!/toutiaomicroapp/i.test(userAgent)) {
        document.querySelector('.post-message-section').style.visibility =
          'visible'
      }
    </script>
    <!-- uni 的 SDK -->
    <!-- 需要把 uni.webview.1.5.5.js 下载到自己的服务器 -->
    <!-- <script type="text/javascript" src="https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js"></script> -->
    <script
      type="text/javascript"
      src="./hybrid_html_uni.webview.1.5.5.js"
    ></script>

    <script type="text/javascript">
      // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function () {
        uni.postMessage({
          data: {
            action: 'message',
          },
        })
        uni.getEnv(function (res) {
          console.log('当前环境：' + JSON.stringify(res))
        })

        document
          .querySelector('.btn-list')
          .addEventListener('click', function (evt) {
            var target = evt.target
            if (target.tagName === 'BUTTON') {
              var action = target.getAttribute('data-action')
              switch (action) {
                case 'switchTab':
                  uni.switchTab({
                    url: '/pages/home/user/my',
                  })
                  break
                case 'reLaunch':
                  uni.reLaunch({
                    url: '/pages/tabBar/component/component',
                  })
                  break
                case 'navigateBack':
                  uni.navigateBack({
                    delta: 1,
                  })
                  break
                default:
                  uni[action]({
                    url: '/pages/home/schedule/index',
                  })
                  break
              }
            }
          })
        document
          .getElementById('postMessage')
          .addEventListener('click', function () {
            uni.postMessage({
              data: {
                action: '123',
              },
            })
            //uni.navigateBack()
          })
      })
    </script>
  </body>
</html>

hybrid_html_uni.webview.1.5.5.js:

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=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 i(e,i){return n.call(e,i)}var t=[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}function a(){return window.__uniapp_x_postMessage||window.__uniapp_x_}var r=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(a()){if("postMessage"===e){var r={data:n};return window.__uniapp_x_postMessage?window.__uniapp_x_postMessage(r):window.__uniapp_x_.postMessage(JSON.stringify(r))}var d={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__uniapp_x_postMessage?window.__uniapp_x_postMessageToService(d):window.__uniapp_x_.postMessageToService(JSON.stringify(d))}else if(o()){if("postMessage"===e){var s={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(s):window.__dcloud_weex_.postMessage(JSON.stringify(s))}var w={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(w):window.__dcloud_weex_.postMessageToService(JSON.stringify(w))}else{if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var u=plus.webview.currentWebview();if(!u)throw new Error("plus.webview.currentWebview() is undefined");var g=u.parent(),v="";v=g?g.id:u.id,t.push(v)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var c=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(c,",").concat(JSON.stringify(t),");"))}}},d={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;r("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("redirectTo",{url:encodeURI(n)})},getEnv:function(e){a()?e({uvue:!0}):o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r("postMessage",e.data||{})}},s=/uni-app/i.test(navigator.userAgent),w=/Html5Plus/i.test(navigator.userAgent),u=/complete|loaded|interactive/;var g=window.my&&navigator.userAgent.indexOf(["t","n","e","i","l","C","y","a","p","i","l","A"].reverse().join(""))>-1;var v=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 p=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var _=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var m=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var E=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var x=window.xhs&&window.xhs.miniProgram&&/xhsminiapp/i.test(navigator.userAgent);for(var S,h=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},y=[function(e){if(s||w)return window.__uniapp_x_postMessage||window.__uniapp_x_||window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&u.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),d},function(e){if(_)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(g){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(v)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(p)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(m){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){if(f)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.ks.miniProgram},function(e){if(l)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(E)return window.JDJSBridgeReady&&window.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener("JDJSBridgeReady",e),window.jd.miniProgram},function(e){if(x)return window.xhs.miniProgram},function(e){return document.addEventListener("DOMContentLoaded",e),d}],M=0;M<y.length&&!(S=y[M](h));M++);S||(S={});var P="undefined"!=typeof uni?uni:{};if(!P.navigateTo)for(var b in S)i(S,b)&&(P[b]=S[b]);return P.webView=S,P}));

参考链接

https://blog.csdn.net/qwe_aaaaa/article/details/126286725

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js

人工智能学习网站

https://chat.xutongbao.top

标签： uni-app

本文转载自: https://blog.csdn.net/xutongbao/article/details/141843810
版权归原作者 徐同保 所有，如有侵权，请联系我们删除。

uniapp 使用 webview 触发uni.postMessage

发表评论

“uniapp 使用 webview 触发uni.postMessage”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航