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

前言

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

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

开发

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

各位好，我们是小组件项目的产品和研发，各位可以先提供下自己的小红书账号，我们为大家添加测试白名单添加后需要完成的事项：1、前往小红书开放平台创建开发者账号（开白后可申请个人主体账号，若已有账号可忽略）
https://miniapp.xiaohongshu.com/home2、查阅小组件和智能体的开发文档，下载开平IDE工具，进行设计和开发
小组件开发介绍：https://miniapp.xiaohongshu.com/doc/DC026740
智能体开发介绍（如果需要在小组件中内嵌AI服务）：https://miniapp.xiaohongshu.com/doc/DC783288
最佳实践：https://miniapp.xiaohongshu.com/doc/DC2465513、由于小组件是无需备案的，因此平台会承担一定风险，因此有明确的创作方向后，需要开发者提供简易的demo图，我们会做内部的产品&研发&安全的可行性评估🌟🌟 在过程中，大家如果有流程、开发、设计上的问题，都可以群内和我们沟通，由于这是小组件第一波内测，所以不可避免地可能还有些问题，大家提出来后我们也会及时处理优化，也感谢大家理解[合十]🌟🌟 也辛苦各位重点关注：小组件整体的定位是「轻量、简单」，以及整体的UI设计也希望能「简介、美观」，更符合小红书社区氛围，这样更容易在社区总传播

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

但是小问题还是挺多的。

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

但来都来了。

小组件

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

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

第一步下载编辑器

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

跟着文档开发后

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

隐私协议:

xhs.openClipLegalPolicy();

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

初始化agent

  // 初始化 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",});}},

// 调用智能体 解梦
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.dataxhs.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即可，那就可以用非流式的。
像我这种需要生成长文本的就有点不太适合了，所以这里选择的是流式输出的形式。

核心代码：

// {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服务进行快速解梦~