uniapp各端通过webview实现互相通信

目前网上,包括官方文档针对uniapp的webview的内容都是基于vue2的,此文章基于vue3的composition API方式

网页对网页

由于uniapp中的webview只支持引入h5页面,不支持互相通信,所以要条件编译,用iframe导入页面,并通信

父页面

复制代码
<!-- #ifdef H5 -->
  <iframe
    src="http://192.168.0.105:5000/#/index"
    border="none"
    width="100%"
    height="100vh"
    frameborder="0"
    style="border: none; height: calc(100vh - 8px)"
    ref="iframe"
    @load="handlePageLoaded"
  ></iframe>
  <!-- #endif -->

const iframe = ref()  
const handlePageLoaded = () => {
  console.log('h5端网页加载成功')
  iframe.value.contentWindow.postMessage(
    {
      type: 'Function', // 调用方法
      from: 'uniapp',
      functionName: 'appCallback',
      params: {
        from: 'uniapp h5',
      },
    },
    '*',
  ) // 需指定子页面域名
  // 调用子页面全局方法(同源才行)
  // iframe.value.contentWindow.appCallback({ name: 'tom' })
}

// #ifdef H5
// 监听子页面的返回结果
window.addEventListener('message', function (event) {
  if (event.data?.from == 'h5') {
    console.log('uniapp收到iframe发来消息', event.data)
  }
})
// #endif

子页面

复制代码
window.addEventListener('load', function () {
      console.log('子页面(被iframe嵌入)所有资源加载完成!');
      // 这里可以执行加载完成后的操作(如初始化、发送消息给父页面等)
    });
    window.addEventListener('message', function (event) {
      // 验证消息来源
      if (event.data?.from == 'uniapp') {
        const message = event.data;
        event.source.postMessage({
          type: 'functionResult',
          from: 'h5'
        }, event.origin);
        if (message.functionName) {
          window[message.functionName](message.params || {})
        }
        console.log('iframe收到uniapp消息', message)
      }
    });

网页对app或者小程序

子页面

引入uniapp官方文档提供的js文件

复制代码
  <script src="/lib/uni.webview.js"></script>

// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
    document.addEventListener('UniAppJSBridgeReady', function () {
      console.log('uniapp中webview加载完成')

      uni.getEnv(function (res) {
        console.log('当前环境:' + JSON.stringify(res));
        setTimeout(() => {
          if (res.h5) {
            // uniapp不支持h5之间用webview互相通信
          } else if (res.plus) {
            uni.postMessage({
              data: {
                action: 'message',
                other: {
                  name: 'ike',
                  age: 30
                }
              }
            });
          }
        }, 200)
      });
      // 发送消息
      // uni.postMessage({
      //   data: {
      //     action: 'message'
      //   }
      // });
    });

父应用

复制代码
import { onReady } from '@dcloudio/uni-app'
import { getCurrentInstance } from 'vue'

const wv = ref()
onReady(() => {
  // #ifndef H5
  setTimeout(() => {
    wv.value = instance?.proxy.$scope.$getAppWebview().children()[0]
  }, 100)
  // #endif
})

const handleWVMessage = (ev: any) => {
  console.log('收到web消息', ev.detail.data)
  wv.value.evalJS(`appCallback({action: 'message', data: {name: 'tom'}})`)
}

目前存在问题

1、app端无法使用load监听网页是否加载完成,小程序端可以

2、页面ready后,要延时一阵才能拿到真正的webview实例,所以网页端监听到加载完毕,也要延时一阵再给uniapp发消息

3、app端通过

:webview-styles="{

process: false,

width: '50%',

height: props.height,

}"设置宽高都不起作用

相关推荐
fionlsq10 小时前
uniapp集成原生安卓开发的插件
android·uni-app·小组件
奶糖 肥晨11 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
2501_9160074714 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
chensi_0715 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
iOS阿玮16 小时前
AppStore提审混合开发技术选型,独立开发者和公司都适用。
uni-app·app·apple
2501_9159214321 小时前
TCP 抓包分析实战,从抓取到定位(命令、常见症状、排查流程与真机抓包补充)
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone
2501_9160137421 小时前
App 上架服务全流程解析,iOS 应用代上架、ipa 文件上传工具、TestFlight 测试与苹果审核实战经验
android·ios·小程序·https·uni-app·iphone·webview
小样还想跑21 小时前
UniApp键盘监听全攻略
vue.js·uni-app·计算机外设
2501_915909061 天前
App Store 上架完整流程解析,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 测试与苹果审核经验
android·macos·ios·小程序·uni-app·cocoa·iphone