search

dcloudio / uni-app

A cross-platform framework using Vue.js
https://uniapp.dcloud.io
Apache License 2.0
40.19k stars 3.64k forks source link

钉钉小程序webview @message无法接收消息 #3022

Closed chinafelix closed 2 years ago

chinafelix commented 3 years ago

问题描述 uniapp 钉钉小程序，h5使用uni.postMessage发送消息，webview无法接收

html 直接使用官方的h5 demo

<!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 src="https://cdn.staticfile.org/vConsole/3.3.4/vconsole.min.js"></script>
    <script type="text/javascript">
      window._vconsole=new VConsole()
      var userAgent = navigator.userAgent;
      if (userAgent.indexOf('AlipayClient') > -1) {
        console.log(122122)
        // 支付宝小程序的 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 -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.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/tabBar/API/API'
                });
                break;
              case 'reLaunch':
                uni.reLaunch({
                  url: '/pages/tabBar/component/component'
                });
                break;
              case 'navigateBack':
                uni.navigateBack({
                  delta: 1
                });
                break;
              default:
                uni[action]({
                  url: '/pages/component/button/button'
                });
                break;
            }
          }
        });
        document.getElementById('postMessage').addEventListener('click', function() {
          console.log(11221)
          uni.postMessage({
            data: {
              action: 'message'
            }
          });
        });
      });
    </script>
  </body>
</html>

小程序 image

预期结果 在小程序webview的@message回调中收到消息

实际结果 没有反应

系统信息:

Environment Info:

System: OS: macOS 10.15.2 CPU: (4) x64 Intel(R) Core(TM) i3-9100F CPU @ 3.60GHz Binaries: Node: 14.17.0 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 6.14.13 - /usr/local/bin/npm Browsers: Chrome: 96.0.4664.55 Firefox: Not Found Safari: 13.0.4 npmPackages: @dcloudio/types: * => 2.2.4 @dcloudio/uni-app-plus: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-app-plus-nvue: 0.0.1 @dcloudio/uni-app-plus-nvue-v8: 0.0.1 @dcloudio/uni-automator: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-cli-shared: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-h5: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-i18n: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-migration: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-mp-360: ^2.0.0-31920210428001 => 2.0.0-alpha-31920210506002 @dcloudio/uni-mp-alipay: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-mp-baidu: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-mp-kuaishou: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-mp-qq: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-mp-toutiao: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-mp-vue: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-mp-weixin: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-quickapp-native: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-quickapp-webview: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-stat: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/uni-template-compiler: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/vue-cli-plugin-uni: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/webpack-uni-mp-loader: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @dcloudio/webpack-uni-nvue-loader: 0.0.1 @dcloudio/webpack-uni-pages-loader: ^2.0.0-31920210428001 => 2.0.0-31920210428001 @hap-toolkit/dsl-vue: 0.6.13 @vue/babel-helper-vue-jsx-merge-props: 1.2.1 @vue/babel-helper-vue-transform-on: 1.0.2 @vue/babel-plugin-jsx: 1.0.6 @vue/babel-plugin-transform-vue-jsx: 1.2.1 @vue/babel-preset-app: 4.5.13 @vue/babel-preset-jsx: 1.2.4 @vue/babel-sugar-composition-api-inject-h: 1.2.1 @vue/babel-sugar-composition-api-render-instance: 1.2.4 @vue/babel-sugar-functional-vue: 1.2.2 @vue/babel-sugar-inject-h: 1.2.2 @vue/babel-sugar-v-model: 1.2.3 @vue/babel-sugar-v-on: 1.2.3 @vue/cli-overlay: 4.5.13 @vue/cli-plugin-babel: ~4.5.0 => 4.5.13 @vue/cli-plugin-router: 4.5.13 @vue/cli-plugin-vuex: 4.5.13 @vue/cli-service: ~4.5.0 => 4.5.13 @vue/cli-shared-utils: 4.5.13 @vue/component-compiler-utils: 3.2.0 (3.2.0) @vue/preload-webpack-plugin: 1.1.2 @vue/shared: ^3.0.0 => 3.0.11 @vue/web-component-wrapper: 1.3.0 mpvue-page-factory: 1.0.1 mpvue-template-compiler: 1.0.13 uni-h5-vue: 2.6.10 uni-mp-vue: 2.6.10 vue: ^2.6.11 => 2.6.12 vue-hot-reload-api: 2.3.4 vue-loader: 15.9.7 (16.8.2, 15.9.7) vue-router: 3.0.1 vue-style-loader: 4.1.3 (4.1.3) vue-template-compiler: ^2.6.11 => 2.6.12 (2.6.12) vue-template-es2015-compiler: 1.9.1 vuex: ^3.2.0 => 3.6.2 npmGlobalPackages: @vue/cli: 4.5.14

补充信息 [可选] [根据你的分析，出现这个问题的原因可能在哪里？]

StrivingRabbit commented 3 years ago

你写的是 onPostMessage 。令：可参考 支付宝官方文档

chinafelix commented 2 years ago

用@message解决了