الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

تفاعل مكونات Telegram Miniapp

أمثلة العرضية والرمز المباشر

يمكنك محاولة فتح BOT TELEGO DEMO مع React WebAppReact_Telegram_WEB_APP_BOT.

أيضًا ، يمكنك البحث عن رمز المصدر التجريبي.

التثبيت والبدء

1⃣ قبل كل شيء ، يجب عليك القيام بتهيئة خطوة تطبيقات الويب ، لأن الحزمة لها اعتماد على سياق تطبيق Telegram Web.

2⃣ تثبيت عن طريق التشغيل: npm i @vkruglikov/react-telegram-web-app --save . اليوم نحن ندعم React^18.

3⃣ جربه عن طريق كتابة رمز.

 استيراد {mainbutton ، useshowpopup} من '@vkruglikov/react-telegram-web-app' ؛ const content = () => {
  const showpopup = useshowpopup () ؛

  const handleclick = () => showpopup ({message: 'hello ، أنا منبثق' ،}) ؛

  return <mainbutton text = "show popup" onClick = {handleclick} /> ؛} ؛

وثائق قصيرة

عناصر

  • MainButton - يتحكم المكون في الزر الرئيسي ، والذي يتم عرضه في أسفل تطبيق الويب في واجهة Telegram.

  • Backbutton - يتحكم هذا المكون في زر الخلف ، والذي يمكن عرضه في رأس تطبيق الويب في واجهة Telegram.

  • WebAPPPROVIDER - توفر WebAPPPPROVIDER السياق مع WebApp للمكونات والخطافات. يمكنك محاولة تمرير كائن مع خيارات

     استيراد {webappprovider ، mainbutton ، backbutton} من '@vkruglikov/react-telegram-web-app' ؛ <webappprovider
  الخيارات = {{smoothButTonstransition: True ،
  }}>
  {/** استخدم المكونات داخل الموفر*/}
  <mainbutton {...} />
  <backbutton {...} /> < /webappprovider>

السنانير

  • UseshowPopup - يوفر هذا الخطاف وظيفة showPopup التي تعرض المنبثقة الأصلية.

  • UsePhapticFeedback - يوفر هذا الخطاف وظائف impactOccurred و notificationOccurred و selectionChanged التي تتحكم في ردود الفعل.

  • USETHEMEPARAMS - يوفر هذا الخطاف كائن colorScheme و themeParams .

  • USESCANQRPOPUP - يوفر هذا الخطاف وظائف showScanQrPopup و closeScanQrPopup .

  • userAdtextFromClipboard - يوفر هذا الخطاف وظيفة readTextFromClipboard .

  • يستخدم WitchInlineQuery - يوفر هذا الخطاف وظيفة switchInlineQuery .

  • UseExpand - يوفر هذا الخطاف حالة isExpanded ، expand() مقبض.

  • UsecloudStorage - يوفر هذا الخطاف كائن CloudStorage كوظائف الوعد

  • useInitdata - يوفر هذا الخطاف كائن InitDataUnsafe و InitData

  • UseWebApp - هذا الخطاف يوفر فقط كائن WebApp الأصلي

خريطة الطريق

هذا ما سيحدث:

  • في المستقبل ، نود استخدام المكونات الأمريكية أيضًا في تطبيق الويب ، دون سياق Telegram.

  • جميع دعم ميزة WebApp Telegram

  • دعم ميزة WebApp الرئيسية Telegram

المساهمين

كما هو الحال دائمًا ، بفضل مساهمينا المذهلين!

صنع مع المساهمين.

المساهمة

  • اقرأ عنها؟ خريطة الطريق والوثائق الرسمية Telegram Mini Apps

  • لديك أسئلة؟ تحقق من أمثلةنا ، duscusss والقضايا

  • شوكة وتساهم في التعديلات الخاصة بك

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل