Answer the question
In order to leave comments, you need to log in
How to create a button in vk mini apps that would display a function?
There is a code
/* global VK */
import React from 'react';
import PropTypes from 'prop-types';
import Panel from '@vkontakte/vkui/dist/components/Panel/Panel';
import PanelHeader from '@vkontakte/vkui/dist/components/PanelHeader/PanelHeader';
import Button from '@vkontakte/vkui/dist/components/Button/Button';
import Group from '@vkontakte/vkui/dist/components/Group/Group';
import Cell from '@vkontakte/vkui/dist/components/Cell/Cell';
import Div from '@vkontakte/vkui/dist/components/Div/Div';
import Avatar from '@vkontakte/vkui/dist/components/Avatar/Avatar';
const Home = ({ id, go, fetchedUser }) => (
<Panel id={id}>
<PanelHeader>Example</PanelHeader>
{fetchedUser &&
<Group title="User Data Fetched with VK Bridge">
<Cell
before={fetchedUser.photo_200 ? <Avatar src={fetchedUser.photo_200}/> : null}
description={fetchedUser.city && fetchedUser.city.title ? fetchedUser.city.title : ''}
>
{`${fetchedUser.first_name} ${fetchedUser.last_name}`}
</Cell>
</Group>}
<Group title="Navigation Example">
<Div>
<Button size="xl" level="2" onClick={go} data-to="persik">
Show me the Persik, please
</Button>
</Div>
</Group>
</Panel>
);
Home.propTypes = {
id: PropTypes.string.isRequired,
go: PropTypes.func.isRequired,
fetchedUser: PropTypes.shape({
photo_200: PropTypes.string,
first_name: PropTypes.string,
last_name: PropTypes.string,
city: PropTypes.shape({
title: PropTypes.string,
}),
}),
};
export default Home;
<Button size="xl" level="2" onClick={go} data-to="persik">
Show me the Persik, please
</Button>
function dwer() {
bridge.send("VKWebAppShowNativeAds", {ad_format:"preloader"})
.then(data => console.log(data.result))
.catch(error => console.log(error));
}
Answer the question
In order to leave comments, you need to log in
<Button size="xl" level="2"onClick={()=>{bridge.send("VKWebAppShowNativeAds", {ad_format:"preloader"})
.then(data => console.log(data.result))
.catch(error => console.log(error));}}>
Show me the Persik, please
</Button>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question