Geekly articles weekly

VK mini应用程序中的应用程序开发

为什么我要开发用于VK的应用程序？ 我从事大众服务的前端开发已经有很多年了，而VKontakte社交网络目前为开发人员提供的功能是一种快速有效的方法，可以建立具有大量受众的另一个沟通渠道。 下面，我将告诉您VK mini应用程序的概念是什么，开发应用程序时使用哪些技术，以及应注意的事项。

图片

该文章在Blog.ru云解决方案博客文章上的初始发布： https ://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

VK mini应用程序平台


VKontakte为第三方开发人员提供了编写Web应用程序并将其放置在应用程序目录中和/或在网络内进行升级的机会。 应用程序用户无需从Google Play / App Store下载单个本机应用程序，所选应用程序的功能可在VKontakte的主应用程序的用户会话内部或通过社交网站上的浏览器使用。 该社交网络具有有关如何在VK mini应用程序平台上入门的详细说明。

应用程序基础架构VK mini应用程序


VK mini应用程序是位于特定地址的常规网络资源。 我们必须将其放置在社交网络的“应用程序控制面板”中。

VKontakte允许您放置应用程序的三个版本：

  • 对于移动客户端-即在本地VKontakte应用程序中打开；
  • 桌面选项-浏览器中的vk.com ；
  • 手机浏览器（https://m.vk.com）的选项。

放置时，还可以启用“开发模式”。 它允许被指定为应用程序管理员的VKontakte用户使用单独的地址来测试三个店面中的每一个。 也就是说，打开应用程序时，普通用户将看到条件地址yourapp.com上的内容，管理员将看到test.yourapp.com。

当您从桌面通过iFrame将Web资源嵌入到通过普通WebView嵌入到VKontakte应用程序中时。 因此，有必要记住一些JavaScript功能可能不可用，需要进行全面的测试。

在不同设备上测试Web应用程序后，可以将其发送以进行审核，以便将其放置在目录中。 审核申请是从“应用程序控制面板”发送的。 VKontakte宣布的审核期限为7天。 新应用程序（VKontakte术语中的服务）的计算在每周四进行一次。
关于如何创建正确的应用程序，有详细的备忘录 。 我建议您在申请审核之前，先与她仔细检查。

应用开发VK mini应用


因此，VK Mini Apps应用程序实际上是通过iFrame或WebView嵌入到平台中的常规Web应用程序。 因此，将在其上选择要使用的技术。

但是，要开发前端，VKontakte建议使用自己的VK UI组件库（在React上制作）：

这很方便-许多典型的组件已经准备就绪，仅能将它们嵌入到页面或SPA的结构中。

组件已经根据VKontakte样式指南进行了样式设置-用户在社交网络中使用时已经习惯了控件和交互性，它将更加熟悉和方便。

VKontakte不需要开发人员遵循任何严格的前端架构-我们仅采用所需的内容，并根据需要修改组件。 例如，您始终可以将您的类，事件处理程序添加到愚蠢的视图组件中，制作任何深度的嵌套组件，等等。
在VKUI上有一个相当详细的文档 （尽管不是很完整）。 GitHub上的源代码： https : //github.com/VKCOM/VKUI 。 因此，最简单的安装：

npm i —save-dev @vkontakte/vkui

请确保将以下元标记放在应用程序的布局页面的开头，否则在iOS设备上，本机VKontakte导航将无法正确显示：

 <meta content=»width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover» name=»viewport» />

接下来，我们只需要在页面上嵌入React应用程序即可。

应用程序打开选项


VKontakte本身会将启动参数添加到打开应用程序的地址栏中。 它们的列表如下： vk_user_id，vk_app_id，vk_are_notifications_enabled，vk_language，vk_ref，vk_access_token_settings，vk_group_id，vk_viewer_group_role，vk_platform，vk_is_favorite，sign 。 与您的应用程序将使用大致相同的地址打开框架： youvkapp.ru/?vk_access_token_settings=notify&vk_app_id=888888&vk_are_notifications_enabled=1&vk_is_app_user=1&vk_is_favorite=1&vk_language=ru&vk_platform=desktop_web&vk_ref=other&vk_user_id=111111&sign=fsdfsdgfgfiuoitu8345u34j

这使您在启动应用程序以开始与特定用户的个人交互时，已经具有从URL中提取的相当完整的数据集。 例如，与他说相同的语言-俄语，英语或其他某种语言，或要求包括您的通知。

对于2019年11月，Vkontakte不打算在此VKontakte列表中包括其他参数。 但是，您可以在url中传递任意哈希，例如： youvkapp.ru＃custom_param

路由选择


如果应用程序有多个屏幕（我认为这只是您的情况），则需要在屏幕之间进行转换。 我们的React应用程序的状态负责显示此屏幕。 对于View的组织，VKontakte提供了两种方法：更改VKUI View和VKUI Panel的活动组件。

每个视图负责其自己的用户方案：主要，辅助，呼叫目录，搜索页面和其他。 视图内部包含自己的一组面板-这些是用户脚本中的特定步骤（屏幕）。 抽象地，它看起来像这样：

 import {Root, View, Panel} from '@vkontakte/vkui'; <Root activeView={this.state.views.activeView}> <View id=»main» activePanel={this.state.views.main.activePanel}> <Panel id=»step-1″> … </Panel> <Panel id=»step-2″> … </Panel> </View> <View id=»search»> <Panel id=»search-panel»> … </Panel> </View> <View id=»info» activePanel={this.state.views.info.activePanel}> <Panel id=»oferta»> … </Panel> <Panel id=»conditions»> … </Panel> <Panel id=»about»> … </Panel> </View> </Root>

