发送问卷链接到企业微信群聊 - 使用指南

📋 功能说明

在确认需求阶段或交付执行阶段，将项目需求调查问卷链接发送到当前群聊，方便客户填写。

🎯 实现方式

方式1：发送图文消息（推荐）

效果：群聊中显示卡片式问卷链接，带标题、描述和封面图

代码示例：

// 在stage-requirements.component.ts或stage-delivery.component.ts中
async sendSurveyLinkToChat(): Promise<void> {
  try {
    console.log('📤 准备发送问卷链接到群聊...');
    
    // 1. 构建问卷链接
    const surveyUrl = `https://app.fmode.cn/dev/yss/#/wxwork/${this.cid}/project/survey/project/${this.projectId}`;
    console.log('🔗 问卷链接:', surveyUrl);
    
    // 2. 发送图文消息
    await this.wxworkSDKService.sendChatMessage({
      msgtype: 'news',
      news: {
        link: surveyUrl,
        title: '📋 项目需求调查问卷',
        desc: '请填写项目需求，我们会根据您的需求进行设计',
        imgUrl: 'https://file-cloud.fmode.cn/storage/survey-cover.jpg' // 封面图
      }
    });
    
    console.log('✅ 问卷链接已发送到群聊');
    window?.fmode?.toast?.success?.('问卷链接已发送到群聊');
  } catch (error: any) {
    console.error('❌ 发送问卷链接失败:', error);
    
    let errorMessage = '发送失败，请重试';
    if (error?.errMsg?.includes('no permission')) {
      errorMessage = '权限不足，请联系管理员配置sendChatMessage权限';
    } else if (error?.errMsg?.includes('not in session')) {
      errorMessage = '请从群聊侧边栏打开应用';
    }
    
    window?.fmode?.alert?.(errorMessage);
  }
}

方式2：发送纯文本消息

效果：群聊中显示纯文本问卷链接

代码示例：

async sendSurveyLinkAsText(): Promise<void> {
  try {
    const surveyUrl = `https://app.fmode.cn/dev/yss/#/wxwork/${this.cid}/project/survey/project/${this.projectId}`;
    
    await this.wxworkSDKService.sendChatMessage({
      msgtype: 'text',
      text: {
        content: `📋 项目需求调查问卷\n\n请点击以下链接填写项目需求：\n${surveyUrl}\n\n我们会根据您的需求进行设计，感谢配合！`
      }
    });
    
    console.log('✅ 问卷链接已发送');
    window?.fmode?.toast?.success?.('问卷链接已发送');
  } catch (error) {
    console.error('❌ 发送失败:', error);
    window?.fmode?.alert?.('发送失败，请重试');
  }
}

🔧 完整实现步骤

步骤1：添加导入（如果还没有）

文件：stage-requirements.component.ts

import { WxworkSDKService } from '../../../services/wxwork-sdk.service';

步骤2：注入服务

constructor(
  // ... 其他服务
  private wxworkSDKService: WxworkSDKService
) {}

步骤3：初始化SDK（在ngOnInit中）

async ngOnInit() {
  // 获取路由参数
  this.cid = this.route.parent?.snapshot.paramMap.get('cid') || '';
  this.projectId = this.route.parent?.snapshot.paramMap.get('projectId') || '';
  
  // 🔥 初始化企业微信SDK
  if (this.cid) {
    console.log('🔐 初始化企业微信SDK...');
    try {
      await this.wxworkSDKService.initialize(this.cid, 'project');
      console.log('✅ 企业微信SDK初始化成功');
    } catch (error) {
      console.error('❌ 企业微信SDK初始化失败:', error);
    }
  }
  
  // ... 其他初始化
}

步骤4：添加发送方法

/**
 * 发送问卷链接到群聊
 */
