หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ส่วนประกอบตอบสนองสำหรับโทรเลข miniapp

ตัวอย่างการสาธิตสดและรหัส

คุณสามารถลองเปิดการสาธิตโทรเลขบอทด้วย React Webapp @react_telegram_web_app_bot

นอกจากนี้คุณสามารถดูซอร์สโค้ดตัวอย่าง

การติดตั้งและเริ่มต้น

1⃣ ก่อนหน้านี้ คุณต้องเริ่มต้นขั้นตอนการเริ่มต้นเว็บแอพเนื่องจากแพ็คเกจมีการพึ่งพาบริบทของแอพโทรเลข

2⃣ ติดตั้ง โดย Running: npm i @vkruglikov/react-telegram-web-app --save วันนี้เราสนับสนุน React^18

3⃣ ลองใช้ โดยการเขียนโค้ด

 นำเข้า {MainButton, useshowPopup} จาก '@vkruglikov/react-telegram-web-app'; เนื้อหา const = () => {
  const showpopup = useshowPopup ();

  const handleclick = () => showpopup ({ข้อความ: 'สวัสดีฉันเป็นป๊อปอัพ',});

  return <mainButton text = "show popup" onclick = {handleclick} />;};

เอกสารสั้น ๆ

ส่วนประกอบ

  • MainButton - ส่วนประกอบควบคุมปุ่มหลักซึ่งจะแสดงที่ด้านล่างของเว็บแอปในอินเทอร์เฟซโทรเลข

  • Backbutton - ส่วนประกอบนี้ควบคุมปุ่มย้อนกลับซึ่งสามารถแสดงในส่วนหัวของเว็บแอปในอินเทอร์เฟซโทรเลข

  • WebApprovider - WebApprovider ให้บริบทกับ WebApp สำหรับส่วนประกอบและตะขอ คุณสามารถลองผ่านวัตถุที่มีตัวเลือก

     นำเข้า {WebApprovider, MainButton, Backbutton} จาก '@vkruglikov/React-Telegram-Web-App'; <WebApprovider
  ตัวเลือก = {{SmoothButTonstransition: จริง
  -
  {/** ใช้ส่วนประกอบภายในผู้ให้บริการ*/}
  <MainButton {... } />
  <backbutton {... } /> < /webappprovider>

ตะขอ

  • USESHOWPOPUP - ตะขอนี้มีฟังก์ชั่น showPopup ที่แสดงป๊อปอัพดั้งเดิม

  • usehapticFeedback - ตะขอนี้ให้ฟังก์ชั่น impactOccurred , notificationOccurred และ selectionChanged ที่ควบคุมข้อเสนอแนะแบบสัมผัส

  • USETHEMARAMS - เบ็ดนี้ให้วัตถุ colorScheme และ themeParams

  • USESCANQRPOPUP - เบ็ดนี้ให้การแสดงฟังก์ชั่น showScanQrPopup และ closeScanQrPopup

  • UserEdTextFromClipboard - ตะขอนี้มีฟังก์ชั่น readTextFromClipboard

  • ใช้ WitchInlineQuery - ตะขอนี้มีฟังก์ชั่น switchInlineQuery

  • USEEXPAND - ตะขอนี้ให้สถานะ isExpanded และ expand() ด้ามจับ

  • USECLOUDSTORAGE - เบ็ดนี้ให้วัตถุ CloudStorage เป็นฟังก์ชั่นสัญญา

  • useInitData - เบ็ดนี้มีวัตถุ InitDataUnsafe และ InitData

  • USEWEBAPP - เบ็ดนี้เพียงแค่ให้วัตถุ WebApp ดั้งเดิม

แผนงาน

นี่คือสิ่งที่กำลังจะเกิดขึ้น:

  • ในอนาคตเราต้องการใช้ส่วนประกอบของเราในเว็บแอปพลิเคชันโดยไม่มีบริบทโทรเลข

  • การรองรับฟีเจอร์ Telegram Webapp ทั้งหมด

  • การรองรับคุณลักษณะหลัก Telegram Webapp

ผู้มีส่วนร่วม

เช่นเคยขอบคุณผู้มีส่วนร่วมที่น่าทึ่งของเรา!

ทำกับผู้มีส่วนร่วม

การบริจาค

  • อ่านเกี่ยวกับมัน? Roadmap และเอกสารอย่างเป็นทางการ Telegram Mini Apps

  • มีคำถาม? ตรวจสอบตัวอย่างของเรา duscussions และปัญหา

  • ส้อมและมีส่วนร่วมในการปรับเปลี่ยนของคุณเอง

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด