---
title: WKShareDialog 分享弹窗
group:
  title: 高级
  path: /advanced/
---

# WKShareDialog 分享弹窗

惟客云 C 端分享弹窗。

```tsx
/**
 * 分享弹窗
 */
import api from '@wakeapp/api';
import { WKButton, WKShareDialog, View } from '@wakeapp/components';
import React, { FC } from 'react';
import coverUrl from './cover.jpeg';
import bannerUrl from './banner.png';
import qrCodeUrl from './qrcode.png';
import avatarUrl from './avatar.png';

export default () => {
  return (
    <View>
      <WKShareDialog
        shareAppMessage={{ title: '罗曼罗兰向你推荐' }}
        poster={{
          banner: {
            avatar: avatarUrl,
            title: '罗曼罗兰向你推荐',
            description: '物美价廉的好货，赶紧来抢购吧！',
          },
          cover: coverUrl,
          title: [WKShareDialog.tag('秒杀价'), ...WKShareDialog.price(10000), WKShareDialog.priceLineThrough(999999)],
          description: 'Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机',
          qrCode: qrCodeUrl,
        }}
      >
        <WKButton>示例</WKButton>
      </WKShareDialog>
      <WKShareDialog
        poster={{
          banner: {
            avatar: avatarUrl,
            title: '罗曼罗兰向你推荐',
            description: '物美价廉的好货，赶紧来抢购吧！',
          },
          cover: coverUrl,
          title: '纯文本标题，单行、超出部分会被省略, 比如这样',
          description: 'Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机',
          qrCode: qrCodeUrl,
        }}
      >
        <WKButton>纯文本标题</WKButton>
      </WKShareDialog>
      <WKShareDialog
        poster={{
          banner: bannerUrl,
          cover: coverUrl,
          title: 'Banner 为图片',
          description: '描述，超出超出两行会被省略',
          qrCode: qrCodeUrl,
        }}
      >
        <WKButton>Banner 为图片</WKButton>
      </WKShareDialog>
      <WKShareDialog disabled>
        <WKButton>禁用</WKButton>
      </WKShareDialog>
      <WKShareDialog shareAppMessage={null}>
        <WKButton>禁用</WKButton>
      </WKShareDialog>
      <WKShareDialog
        onBeforeOpen={() => {
          api.showToast({ title: '请先登录', icon: 'none' });
          // 返回 false
          return false;
        }}
      >
        <WKButton>需要先登录</WKButton>
      </WKShareDialog>
      <WKShareDialog>
        <WKButton>只启用分享好友</WKButton>
      </WKShareDialog>
    </View>
  );
};
```

## 组件文档

<API src='@wakeapp/components/WKShareDialog/index.d.ts'></API>

<br>
<br>
