小红书小组件开发最早踩坑版

前言

是这样的，这段小红书逛的多，发现有一篇关于小红书小组件的介绍，介绍里提到的是[AI调酒]这款小组件，在内容里可以直接挂载。我试玩了一下，还挺有趣，交互感挺强的。然后下面提到说，留言即可有机会获取内测开发资格，内测时可以免费使用里面的AI功能。想着能白嫖就报名了，正好加入小红书生态，好宣传自己的app一波，hhh

没想到过一天就受到了科技署的邀请，加入了内测群！

开发

进群后，就令我感到有点诧异了，群里陆续进去了21个人，有15个工作人员，6个被邀请的开发。进去后，组织者发了一个操作文档：

ruby 复制代码

各位好，我们是小组件项目的产品和研发，各位可以先提供下自己的小红书账号，我们为大家添加测试白名单

添加后需要完成的事项：

1、前往小红书开放平台创建开发者账号（开白后可申请个人主体账号，若已有账号可忽略）
https://miniapp.xiaohongshu.com/home

2、查阅小组件和智能体的开发文档，下载开平IDE工具，进行设计和开发
小组件开发介绍：https://miniapp.xiaohongshu.com/doc/DC026740
智能体开发介绍（如果需要在小组件中内嵌AI服务）：https://miniapp.xiaohongshu.com/doc/DC783288
最佳实践：https://miniapp.xiaohongshu.com/doc/DC246551

3、由于小组件是无需备案的，因此平台会承担一定风险，因此有明确的创作方向后，需要开发者提供简易的demo图，我们会做内部的产品&研发&安全的可行性评估

🌟🌟 在过程中，大家如果有流程、开发、设计上的问题，都可以群内和我们沟通，由于这是小组件第一波内测，所以不可避免地可能还有些问题，大家提出来后我们也会及时处理优化，也感谢大家理解[合十]

🌟🌟 也辛苦各位重点关注：小组件整体的定位是「轻量、简单」，以及整体的UI设计也希望能「简介、美观」，更符合小红书社区氛围，这样更容易在社区总传播

意思就是，大家按照文档操作就行，基本没什么大问题。

但是小问题还是挺多的。

里面的很多开发，基本都有小红书小程序的开发经验了，这次感觉纯属了为了捧场或者是和我一样，做完后有没有什么推流。他们基本上很快就做完了。我就不一样了，有主职工作而且一直做的是移动原生，虽然之前学过一丢丢微信小程序开发，但都已经过了差不多3年了。

但来都来了。

小组件

小组件开发可以独立进行，不依赖其他的三方。如果可以的话，你可以开发个很简易的demo上去，当然你还得经过小红书官方的审核，如果太基础的话就不太行，这个大家都懂得。

一般来讲，小组件需要依赖后台服务，或者是小红书他们提供AI智能体，毕竟咋们是奔着它去的。而且给的demo也是关于智能体。

第一步下载编辑器

编辑器好像是需要这个版本才行，是官方人员直接在群里发的。最新版本的编辑器融合了AI功能，真的很给力，我自己写好了核心的逻辑后，让它来美化UI真是太省事了，而且美化的UI和小红书官方的小组件交互效果有点类似，有点红薯风，对于我这种没有UI审美的开发来说是一大福星，而且比免费版本的cursor好用。

跟着文档开发后

跟着文档开发，这里就不贴具体的过程了，因为文档也会更新，会更完善。因为我们是第一版本，所以文档里有很多遗漏的和错误的，这里补充一下这部分，如果再有人开发到这一步，可能会用的到。

隐私协议:

ini 复制代码

xhs.openClipLegalPolicy();

小组件核心代码：因为我是调用的是智能体，调用智能体的代码用官方的那样写是有问题的，写了好久有跑不通，咨询了很久才得到正确的代码：

初始化agent

javascript 复制代码

  // 初始化 Agent  env: 'production'按需选择线上和测试
  async initAgent() {

    try {
      const agentId = "test6baffa154e6db2d96e64ef310a6e";
      const agent = xhs.cloud.AI.createAgent({
        agentId,
        env: 'production',
        version: '0.1.8'
      });
      
      this.setData({
        agent: agent
      });

      console.log("Agent初始化成功");
    } catch (error) {
      console.error("Agent初始化失败: ", error);
      xhs.showToast({
        title: "Agent初始化失败",
        icon: "none",
      });
    }
 },

