使用Next.js app开发Telegram 小程序
小程序调用分享,并获取到分享的参数
const { webApp } = useTelegram();const handleXShare = useCallback(() => {if (webApp) {webApp.openTelegramLink(`https://t.me/share/url?text=%F0%9F%A4%91%20Get%20reach%20with%20Mining!%0AMine%20Mining%20tokens%20and%20withdraw%20them%20to%20your%20crypto%20wallet%20!%0A%0A%F0%9F%8E%81%F0%9F%8E%81%F0%9F%8E%81%20Join%20and%20get%20up%20to%201000%20Mining%20tokens%20!%0A&url=https://t.me/pkg007bot/pkgbest?startapp=${data.invite_code}`); } }, [data, webApp]);
https://t.me/botusername/appname?startapp=command&mode=compact
如果链接中包含非空的startapp参数,它将在webApp 的 initData 中的start_param字段获取到
useEffect(() => {if (initData) {const paramsString = decodeURIComponent(initData);const params = new URLSearchParams(paramsString);const inviteCode =params.get("start_param") || localStorage.getItem("inviteCode");if (inviteCode) {localStorage.setItem("inviteCode", inviteCode);}}}, [initData]);
您可以通过mode=compact在链接中包含该参数将小程序默认以半屏高度打开
参考链接:
- 机器人官方文档:https://core.telegram.org/bots/webapps
- 小程序开发文档:https://docs.ton.org/develop/dapps/telegram-apps/
- Telegram-mini-apps-docs:https://docs.telegram-mini-apps.com/platform/about
- 机器人按钮配置文档参考:https://www.jackygu.me/posts/a-telegram-mini-app/