发布这个源码的初衷就是因为在实际项目中遇到的需求,要解决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服务器的根文件夹中即可访问