async sendSurveyLinkToChat(): Promise<void> {
  if (!this.cid || !this.projectId) {
    window?.fmode?.alert?.('缺少必要参数，无法发送问卷链接');
    return;
  }
  
  try {
    console.log('📤 准备发送问卷链接...');
    console.log('  CID:', this.cid);
    console.log('  ProjectID:', this.projectId);
    
    // 构建问卷URL
    const surveyUrl = `https://app.fmode.cn/dev/yss/#/wxwork/${this.cid}/project/survey/project/${this.projectId}`;
    console.log('🔗 问卷URL:', surveyUrl);
    
    // 发送图文消息
    await this.wxworkSDKService.sendChatMessage({
      msgtype: 'news',
      news: {
        link: surveyUrl,
        title: '📋 项目需求调查问卷',
        desc: '请填写项目需求，我们会根据您的需求进行设计。点击填写问卷 →',
        imgUrl: 'https://file-cloud.fmode.cn/storage/company/cDL6R1hgSi/assets/survey-cover.jpg'
      }
    });
    
    console.log('✅ 问卷链接发送成功');
    window?.fmode?.toast?.success?.('✅ 问卷链接已发送到群聊');
    
  } catch (error: any) {
    console.error('❌ 发送问卷链接失败:', error);
    console.error('  错误消息:', error?.errMsg);
    console.error('  错误代码:', error?.errCode);
    
    // 友好的错误提示
    let errorMessage = '发送失败，请重试';
    if (error?.errMsg?.includes('no permission')) {
      errorMessage = '❌ 权限不足\n请联系管理员在企微后台配置sendChatMessage权限';
    } else if (error?.errMsg?.includes('not in session')) {
      errorMessage = '❌ 请从群聊侧边栏打开应用\n不能从工作台打开';
    } else if (error?.message === 'JSSDK注册失败') {
      errorMessage = '❌ JSSDK注册失败\n请从群聊侧边栏重新打开应用';
    }
    
    window?.fmode?.alert?.(errorMessage);
  }
}

步骤5：添加UI按钮

文件：stage-requirements.component.html

<!-- 在合适的位置添加发送问卷按钮 -->
<div class="survey-section">
  <h3>需求调研</h3>
  <p>请客户填写需求调查问卷</p>
  
  <button class="btn-send-survey" (click)="sendSurveyLinkToChat()">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
    </svg>
    <span>发送问卷链接到群聊</span>
  </button>
</div>

步骤6：添加样式

文件：stage-requirements.component.scss

.survey-section {
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
  margin: 20px 0;
  
  h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
  }
  
  p {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #6b7280;
  }
  
  .btn-send-survey {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      background: #4338ca;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    }
    
    &:active {
      transform: translateY(0);
    }
    
    svg {
      flex-shrink: 0;
    }
  }
}

🎨 UI效果对比

方式1：图文消息（news）

群聊中显示：

┌──────────────────────────────────┐
│ 📋 项目需求调查问卷              │
│                                  │
│ [封面图]                         │
│                                  │
│ 请填写项目需求，我们会根据您     │
│ 的需求进行设计。点击填写问卷 →   │
└──────────────────────────────────┘

✅ 优点：视觉效果好，带封面图，点击跳转

方式2：纯文本（text）

群聊中显示：

📋 项目需求调查问卷

请点击以下链接填写项目需求：
https://app.fmode.cn/dev/yss/#/wxwork/...

我们会根据您的需求进行设计，感谢配合！

✅ 优点：简单直接，兼容性好

🧪 测试步骤

1. 从群聊侧边栏打开应用

群聊 → 右上角"..." → 应用 → 你的应用

2. 进入确认需求阶段

3. 点击"发送问卷链接到群聊"按钮

4. 检查控制台日志

📤 准备发送问卷链接...
  CID: cDL6R1hgSi
  ProjectID: xxx
🔗 问卷URL: https://...
🔍 [sendChatMessage] ========== 开始发送消息 ==========
🔍 [sendChatMessage] 消息类型: news
✅ [sendChatMessage] 消息发送成功!
✅ 问卷链接发送成功

5. 检查群聊中是否显示问卷链接卡片

6. 点击卡片，验证是否跳转到问卷页面

🔍 常见问题

Q1: 发送后群聊中没有显示

检查清单：

✅ 是否从群聊侧边栏打开应用？
✅ 控制台是否显示"消息发送成功"？
✅ 是否有报错信息？
✅ 企微后台是否开启sendChatMessage权限？

Q2: 点击卡片无法跳转

