Telegram开发小程序(二)

使用Next.js app开发Telegram 小程序

小程序调用分享,并获取到分享的参数

bash 复制代码
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]);
bash 复制代码
https://t.me/botusername/appname?startapp=command&mode=compact

如果链接中包含非空的startapp参数,它将在webApp 的 initData 中的start_param字段获取到

bash 复制代码
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在链接中包含该参数将小程序默认以半屏高度打开

参考链接:

相关推荐
幽络源小助理17 分钟前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
帅帅哥的兜兜22 分钟前
react中hooks使用
前端·javascript·react.js
吞掉星星的鲸鱼1 小时前
使用高德api实现天气查询
前端·javascript·css
lilye661 小时前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo5 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端6 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端