uni-app中app和webview的h5通信簡單步驟

更新時間：2025年02月10日 10:45:22 作者：必哥

這篇文章主要介紹了如何在nvue頁面中使用webview組件,并詳細介紹了如何在h5項目中安裝和配置npmiy_uniwebview插件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前情提要：

1、使用webview的頁面需要是nvue，否則沒有 sWebViewRef.value.evalJS() 方法；

2、需要自己安裝npm i y_uniwebview，官方的引入https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js腳本存在沖突，會報錯

第一步，在 h5 項目中安裝y_uniwebview插件

安裝： npm i y_uniwebview
引入： import y_uni from "y_uniwebview"

第二步，h5 代碼，接收app信息和向app發(fā)送信息

<template>
  <view class="avatar-uploader">
    <view>
      <button @click="postMessage">向app發(fā)送信息</button>
    </view>
    <view>
      接收到app信息：{{ appMsg }}
    </view>
  </view>
</template>
<script lang="ts" setup>

import y_uni from "y_uniwebview"
import { ref } from 'vue';

const appMsg = ref('');

// app信息觸發(fā)方法
window.appCallBack = (val) => {
  appMsg.value = val
  console.log('app發(fā)送過來的數(shù)據(jù)---', val)
}

let count = 0;

// 向app發(fā)送信息
function postMessage(type) {
  console.log('h5發(fā)送信息');
  // 發(fā)送信息
  y_uni.webView.postMessage({
    data: {
      msg: `h5信息 ${count++} 次`
    }
  });
}

</script>

第三步、app頁面，接收h5信息和向h5發(fā)送信息

注意，這里需要用nvue，否則會沒有 sWebViewRef.value.evalJS() 導致報錯

<template>
    <view>
        <button  @click="postMsg">
            向h5發(fā)送信息
        </button>
        <view>
            接收到h5信息：{{h5Msg}}
        </view>
    </view>
    <br>
    <web-view
            ref="sWebViewRef"
            src="http://192.168.31.93/" style="" :style="webViewStyle"
            @on-post-message="handleMessage"
    ></web-view>
</template>

<script setup>
    import {computed, ref} from 'vue';

    const sWebViewRef = ref()

    const h5Msg = ref('');

    // 接收h5信息
    function handleMessage(event) {
        // 接收webview發(fā)送的消息
        h5Msg.value = event.detail.data[0].msg;
        console.log('收到 h5 消息: ' + h5Msg);
    }
    
    let count = 0;

    // 向 h5 發(fā)送信息
    function postMsg(msg) {
        console.log('app發(fā)送信息')
        sWebViewRef.value.evalJS(`appCallBack('app信息 ${count++} 次')`)
    }

    const webViewStyle = computed(() => {
        let width = 0;
        let height = 0;
        uni.getSystemInfo({
            // 獲取當前設備的具體信息
            success: sysinfo => {
                width = sysinfo.windowWidth - 100;
                height = sysinfo.windowHeight - 100;
            }
        })
        return {
            width: width + 'px', height: height + 'px'
        }
    })
</script>