Cocos Creator Telegram mini APP

2025/6/23 2:26:50 来源：https://blog.csdn.net/nicepainkiller/article/details/148732656 浏览: 次关键词：Cocos Creator Telegram mini APP

将 Cocos Creator h5 游戏发布到 Telegram mini App 中

今天我们把 Cocos Creator 发布出来的 H5 游戏放进 Telegram mini App 中，这个类似微信小程序。先看效果这个小游戏是我之前写的 demo

Telegram mini App 本质原理是将 bot 机器人绑定一个域名

第一步. 我们先创建机器人

我们先找到 BotFather

我们在输入框中依次输入：

1. /start

没有创创建国机器人的， new 就好了

2. /newbot

输入一个以 bot 结尾的名称

3.输入你的机器人名称 @开头

然后就是填写信息的上传图片， gif 可以省略

设置机器人连接等等

4.设置完成时候你就能点击机器人连接打开 telegram miniapp

5.当然你也可以编辑你刚刚设置的信息 /editapp

第二步. 改造 cocos creator 游戏

将我们的 cocos creator 引入 Telegram mini app SDK。引入方式主要分为两种：

npm 方式引入 https://github.com/twa-dev/SDK

npm i @twa-dev/sdk//脚本调用：
import WebApp from '@twa-dev/sdk'#这边使用的时候发现有点蹩脚//直接调用会报错，   showAlert is not a functuon
WebApp.showAlert('Hey there!');

// 需要都给他 包裹一层 才能正常调用， 目前不清楚什么原因. 
// 伙有遇到 更好的办法可以交流下
//
console.log('WebApp.platform:', WebApp['default'].platform);
console.log('WebApp.initData :', WebApp['default'].initData);
console.log('WebApp.initDataUnsafe :', WebApp['default'].initDataUnsafe);
console.log('WebApp:', WebApp['default']);

js 方式引入

1. 首先在你的 cocos creator 项目中创建 web-mobile，模版，会在项目根目录 生成一个 build-templates  ->  web-mobile   index.ejs文件2. 添加   <script src="https://telegram.org/js/telegram-web-app.js"></script>

代码中你要是要使用 window.Telegram 需要多做一步转换，

import { Telegram } from "@twa-dev/types";
declare global {interface Window {Telegram: Telegram;}
}//这样就能直接 
console.log(`WebApp.platform:${window.Telegram.WebApp.platform}`);
console.log(`WebApp.initData :${window.Telegram.WebApp.initData}`);
console.log('WebApp.initDataUnsafe :', window.Telegram.WebApp.initDataUnsafe);
console.log(' window.Telegram:', window.Telegram);
console.log(' window.Telegram.WebApp:', window.Telegram.WebApp);

总体看来两种方式都有点蹩脚，