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);

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

第三部. 跑效果

这样我们就能拿到 使用小程序的用户属性， 以及传入参数