ดาวน์โหลด react telegram web app react telegram web app Source Source Download

react telegram web app

ซอร์สโค้ดอื่น ๆ

v2.1.9

ดาวน์โหลด

ส่วนประกอบตอบสนองสำหรับโทรเลข 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 ดั้งเดิม