webView 组件内外部跨域通讯源码反馈集中帖

发布这个源码的初衷就是因为在实际项目中遇到的需求,要解决webview组件内外部的跨域通信消息。
适用场景:
在web环境中的主游戏通过在另一个webview组件中打开远程部署的H5网页小游戏时,解决主游戏和小游戏的内外部消息通讯,简单说就是消耗主游戏的100钻石打开小游戏,同时在小游戏中给予对应的2000金币。

外部主游戏体验网址1-cocos开发网页:Cocos Creator | webviewCom
外部主游戏体验网址1-vue开发网页-ai作品:vueHall
体验注意:
外部主游戏的金币默认10000积分默认1000,直接进入内部小游戏出错时会显示金币和积分都是1000(这个是主游戏打开webview时传入的网址参数就是如此),正确显示参数应该都是0的;若采用消耗500主游戏金币进入小游戏的,则在进入小游戏后显示500金币和0积分,点击随机加金币按钮可以增加金币数量,积分加十按钮仅做测试展示积分增加的功能,点击退币按钮会把小游戏的金币数量退回到主游戏的积分上。

功能介绍

  • wevbiew组件的内外部之间的跨域消息通信
  • 仅限web环境,测试通过的场景:
  • 1.本地浏览器运行cocos开发的外部主游戏源码+远程部署的cocos开发的外网域名内部小游戏,
  • 2.本地浏览器运行vue+vite开发的外部主游戏源码+远程部署的cocos开发的外网域名内部小游戏,
  • 3.远程部署运行cocos开发的外部主游戏源码+远程部署的cocos开发的外网域名内部小游戏,
  • 4.远程部署运行vue+vite开发的外部主游戏源码+远程部署的cocos开发的外网域名内部小游戏。

使用教程(必须)

使用方式请直接参考压缩包中的说明-请读我.txt文件,也可以直接查看game.ts脚本中的相关代码
//==========↓↓↓↓========webview内外部通讯主代码============
//==========↑↑↑↑========webview内外部通讯主代码============
被以上两行注释包围的代码即为主要代码,Ctrl+C Ctrl+V即可
压缩包功能说明:

  • innerGame ==> 内部小游戏工程源码
  • outGame ==> 外部主游戏工程源码,game.ts是主要代码所在脚本
  • innerGame-web-mobile.7z文件 ==> 是可用于远程服务器部署的已构建打包好的外部主游戏成品源码,将其放到远程web服务器的根目录下,再浏览器中访问对应的路径即可
  • outMain-web-mobile.7z文件 ==> 是可用于远程服务器部署的已构建打包好的外部主游戏成品源码,将其放到远程web服务器的根目录下,再浏览器中访问对应的路径即可
  • vueHtml.7z ==> 是基于Vue3+ts+Vite技术栈开发的外部主游戏源码,ai编写的,直接把dist文件夹放在web服务器的根文件夹中即可访问

新人第一次在商店发东西,做的不好请见谅。
失业在家没老可啃,就发点源码看看有没有帮得上诸位的。

对于不敏感的数据可以直接把参数拼在网址中,比如我的代码:
const fullSubGameUrl = ${this._subUrl}?mainOrigin=${mainOrigin}&uid=haoyu&gold=1000&score=1000&timeSign=${Date.now()};
this.miniWeb.url = fullSubGameUrl;
这里直接把金币和积分数值带进小游戏了,这里故意为之,一般而言这种数据肯定是敏感的。

内外部通讯的基本原理就是利用iframe组件使用postMessage发送消息:
iframe.contentWindow.postMessage({
type: ‘FROM_MAIN_GAME’,
data: ‘showUserInfo’,
obj: { funcName: ‘showUserInfo’, diyNUm: 123456 }
}, targetOrigin);
影响安全的就在于targetOrigin这个参数的设置,如果不考虑安全性的话,可以直接使用 ‘*’ 这个就能实现跨域通信,所以必须注意要把这个参数从主游戏带入到内部小游戏中,然后接收内部小游戏发出的消息时采用域名白名单的方式校验。
oriType是标识通讯消息的方向的,在不同的情况下,postMessage是会派发到所有的iframe标签的,所以必须要过滤。
oriFunc是消息的功能key,用于消息类型的判断逻辑处理的
oriData是消息的数据,用于消息逻辑处理的