原因：问卷URL格式错误或域名未配置

检查：

// URL格式应该是：
https://app.fmode.cn/dev/yss/#/wxwork/{cid}/project/survey/project/{projectId}

// 确保cid和projectId都有值
console.log('CID:', this.cid);
console.log('ProjectID:', this.projectId);

Q3: 提示"Permission Denied"

解决：

企微管理后台 → 应用管理 → 你的应用
接口权限 → 开启"发送消息到聊天中"
保存并等待5分钟生效

Q4: 封面图不显示

原因：imgUrl路径错误或图片不可访问

解决：

// 确保使用可公开访问的图片URL
imgUrl: 'https://file-cloud.fmode.cn/storage/company/cDL6R1hgSi/assets/survey-cover.jpg'

// 或者使用项目中的图片
imgUrl: 'https://app.fmode.cn/dev/yss/assets/survey-cover.png'

📝 完整代码示例

stage-requirements.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { WxworkSDKService } from '../../../services/wxwork-sdk.service';

@Component({
  selector: 'app-stage-requirements',
  templateUrl: './stage-requirements.component.html',
  styleUrls: ['./stage-requirements.component.scss']
})
export class StageRequirementsComponent implements OnInit {
  cid: string = '';
  projectId: string = '';
  
  constructor(
    private route: ActivatedRoute,
    private wxworkSDKService: WxworkSDKService
  ) {}
  
  async ngOnInit() {
    // 获取路由参数
    this.cid = this.route.parent?.snapshot.paramMap.get('cid') || '';
    this.projectId = this.route.parent?.snapshot.paramMap.get('projectId') || '';
    
    // 初始化企业微信SDK
    if (this.cid) {
      console.log('🔐 初始化企业微信SDK...');
      try {
        await this.wxworkSDKService.initialize(this.cid, 'project');
        console.log('✅ 企业微信SDK初始化成功');
      } catch (error) {
        console.error('❌ 企业微信SDK初始化失败:', error);
      }
    }
    
    // ... 其他初始化
  }
  
  /**
   * 发送问卷链接到群聊
   */
  async sendSurveyLinkToChat(): Promise<void> {
    if (!this.cid || !this.projectId) {
      window?.fmode?.alert?.('缺少必要参数，无法发送问卷链接');
      return;
    }
    
    try {
      console.log('📤 准备发送问卷链接...');
      
      // 构建问卷URL
      const surveyUrl = `https://app.fmode.cn/dev/yss/#/wxwork/${this.cid}/project/survey/project/${this.projectId}`;
      console.log('🔗 问卷URL:', surveyUrl);
      
      // 发送图文消息
      await this.wxworkSDKService.sendChatMessage({
        msgtype: 'news',
        news: {
          link: surveyUrl,
          title: '📋 项目需求调查问卷',
          desc: '请填写项目需求，我们会根据您的需求进行设计。点击填写问卷 →',
          imgUrl: 'https://file-cloud.fmode.cn/storage/company/cDL6R1hgSi/assets/survey-cover.jpg'
        }
      });
      
      console.log('✅ 问卷链接发送成功');
      window?.fmode?.toast?.success?.('✅ 问卷链接已发送到群聊');
      
    } catch (error: any) {
      console.error('❌ 发送问卷链接失败:', error);
      
      let errorMessage = '发送失败，请重试';
      if (error?.errMsg?.includes('no permission')) {
        errorMessage = '❌ 权限不足\n请联系管理员配置sendChatMessage权限';
      } else if (error?.errMsg?.includes('not in session')) {
        errorMessage = '❌ 请从群聊侧边栏打开应用';
      } else if (error?.message === 'JSSDK注册失败') {
        errorMessage = '❌ JSSDK注册失败\n请从群聊侧边栏重新打开应用';
      }
      
      window?.fmode?.alert?.(errorMessage);
    }
  }
}

文档创建时间：2025-11-30 13:50
适用阶段：确认需求、交付执行
关键方法：wxworkSDKService.sendChatMessage()
消息类型：news（图文）或 text（纯文本）

wxwork-send-survey-link-example.md 12 KB 文件歷史 原始文件