Telegram开发小程序（二）

使用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/