H5 和 小程序 均使用 vue3 + ts + vite開發(fā)

0.在uni-app H5 項(xiàng)目static文件中創(chuàng)建本地 jweixin-1.6.0.js 和 uni.webview.1.5.5.js文件

將下面的源代碼復(fù)制到相應(yīng)的文件中

源代碼地址：
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

創(chuàng)建本地 jweixin-1.6.0.js 和 uni.webview.1.5.5.js文件

1.在原有 uni-app H5 項(xiàng)目中引入jweixin-1.6.0、uni.webview.1.5.5

在index.html中導(dǎo)入相關(guān)的插件

    <!-- 注意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('當(dāng)前環(huán)境：' + JSON.stringify(res));
          });
        });
    </script>

注意：

• uni sdk放到body下面
• src 對(duì)應(yīng)的目錄文件不要帶.js后綴，不然會(huì)報(bào)錯(cuò)
• 不要使用 <script type="text/javascript" src="https://xxxxxxx/uni.webview.1.5.5.js">, 會(huì)導(dǎo)致 js 交互不起作用
• Q：web-view加載 uni-app H5，內(nèi)部跳轉(zhuǎn)沖突如何解決 A：使用 uni.webView.navigateTo...

源碼

2.H5 向小程序發(fā)送消息

<template>
  <view>
    <button @click="h5PostMessage">H5向小程序頁面?zhèn)鬟f消息</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 對(duì)象中',
          },
        });
        uni.webView.navigateBack();
      } catch (e: any) {
        uni.showToast({ title: '**出錯(cuò)了** :' + 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傳遞過來的消息