kotlin 复制代码

// 调用智能体 解梦
if (this.data.agent == null) return;

      const agentInfo =  this.data.agent.getAgentInfo();
      console.log("res", agentInfo);
      
      // 使用回调方式发送消息
    const { message, onMessage, onSuccess, onError } = this.data.agent.sendMessage({
      msg: dreamContent,
      history: [],
    });


    onSuccess((result) => {
      this.setData({
        isOver:true
      })
      console.log("请求成功:", result);
      console.log("API调用成功，返回结果:", result);

      // result.data.data
      xhs.hideLoading();

    });
 
    // 监听流式消息 
    onMessage((chunkStr) => {
      // console.log("收到消息块:", chunkStr, "api-message", message);
      xhs.hideLoading();
 
      if (chunkStr === "[DONE]") {
        return;
      }
 
      let chunk = null;
      try {
        chunk = JSON.parse(chunkStr);
      } catch (error) {
        console.error("解析消息块失败:", error);
        return;
      }
 
      // 解析消息块
      if (chunk!=null&&chunk.choices && chunk.choices[0] && chunk.choices[0].message) {
        const message = chunk.choices[0].message;
 
        console.log("收到消息块 message:", message.content);


        // 处理回复内容
        if (message.content) {
          this.setData({
            dreamInterpretation:this.data.dreamInterpretation + message.content
          })


          this.setData({
            isLoading: false,
            showResult: true,
            resultDream: dreamContent,
            dreamInterpretation: this.data.dreamInterpretation
          });

        }
      }
    });
 
    // 监听错误回调
    onError((error) => {
      console.error("请求失败:", error);
      xhs.hideLoading();
      xhs.showToast({
        title: "生成失败，请重试",
        icon: "none",
      });
    });

智能体

智能体分为流式和非流式的。看具体的业务需求了，如果是很快的生成和生成的文本很短，就像[AI调酒]，只需要简单的json即可，那就可以用非流式的。像我这种需要生成长文本的就有点不太适合了，所以这里选择的是流式输出的形式。

核心代码：

javascript 复制代码

// {user_mood: '开心',user_taste: '随便'}
  async sendMessage(input) {
    console.log('message -- '+ JSON.stringify(input))
    console.log('--')
    console.log('msg -- '+ input.msg)
   
    const model = this.createModel('deepseek-v3')

    const messages = [
      {
        role:'system',
        content: systemPrompt
      },
      {
        role:'user',
        content:{
          type:'text',
          content: input.msg
          // content: JSON.stringify(input)
          // content: '{\'user_mood\': \'开心\', \'user_taste\': \'随便\'}'
        }
      }
    ]

    const modelResponse =  await model.streamText({
      enable_thinking:false,
      temperature:1,
      messages: [
        {
          role: 'system',
          content: systemPrompt
        },
        {
          role: 'user',
          content: {
            type: 'text',
            // JSON.stringify(input.msg)
            content: JSON.stringify(input)
            // context:input.msg
          }
        }
      ]}
    )
    console.log('aaaa')
    for await (const chunk of modelResponse) {
      this.sseSender.send({ data: chunk });
    }
    console.log('bbbb')
    this.sseSender.end();
    }

systemPrompt 指的是提示词，提示词是ai的核心，这里可以返回json或者是markdown或是html样式。如果不会写提示词，也可以让ai给你写提示词，hhh

End

最后附一张截图。各位大佬有兴趣可以在小红书里搜索AI解梦小组件 ，里面有笔记进行挂载。

发布后发现，官方根本没有推流，而且后续也没提小组件这回事了🤡。不过就当自己玩玩了，可以使用免费的ai服务进行快速解梦~

小红书小组件开发 最早踩坑版

前言

开发

小组件

第一步下载编辑器

跟着文档开发后

智能体

End

小红书小组件开发最早踩坑版