在activePanel的状态下，我们指定要显示的元素的ID。

布局和组件


现在，您可以在面板内看到使用VK UI组件创建的典型页面。

VK UI库提供了构建交互式应用程序所需的几乎完整的组件集：各种表单元素，弹出窗口，样式化的警报，画廊，导航面板，微调器，化身，页脚等。

 import { Button, Div, FormLayout, Input, Panel, PanelHeader, PanelHeaderBack, Search, View } from "@vkontakte/vkui"; import Icon36Done from "@vkontakte/icons/dist/36/done"; import CustomTextarea from "./YourComponents/CustomTextarea"; render() { return ( <div> <PanelHeader left={<PanelHeaderBack onClick={() => {this.Actions.historyBack()}} />} >App Title</PanelHeader> <Icon36Done width={48} height={48} /> <Div> <h1>This is the first page</h1> <p className="page-hint">You can do some interaction here</p> </Div> <FormLayout> <Input type="text" defaultValue="" placeholder="Enter your name" className="active" /> <CustomTextarea name="textarea1" className="custom" disabled={this.state.blocks.textarea.disabled} value={this.state.userData.textarea} /> <Button size="xl" level="secondary" >Submit</Button> </FormLayout> <Search value={this.state.search.text} onChange={this.onSearch} /> </div> ) }

如您所见，另一个vkontakte软件包出现了：

 npm i —save-dev @vkontakte/icons

您可以使用便捷管理器选择所需的图标。

主要规则是正确使用组件或您自己的标题布局。 原生VKontakte应用程序将控制按钮放置在标题的右侧。

图片

自定义块：

 import { Textarea } from «@vkontakte/vkui»; export default class CustomTextarea extends React.Component { render() { return ( <div className=»form-group custom_textarea»> <div className=»FormLayout__row-top»>Custom textarea is here</div> <Textarea disabled={this.props.disabled} name={name} id={name} onChange={(e) => this.bindData(e, this.props.name)} value={this.props.value} className={this.props.className} /> </div> </div> ); } }

值得注意的是：VKontakte声明组件可能无法在台式机上正确显示。 但是，可以通过添加自己的CSS规则来设置样式。 例如，以一种方式将一个应用程序中面板之间的过渡动​​画制作成样式：

 .desktop_web { .View__panel—prev { max-width: 458px !important; margin: 0 auto; left: calc(50% — 230px) !important; -webkit-animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1); animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1); } .View__panel—next { max-width: 460px !important; left: calc(50% — 230px) !important; } }

这些样式以连接到应用程序的一般样式流连接。

VK Connect库


VK Connect库提供对VKontakte网络本身的广泛功能的访问，以及如果我们使用移动应用程序进行操作，则可以访问设备的功能。 要连接它，您需要安装vkontakte / vk-connect 软件包 ： npm i -save-dev vkontakte / vk-connect 。

VK Connect的众多功能之一包括扫描QR码，获取地理位置信息以及拨打联系电话。 使用社交网络功能还有很多机会：打开/关闭通知，在墙上发布帖子，社区授权，订阅消息。 必须明智地使用它们：例如，通知数量有限制-每天不超过一个。 有单独的通知建议 。 文档中提供了功能的完整列表。

为了使我们的应用程序开始正常运行，我们必须首先执行初始化：

 import connect from '@vkontakte/vk-connect'; connect.send(«VKWebAppInit», {});

与库的所有进一步交互都以类似的方式发生。 使用connect.send方法，我们调用所需的操作并听取答案。 为此，我们必须订阅事件：

 connect.subscribe((e) => { switch (e.detail.type) { case «VKWebAppGetUserInfoResult» : this.bindConnectUserData(e.detail.data); break; } });

在详细信息对象中，返回类型（即我们等待答案的事件类型的名称）和数据（数据集）。 在上面的示例中，我们监听对connect.send请求（“ VKWebAppGetUserInfo”，{}）的响应，该请求应返回有关应用程序用户的信息：姓名，性别，出生日期，居住地，指向社交网络上头像的链接。

VKontakte不保证支持所有设备（iOS，Android，Web）上的所有事件，因此最好在执行代码之前检查此支持：

 if (connect.supports(«VKWebAppGetUserInfo»)) …

如果您需要的不仅仅是VK Connect库本身可以提供的功能 ，VK Connect还提供对VK API请求的支持：

 connect.send(«VKWebAppCallAPIMethod», {«method»: «users.get», «request_id»: «your_unique_req_id», «params»: {«user_ids»: «1», «v»:»5.103″, «access_token»:»your_token»}});

VK Pay


实际上，VK Pay是使用Money Mail.Ru在线支付服务的便捷前端。 要调用付款表格，只需使用VK Connect库中的调用打开付款窗口：

 connect.send(«VKWebAppOpenPayForm», {«app_id»: 888888, «action»: «pay-to-service», «params»: {}});

因此，您可以使用VKontakte网络上的内部付款方式出售服务和商品。 官方文档中有更多详细信息。

Source: https://habr.com/ru/post/zh-CN480974/

More articles:


All Articles