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

参考链接:

相关推荐
中科三方5 分钟前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
lh_125415 分钟前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx17 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n1 小时前
前台调用接口的方式及速率对比
前端
周之鸥1 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉1 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导1 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow1 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷1 小时前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试1 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题