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/

原文地址：https://blog.csdn.net/cmy120813/article/details/140625514

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！