前言
寫(xiě)此篇文章的目的主要是記錄一下在開(kāi)發(fā)TG小程序的過(guò)程中遇到的問(wèn)題以及解決方法疤苹，其二梳理一下整個(gè)TG小程序開(kāi)發(fā)的流程甲葬，我個(gè)人認(rèn)為T(mén)G小程序和H5網(wǎng)頁(yè)沒(méi)有太大的區(qū)別抄囚，TG在telegram上運(yùn)行的H5網(wǎng)頁(yè)熏矿。此篇文章不對(duì)代碼層面的問(wèn)題探究装处，只是對(duì)開(kāi)發(fā)流程的梳理。
準(zhǔn)備階段
工欲善其事必先利其器：
- 下載Telegram
- 注冊(cè)Telegram賬號(hào)
關(guān)于怎么下載和注冊(cè)的問(wèn)題
-
如何下載Telegram
可以在google商店下載（使用梯子就能解決） -
注冊(cè)時(shí)可能存在+86的手機(jī)號(hào)接受不到驗(yàn)證碼
解決方法：我是在油管上看到一個(gè)up主的視頻挣郭，解決接受不到驗(yàn)證碼迄埃。
步驟：首先你要分別下載兩個(gè)軟件Telegram和Telegram X，先注冊(cè)個(gè)TelegramX的賬號(hào)兑障，然后通過(guò)TelegramX接受驗(yàn)證碼侄非，從而在Telegarm上注冊(cè)，驗(yàn)證碼可以在Telegram X的郵箱查看
詳細(xì)解決方法視頻
初始化
常規(guī)的創(chuàng)建項(xiàng)目流程
# 創(chuàng)建一個(gè)React項(xiàng)目
npx create-react-app tg-dex//tg-dex項(xiàng)目名
# 下載對(duì)應(yīng)的包
# TWA sdk
npm install @twa-dev/sdk
# tailwindcss
npm install -D tailwindcss
npx tailwindcss init
# 狀態(tài)管理工具（redux ）
npm install @reduxjs/toolkit react-redux
# 路由
# 與合約交互的庫(kù)（web3js或ethersjs）
# wagmi React hook的一個(gè)庫(kù)流译，包含和合約交互的一切逞怨。
# 錢包的一些插件（Web3Modal）
# Web3-react：React應(yīng)用的開(kāi)源庫(kù)，DApp的開(kāi)發(fā)更加容易
# UI庫(kù)
# 其他的一些庫(kù)....
項(xiàng)目添加到Telegram步驟
- 打開(kāi)BotFather
- 輸入/newbot
-
按照對(duì)話填寫(xiě)機(jī)器人的名稱
例如：tgdex//隨便取只要不重名 -
按照對(duì)話填寫(xiě) 機(jī)器人的名字福澡，以bot結(jié)尾
例如：tgdex1012_bot - 機(jī)器人創(chuàng)建成功叠赦，會(huì)生成一個(gè)Http API的hash，保存好
- 接下來(lái)填寫(xiě)app的相關(guān)資料
- 輸入/newapp
-
按照對(duì)話填寫(xiě)機(jī)器人的名稱
例如：@tgdex1012_bot -
按照對(duì)話填寫(xiě)app的標(biāo)題
例如 tgdex1012miniapp -
按照對(duì)話填寫(xiě)app的描述
A dex type telegram mini app - 按照對(duì)話上傳圖片大小640360*
-
按照對(duì)話輸入/empty
/empty -
按照對(duì)話填寫(xiě)app的url
例如：https://127.0.0.1:9001/
說(shuō)明：需要輸入一個(gè)htts開(kāi)頭的鏈接革砸，此步驟也是重中重除秀，關(guān)乎到我們本地運(yùn)行的代碼糯累，在telegram上運(yùn)行預(yù)覽和調(diào)試的關(guān)鍵。（重難點(diǎn)） -
按照對(duì)話填寫(xiě)app應(yīng)用名稱
例如：tgdex - 創(chuàng)建完畢
解決本地項(xiàng)目添加到Telegram重難點(diǎn)
把本地項(xiàng)目鏈接生成https開(kāi)頭的鏈接
方法1:
利用mkcert和local-ssl-proxy配合使用生成https鏈接
mkcert.exe生成本地的CA
local-ssl-proxy代理工具
以window為例子
步驟如下：
1.找到對(duì)應(yīng)的mkcert安裝包下載
2.把下載后的文件放到桌面
3.設(shè)置設(shè)置mkcert為本地CA
cmd 打開(kāi)控制臺(tái)把軟件拖到cmd窗口中册踩， 后面加 -install 點(diǎn)擊回車
- cmd 打開(kāi)控制臺(tái)把軟件拖到cmd窗口中犹赖， 后面加 127.0.0.1 localhost 點(diǎn)擊回車 會(huì)有一個(gè)彈窗選擇是的選項(xiàng)间狂，就生成了證書(shū)猛铅。
5.下載local-ssl-proxy包成功之后
6.執(zhí)行指令命令
# 說(shuō)明：把本地端口號(hào)為3000的代理為https://127.0.0.1:9001/
local-ssl-proxy --source 9001 --target 3000
就可以把https://127.0.0.1:9001這個(gè)鏈接導(dǎo)入到telegram中
方法2
利用ngrok工具生成https寇窑，
優(yōu)點(diǎn)：簡(jiǎn)單快捷
缺點(diǎn)：免費(fèi)版的一個(gè)月只能生成一個(gè)鏈接，鏈接生成限制
步驟：
1.下載ngrok安裝包
2.解壓此文件
3.并在此文件夾下打開(kāi)cmd
4.執(zhí)行以下命令
# 說(shuō)明 把本地端口為3000的項(xiàng)目生成一個(gè)https的鏈接
ngrok http 3000
or
ngrok http http://localhost:3000
方法3
利用內(nèi)網(wǎng)穿透方法frp
本地開(kāi)發(fā)調(diào)試
把在BotFather生成的鏈接放到創(chuàng)建的機(jī)器中打開(kāi)預(yù)覽調(diào)試
# 啟動(dòng)本地項(xiàng)目
npm start
# 啟動(dòng)代理
local-ssl-proxy --source 9001 --target 3000
#會(huì)生成一個(gè)https://127.0.0.1:9001
#在對(duì)應(yīng)的機(jī)器人里點(diǎn)開(kāi)鏈接預(yù)覽調(diào)試
Telegram使用的常用指令
在BotFather常用指令
# 關(guān)于bot相關(guān)信息查看和修改
/mybots
#關(guān)于app相關(guān)信息查看和修改
/myapps
