> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 介绍

> 使用集成和外部 API 扩展您的 superun 应用程序功能

superun 具有原生无缝集成,可以导出代码并添加后端.但如果您想为应用程序添加特定功能,也可以集成外部 API.

## 什么是 API?

API 是软件应用程序相互通信和共享数据的一种方式.不同的 API 提供不同的功能,例如发送电子邮件或处理付款.您可以在我们博客上的这篇文章中详细了解 API 的强大功能.

## 本机集成

浏览以下部分以快速入门并了解有关我们的本机集成的更多信息.

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/ai">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/brain.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">superun AI</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">解锁强大的 AI 模型,如 GPT-4,Claude 和 Gemini,无需 API 密钥,无需设置.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/cloud">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/cloud.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">superun 云计算</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">无縫构建复杂的应用程序.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/storage">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/folder.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">superun 文件存储</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">将存储功能整合到您的产品中.安全地存储和检索数据.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/stripe">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/credit-card.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">Stripe 集成</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">使用 Stripe 将支付处理功能添加到您的 superun 应用程序（适用于国际支付场景）.如需接入微信支付或支付宝支付,请使用专门的接入指南.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/image-generation">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/image.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">superun 生图</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">将 AI 生图功能整合到产品中,支持插画、素材图、页面配图等场景.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/video-generation">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/film.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">视频生成</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">为产品集成 AI 视频生成能力.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/text-to-speech">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/volume-high.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">文字转语音</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">为产品集成 AI 文字转语音能力,支持多种音色和语言.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/amap">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/map-location-dot.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">高德地图</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">为产品集成高德地图能力,包括地图展示、地点搜索和路线规划.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/faceid">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/user.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">腾讯云人脸能力</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">接入腾讯云人脸能力,支持实名核验、活体检测与照片人脸比对.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/sms">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/comment-sms.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">短信服务</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">为产品集成短信发送能力,支持阿里云和腾讯云短信服务商.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/agent-friendly">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/terminal.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">Agent 友好</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">把你在 superun 上做的应用变成 AI 智能体可以直接调用的工具.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/resend">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/envelope.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">Resend 集成</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">使用 Resend 将电子邮件功能添加到您的 superun 应用程序.Resend 是一个现代化的电子邮件 API.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/superun-sms-provider">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/phone.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">superun SMS Provider</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">使用 superun 云计算 整合 SMS 手机验证 - 自动配置并可直接使用.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/dingtalk">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/comments.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">钉钉插件</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">将钉钉登录、企业成员校验与知识库文档写入能力整合到您的 superun 应用中.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/dingtalk-document">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/file-lines.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">钉钉文档写入</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">把产品内容、AI 生成结果或业务数据写入钉钉知识库文档.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/wecom">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/building-user.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">企业微信插件</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">接入企业微信登录、成员访问控制与组织架构能力.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/wecom-contacts">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/users.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">企业微信通讯录</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">读取企业微信成员、部门和组织结构，用于选择器、权限和身份映射.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/feishu">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/paper-plane.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">飞书插件</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">接入飞书登录、消息、日程、任务和通讯录能力.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/feishu-message">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/message.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">飞书消息</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">接入机器人通知、群消息、消息卡片和事件订阅.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/feishu-calendar">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/calendar-days.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">飞书日程</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">接入日程创建、查询、会议安排和可用时间检查.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/feishu-task">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/list-check.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">飞书任务</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">接入任务创建、负责人、状态同步和提醒流程.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/feishu-contacts">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/address-book.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">飞书通讯录</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">读取飞书成员、部门和组织结构，用于成员选择、权限和身份映射.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/email-resume-fetch">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/envelope-open-text.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">邮箱简历采集</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">从招聘邮箱收取简历附件，解析候选人信息并同步到候选人库.</div>
  </div>
</a>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/integrations/wechat-miniprogram">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/mobile-screen.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">微信小程序</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">一键将项目发布为微信小程序，在 superun 内完成预览与上传.</div>
  </div>
</a>

## 入门

<Steps>
  <Step title="选择集成">
    浏览我们经过验证的集成或计划集成自定义 API
  </Step>

  <Step title="设置身份验证">
    安全地配置 API 密钥和身份验证方法
  </Step>

  <Step title="测试集成">
    使用 superun 的内置测试工具来验证您的集成是否有效
  </Step>

  <Step title="部署和监控">
    部署您的应用程序并监控集成的性能
  </Step>
</Steps>

<a className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/superun/introduction/faq">
  <div className="px-6 py-5 relative">
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
      <div className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage:"url('https://d3gk2c5xim1je2.cloudfront.net/v6.6.0/regular/circle-question.svg')",maskRepeat:"no-repeat",maskPosition:"center center"}} />

      <h3 className="not-prose font-semibold text-base text-gray-800 dark:text-white">需要帮助吗?</h3>
    </div>

    <div className="prose mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">查看我们的常见问题解答,了解常见集成问题和故障排除提示.</div>
  </div>
</a>