AI实战之小程序05-搜索建议点赞评论怎么收口，我这样把互动链路补成闭环

【摘要】小程序开发常陷入假闭环误区看似功能完备搜索、点赞、评论等但用户未登录或操作失败时链路立即断裂。本文通过Sourcelin案例揭示真正闭环的关键1搜索需整合建议词、热搜和历史记录2互动功能需实现登录续做和失败回滚机制3分享路径需确保回流畅通。技术实现上通过pending-actions.ts处理未登录操作采用乐观更新与回滚策略保障体验连贯性。只有当用户在任何中断场景下都能恢复操作才是真正的产品闭环。小程序开发的假闭环陷阱与真实互动链路构建 做小程序最容易出现一种假闭环内容能看了搜索也能搜了点赞收藏评论按钮也都摆上去了但用户一旦没登录、搜不到词、评论失败或者从分享页回来整条互动链路马上断掉。Sourcelin 这轮把“搜索与互动”单独拿出来收口核心不是继续铺页面而是把搜索入口、互动动作、登录续做、分享回流和错误回滚都补到能连续使用。只有做到这一步阅读才会真正进入“愿意继续操作”的阶段。本次阶段推文基于产品文档、仓库现状和本地可提取开发记录生成未完整依赖远端会话历史。这个阶段为什么必须单独收口产品文档5.1第 4 周把这一阶段定义得很直接搜索点赞、收藏、评论关注作者分享真正难的地方不是某个按钮能不能点而是这些动作是不是还能回到原上下文继续执行。比如未登录时点了收藏是直接报错还是登录后自动续做搜索是不是只有一个输入框还是已经补齐建议、热搜和历史这些差别决定了它是“能演示”还是“能用”。仓库里这一阶段对应哪些页面和模块搜索页sourcelin-ui/sourcelin-ui-uniapp/src/pages-article/search/search.vue文章详情sourcelin-ui/sourcelin-ui-uniapp/src/pages-article/detail/detail.vue社区互动sourcelin-ui/sourcelin-ui-uniapp/src/pages/community/community.vue文章 APIsourcelin-ui/sourcelin-ui-uniapp/src/modules/article/api/article.api.ts互动 APIsourcelin-ui/sourcelin-ui-uniapp/src/modules/interaction/api/interaction.api.ts评论 APIsourcelin-ui/sourcelin-ui-uniapp/src/modules/comment/api/comment.api.ts登录续做与偏好sourcelin-ui/sourcelin-ui-uniapp/src/shared/utils/pending-actions.ts、sourcelin-ui/sourcelin-ui-uniapp/src/shared/utils/analytics.ts这批目录一看就知道这次不是只改一个页面而是把搜索、详情、社区、登录续做和埋点一起补齐。搜索不是“能搜”而是先把搜索入口做顺这次搜索页最关键的不是searchArticles()这一个接口而是把搜索建议、热搜词、搜索历史都接上了const[articleTerms,categories,tags]awaitPromise.all([fetchSearchHotKeywords(),fetchCategoryList(),fetchTagList()]);constresultawaitfetchSearchSuggestions(value);searchHistory.valuegetStoragestring[](SEARCH_HISTORY_KEY,[]);这段代码背后的意义很明确用户还没正式搜索前就能看到“热门搜索”。输入过程中会动态拿“搜索建议”。搜过的词会进入“最近搜索”下次可以直接点。这样搜索页才不再只是一个空输入框而是有了真正可用的搜索承接层。下面是搜索功能的完整流程图展示了从入口到结果的全链路设计搜索执行层搜索入口优化否是是否用户进入搜索页加载初始数据显示热门搜索词显示搜索历史显示分类/标签建议用户输入关键词输入长度 ≥ 2?等待继续输入请求搜索建议显示实时建议列表用户点击搜索/建议保存到搜索历史执行搜索请求搜索成功?显示搜索结果显示空状态/错误提示用户浏览结果点击文章进入详情这个流程图展示了搜索功能从入口到结果的全链路设计重点突出了搜索入口做顺的理念。互动闭环的关键不是按钮而是登录续做和失败回滚文章详情页里点赞、收藏、评论、关注都已经不是“点了再说”而是按登录态和主链路做了收口functionrequireLogin(type:string,payload:unknown):boolean{if(userStore.isLoggedIn)returntrue;userStore.pushPendingAction({type,payload});uni.navigateTo({url:/pages-user/login/login});returnfalse;}这段实现非常关键。它意味着未登录时不会把用户粗暴打回去。系统会记录这次动作是什么。登录成功后可以继续补做之前那次点赞、收藏、评论或关注。与此同时点赞和收藏也补了乐观更新失败回滚constnext!article.value.isCollected;article.value.isCollectednext;article.value.collectCountMath.max(0,(article.value.collectCount||0)(next?1:-1));try{if(next)awaitcollectTarget(article,article.value.id);elseawaituncollectTarget(article,article.value.id);}catch{article.value.isCollected!next;article.value.collectCountMath.max(0,(article.value.collectCount||0)(next?-1:1));}这才是真正的闭环思路先让交互顺再把失败恢复补上而不是一失败就把页面状态搞乱。分享和社区互动也已经接进主路径文章详情页已经补了小程序分享配置onShareAppMessage(()({title:article.value?.title||Sourcelin Blog,path:article.value?.id?/pages-article/detail/detail?id${article.value.id}:/pages/home/home,imageUrl:coverUrl.value}));社区页这边也不是只做浏览而是把说说和树洞的互动、评论抽屉、举报入口一起做进来了awaitcreateContentReport({targetType:currentTargetType,targetId:item.id,reason:reasons[selected],pagePath:/pages/community/community});到这里“搜索与互动”这四个字才算站住能找、能点、能评、能关注、能分享而且失败时不直接崩。我为什么现在确认这个阶段可以勾选完成这次复核后之前卡住这个阶段的几个点已经都补上了搜索联想、热搜词、搜索历史都已存在文章详情和社区的点赞/收藏/评论/关注链路都已接入未登录动作会触发登录续做而不是丢失上下文乐观更新失败有回滚分享路径已经落到真实详情页按产品文档和开发拆解的口径这已经不是“基础可用”而是该阶段的核心页面、核心交互和阶段验收项都闭合了所以我会把它从未完成改为已完成并生成这篇统一长文。效果图开发过程提示词优化版请先读取 AGENTS.md、rules/frontend-uniapp.md、rules/api-contract.md 以及 docs/product/UNIAPP_MINI_PROGRAM_PRODUCT_DESIGN.md 第 5.1 节和第 7 章校准。 本次只处理“搜索与互动”阶段不扩展到用户资产、社区扩展或兼容优化。 请重点完成 1. 搜索建议、热搜词、搜索历史 2. 文章详情的点赞、收藏、评论、关注、分享 3. 未登录触发后的登录续做 4. 乐观更新失败回滚 输出时必须说明 1. 涉及的页面与模块 2. 依赖的接口 3. 哪些交互已经形成闭环 4. 剩余风险和验证证据这类任务里 AI 最容易跑偏的点只补搜索接口不补建议、热搜和历史最后搜索页还是空的。把互动理解成“按钮能调用接口”却忘了登录续做和失败回滚。在页面里直接写一堆请求不把搜索、评论、互动沉到模块层。搜索和互动都做了但分享路径还是假路径回流链路断着。项目入口在线演示https://sourcelin.cnGiteehttps://gitee.com/my_lyq/sourcelin-cloud-blogGitHubhttps://github.com/SourceLin/sourcelin-cloud-blog