React WebApp @React_Telegram_web_app_bot을 사용하여 Open Demo Telegram Bot을 사용해 볼 수 있습니다.
또한 데모 소스 코드를 볼 수 있습니다.
1ØLES는 패키지가 Telegram 웹 앱 컨텍스트의 종속성을 갖기 때문에 웹 앱 단계를 초기화해야합니다.
2️ n 실행 : npm i @vkruglikov/react-telegram-web-app --save . 오늘 우리는 반응^18을 지원합니다.
3️ writing 코드를 작성하여 시도하십시오 .
'@vkruglikov/react-telegram-web-app'에서 {mainbutton, useshowpopup} import {const content = () => {
const showpopup = useshowpopup ();
const handleclick = () => showpopup ({메시지 : '안녕하세요, 팝업입니다',});
<mainbutton text = "show popup"onclick = {handleclick} />;};MainButton- 구성 요소는 기본 버튼을 제어하며,이 버튼은 Telegram 인터페이스의 웹 앱 하단에 표시됩니다.
BACKBUTTON-이 구성 요소는 뒤로 버튼을 제어하며, 이는 전보 인터페이스의 웹 앱 헤더에 표시 될 수 있습니다.
WebAppProvider -WebAppRovider는 구성 요소 및 후크 용 WebApp과 함께 컨텍스트를 제공합니다. 옵션이있는 객체를 전달하려고 시도 할 수 있습니다
'@vkruglikov/react-telegram-web-app'에서 {webappprovider, mainbutton, backbutton} import. <webappprovider
옵션 = {{smoothbuttonstransition : true,
}}>
{/** 제공자 내부의 구성 요소 사용*/}
<mainbutton {...} />
<backbutton {...} /> < /webappprovider> USSHOWPOPUP-이 후크는 기본 팝업을 보여주는 showPopup 기능을 제공합니다.
USEHAPTICFEEDBACK-이 후크는 햅틱 피드백을 제어하는 impactOccurred , notificationOccurred 과 selectionChanged 기능을 제공합니다.
Usethemeparams-이 후크는 colorScheme 및 themeParams 객체를 제공합니다.
USESCANQRPOPUP-이 후크는 showScanQrPopup 및 closeScanQrPopup 기능을 제공합니다.
usereadTextFromClipboard-이 후크는 readTextFromClipboard 함수를 제공합니다.
WitchInlineQuery 용도 -이 후크는 switchInlineQuery 함수를 제공합니다.
useExpand-이 후크는 isExpanded 상태를 제공하고 expand() 핸들을 제공합니다.
USECLOUDSTORAGE-이 후크는 CloudStorage 객체를 약속 함수로 제공합니다.
useinitData-이 후크는 InitDataUnsafe 및 InitData 객체를 제공합니다
사용 Webapp-이 후크는 기본 WebApp 객체를 제공합니다
다음은 다음과 같습니다.
앞으로 Telegram 컨텍스트없이 웹 응용 프로그램에서도 미국 구성 요소를 사용하고자합니다.
모든 Telegram WebApp 기능 지원
메인 Telegram WebApp 기능 지원
항상 그렇듯이 놀라운 기고자 덕분에!
기고자와 함께 만들어졌습니다.
그것에 대해 읽어? 로드맵 및 공식 문서 전보 미니 앱
질문이 있습니까? 우리의 사례, 파멸 및 문제를 확인하십시오
포크하고 자신의 수정에 기여합니다