uni-app 小程序web-view 内嵌 uni-app H

H5 和 小程序 均使用 vue3 + ts + vite开发

0.在uni-app H5 项目static文件中创建本地 jweixin-1.6.0.js 和 uni.webview.1.5.5.js文件

将下面的源代码复制到相应的文件中

源代码地址：
jweixin-1.6.0.js ：https://res.wx.qq.com/open/js/jweixin-1.6.0.js
uni.webview.1.5.5.js：https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.5.js

创建本地 jweixin-1.6.0.js 和 uni.webview.1.5.5.js文件

1.在原有 uni-app H5 项目中引入jweixin-1.6.0、uni.webview.1.5.5

在index.html中导入相关的插件

    <!-- 注意uni sdk放到body下面 -->
    <script type="module" src="./src/static/jweixin-1.6.0"></script>
    <script type="module" src="./src/static/uni.webview.1.5.5"></script>
    <!-- <script type="text/javascript" src="https://saas-one.oss-cn-beijing.aliyuncs.com/uniapp/js/uni.webview.1.5.5.js"> -->
    </script>
    <script>
        document.addEventListener('UniAppJSBridgeReady', function () {
          uni.webView.getEnv(function (res) {
            console.log('当前环境：' + JSON.stringify(res));
          });
        });
    </script>

注意：

• uni sdk放到body下面
• src 对应的目录文件不要带.js后缀，不然会报错
• 不要使用 <script type="text/javascript" src="https://xxxxxxx/uni.webview.1.5.5.js">, 会导致 js 交互不起作用
• Q：web-view加载 uni-app H5，内部跳转冲突如何解决 A：使用 uni.webView.navigateTo...

源码

2.H5 向小程序发送消息

<template>
  <view>
    <button @click="h5PostMessage">H5向小程序页面传递消息</button>
  </view>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function h5PostMessage() {
      try {
        uni.webView.postMessage({
          data: {
            title: '我是从uni-app H5 传递过来的 message',
            desc: '传递的消息信息，必须写在 data 对象中',
          },
        });
        uni.webView.navigateBack();
      } catch (e: any) {
        uni.showToast({ title: '**出错了** :' + e, icon: 'none' });
      }
    }

    return {
      h5PostMessage,
    };
  },
});
</script>

<style lang="scss"></style>

3. 小程序接收H5传递过来的消息

<web-view :webview-styles="webviewStyles" :src="webUrlRef" @message="onMessageHandler"></web-view>

function onMessageHandler(event: any) {
    let res = event.detail.data;
    console.log('小程序接收到H5传递过了的message:', JSON.stringify(res));

    uni.showToast({
        title: '小程序接收到H5传递过了的message:' + JSON.stringify(res),
        icon: 'none'
    });
}

微信小程序接收到H5传递过来的消息