欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

AI实战之小程序-登录消息资料怎么串起来，我这样把用户资产做成回访闭环

2026-05-31 分类：服务器技术 阅读(20) 评论(0)

摘要：本文详细介绍了在小程序中构建“用户资产”闭环的实战经验。针对小程序“我的”页面常见的数据空洞和回访断裂问题，通过整合微信小程序登录/绑定、个人资料编辑、头像上传、收藏/关注/文章管理以及消息中心等功能，将分散的用户资产串联成完整的回访链路。文章不仅列出了已落地的具体页面和API，还深入分析了登录闭环的两条关键路径、从只读到可编辑的资料页转变，以及如何通过收藏筛选、关注跳转和消息详情等功能实现真正的用户留存。最后，明确了本阶段完成验收的标准，并提供了给AI的精准任务指令，以避免常见开发误区。

很多小程序一到“我的”页就开始失真。首页和详情页看着都像样，但一到登录、资料、收藏、关注、消息中心，马上变成入口一堆、数据一空、回访一断，最后用户根本没有留下来的理由。

Sourcelin 这次把“用户资产”单独补成一个阶段，就是为了避免这种情况。移动端不是只要能登录就够了，而是要让用户在读完内容之后，能回到自己的收藏、关注、文章和消息里，形成真正的回访链路。

本次阶段推文基于产品文档、仓库现状和本地可提取开发记录生成，未完整依赖远端会话历史。

这个阶段到底在补什么

产品文档 5.1 第 5 周把“用户资产”定义为：

  • 登录注册
  • 我的页
  • 个人资料
  • 我的收藏
  • 我的关注
  • 我的文章
  • 消息入口

结合当前登录策略文档，这一阶段在移动端的重点不是重新造一套注册体系，而是把微信小程序登录、绑定已有账号、资料编辑、消息回访和内容回访都串起来。

对应页面和目录已经完整落地

用户资产闭环链路

下图展示了小程序“用户资产”各功能模块之间的完整闭环关系：

#mermaid-svg-GLiRsXKACLTxGGAp{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-GLiRsXKACLTxGGAp .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-GLiRsXKACLTxGGAp .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-GLiRsXKACLTxGGAp .error-icon{fill:#552222;}#mermaid-svg-GLiRsXKACLTxGGAp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-GLiRsXKACLTxGGAp .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-GLiRsXKACLTxGGAp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-GLiRsXKACLTxGGAp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-GLiRsXKACLTxGGAp .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-GLiRsXKACLTxGGAp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-GLiRsXKACLTxGGAp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-GLiRsXKACLTxGGAp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-GLiRsXKACLTxGGAp .marker.cross{stroke:#333333;}#mermaid-svg-GLiRsXKACLTxGGAp svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-GLiRsXKACLTxGGAp p{margin:0;}#mermaid-svg-GLiRsXKACLTxGGAp .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-GLiRsXKACLTxGGAp .cluster-label text{fill:#333;}#mermaid-svg-GLiRsXKACLTxGGAp .cluster-label span{color:#333;}#mermaid-svg-GLiRsXKACLTxGGAp .cluster-label span p{background-color:transparent;}#mermaid-svg-GLiRsXKACLTxGGAp .label text,#mermaid-svg-GLiRsXKACLTxGGAp span{fill:#333;color:#333;}#mermaid-svg-GLiRsXKACLTxGGAp .node rect,#mermaid-svg-GLiRsXKACLTxGGAp .node circle,#mermaid-svg-GLiRsXKACLTxGGAp .node ellipse,#mermaid-svg-GLiRsXKACLTxGGAp .node polygon,#mermaid-svg-GLiRsXKACLTxGGAp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-GLiRsXKACLTxGGAp .rough-node .label text,#mermaid-svg-GLiRsXKACLTxGGAp .node .label text,#mermaid-svg-GLiRsXKACLTxGGAp .image-shape .label,#mermaid-svg-GLiRsXKACLTxGGAp .icon-shape .label{text-anchor:middle;}#mermaid-svg-GLiRsXKACLTxGGAp .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-GLiRsXKACLTxGGAp .rough-node .label,#mermaid-svg-GLiRsXKACLTxGGAp .node .label,#mermaid-svg-GLiRsXKACLTxGGAp .image-shape .label,#mermaid-svg-GLiRsXKACLTxGGAp .icon-shape .label{text-align:center;}#mermaid-svg-GLiRsXKACLTxGGAp .node.clickable{cursor:pointer;}#mermaid-svg-GLiRsXKACLTxGGAp .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-GLiRsXKACLTxGGAp .arrowheadPath{fill:#333333;}#mermaid-svg-GLiRsXKACLTxGGAp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-GLiRsXKACLTxGGAp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-GLiRsXKACLTxGGAp .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-GLiRsXKACLTxGGAp .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-GLiRsXKACLTxGGAp .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-GLiRsXKACLTxGGAp .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-GLiRsXKACLTxGGAp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-GLiRsXKACLTxGGAp .cluster text{fill:#333;}#mermaid-svg-GLiRsXKACLTxGGAp .cluster span{color:#333;}#mermaid-svg-GLiRsXKACLTxGGAp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-GLiRsXKACLTxGGAp .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-GLiRsXKACLTxGGAp rect.text{fill:none;stroke-width:0;}#mermaid-svg-GLiRsXKACLTxGGAp .icon-shape,#mermaid-svg-GLiRsXKACLTxGGAp .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-GLiRsXKACLTxGGAp .icon-shape p,#mermaid-svg-GLiRsXKACLTxGGAp .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-GLiRsXKACLTxGGAp .icon-shape .label rect,#mermaid-svg-GLiRsXKACLTxGGAp .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-GLiRsXKACLTxGGAp .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-GLiRsXKACLTxGGAp .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-GLiRsXKACLTxGGAp :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

我的页

登录/注册

个人资料

我的收藏

我的关注

我的文章

消息中心

微信小程序登录

绑定已有账号

资料编辑

头像上传

偏好设置

文章/说说/树洞筛选

跳转用户主页

草稿/审核/发布管理

消息详情与未读

内容回访

用户留存与活跃

  • 我的页：sourcelin-ui/sourcelin-ui-uniapp/src/pages/mine/mine.vue
  • 登录页：sourcelin-ui/sourcelin-ui-uniapp/src/pages-user/login/login.vue
  • 资料页：sourcelin-ui/sourcelin-ui-uniapp/src/pages-user/profile/profile.vue
  • 收藏页：sourcelin-ui/sourcelin-ui-uniapp/src/pages-user/collects/collects.vue
  • 关注/粉丝页：sourcelin-ui/sourcelin-ui-uniapp/src/pages-user/follows/follows.vue
  • 我的文章：sourcelin-ui/sourcelin-ui-uniapp/src/pages-user/articles/articles.vue
  • 体验设置：sourcelin-ui/sourcelin-ui-uniapp/src/pages-user/settings/settings.vue
  • 消息中心与详情：sourcelin-ui/sourcelin-ui-uniapp/src/pages-messages/index/index.vue、src/pages-messages/detail/detail.vue
  • 认证与用户 API：src/shared/api/auth.api.ts、src/modules/user/api/user.api.ts

这说明“我的”页已经不是入口占位，而是完整承接一组用户资产子页面。

登录闭环不是一个按钮，而是两条主路径

下图清晰地展示了小程序登录的两条关键路径及其后续的用户资产访问流程：

用户资产页面

服务端

认证API

我的页

用户

用户资产页面

服务端

认证API

我的页

用户

#mermaid-svg-8mXHDSjMymwfwIxN{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-8mXHDSjMymwfwIxN .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-8mXHDSjMymwfwIxN .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-8mXHDSjMymwfwIxN .error-icon{fill:#552222;}#mermaid-svg-8mXHDSjMymwfwIxN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8mXHDSjMymwfwIxN .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-8mXHDSjMymwfwIxN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8mXHDSjMymwfwIxN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8mXHDSjMymwfwIxN .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-8mXHDSjMymwfwIxN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8mXHDSjMymwfwIxN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8mXHDSjMymwfwIxN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8mXHDSjMymwfwIxN .marker.cross{stroke:#333333;}#mermaid-svg-8mXHDSjMymwfwIxN svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8mXHDSjMymwfwIxN p{margin:0;}#mermaid-svg-8mXHDSjMymwfwIxN .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8mXHDSjMymwfwIxN text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-8mXHDSjMymwfwIxN .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-8mXHDSjMymwfwIxN .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-8mXHDSjMymwfwIxN .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-8mXHDSjMymwfwIxN .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-8mXHDSjMymwfwIxN #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-8mXHDSjMymwfwIxN .sequenceNumber{fill:white;}#mermaid-svg-8mXHDSjMymwfwIxN #sequencenumber{fill:#333;}#mermaid-svg-8mXHDSjMymwfwIxN #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-8mXHDSjMymwfwIxN .messageText{fill:#333;stroke:none;}#mermaid-svg-8mXHDSjMymwfwIxN .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8mXHDSjMymwfwIxN .labelText,#mermaid-svg-8mXHDSjMymwfwIxN .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-8mXHDSjMymwfwIxN .loopText,#mermaid-svg-8mXHDSjMymwfwIxN .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-8mXHDSjMymwfwIxN .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-8mXHDSjMymwfwIxN .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-8mXHDSjMymwfwIxN .noteText,#mermaid-svg-8mXHDSjMymwfwIxN .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-8mXHDSjMymwfwIxN .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8mXHDSjMymwfwIxN .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8mXHDSjMymwfwIxN .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8mXHDSjMymwfwIxN .actorPopupMenu{position:absolute;}#mermaid-svg-8mXHDSjMymwfwIxN .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-8mXHDSjMymwfwIxN .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8mXHDSjMymwfwIxN .actor-man circle,#mermaid-svg-8mXHDSjMymwfwIxN line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-8mXHDSjMymwfwIxN :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

alt

[路径1: 微信小程序登录]

[路径2: 绑定已有账号]

形成回访闭环

访问小程序

显示登录选项

获取微信code

POST /auth/wechat/mini/login

返回token与用户信息

登录成功

输入账号密码

POST /auth/wechat/mini/bind

绑定成功并返回token

绑定成功

访问用户资产页面

请求对应数据

返回收藏/关注/文章/消息

展示用户资产

当前我的页已经把两条登录路径做出来了：

export function loginByMiniProgramCode(code: string): Promise<MiniProgramLoginResult> {
return http.post<MiniProgramLoginResult>('/auth/wechat/mini/login', { code }, { isToken: false });
}

export function bindMiniProgramAccount(form: MiniProgramBindForm): Promise<LoginToken> {
return http.post<LoginToken>('/auth/wechat/mini/bind', { … }, { isToken: false });
}

这两条路径分别对应：

  • 直接微信小程序登录
  • 已有账号登录后绑定微信

    • 这一步很关键。因为如果只做账号密码登录，小程序会显得很别扭；如果只做微信一键登录，又会把已有博客用户体系切断。现在的做法是把两条路径都保留，而且都走统一请求层和 loginType=mini。

    资料、头像和偏好设置已经从只读变成可编辑

    资料页现在已经不是只读展示，而是能改昵称、邮箱、手机号、性别、简介，还支持头像上传：

    await updateUserProfile({
    nickName: form.nickName,
    email: form.email,
    phonenumber: form.phonenumber,
    sex: form.sex,
    introduction: form.introduction
    });

    const uploaded = await uploadUserAvatar(filePath);

    与此同时，设置页把夜间阅读、个性化推荐、行为统计也做进来了。这类页面的价值不是“功能多”，而是它让用户资产从“只有一个头像和昵称”变成“能管理自己的使用状态”。

    收藏、关注、我的文章和消息中心已经形成回访入口

    这一阶段最能说明问题的，其实是几个二级页都已经带上了真实筛选和回访路径。

    我的收藏支持按文章、说说、树洞筛选：

    const result = await fetchMyCollects(page.value, pageSize, activeTab.value);

    我的关注和粉丝页可以直接跳用户主页：

    uni.navigateTo({ url: `/pages-user/home/home?id=${targetId}` });

    我的文章支持草稿、审核中、已发布筛选，也能继续编辑或删除未发布稿件：

    const result = await fetchUserArticlePage(
    Number(userStore.userInfo.id),
    page.value,
    pageSize,
    activeTab.value === 'all' ? undefined : activeTab.value
    );

    消息中心也已经从“建设中”变成了真实消息页和消息详情页，并且有未读数与一键已读：

    const [currentUser, unread] = await Promise.all([
    fetchCurrentUserInfo(),
    fetchUnreadMessageCount()
    ]);

    这才是用户资产阶段最重要的部分。用户不是只要“能登录”，而是登录后要能找到自己之前留下来的东西。

    我为什么现在确认这个阶段可以勾选完成

    之前不勾选，主要有两个明确原因：

    • 资料页还偏只读
    • 消息中心还是占位

    这次复核后，这两个关键缺口都已经补掉了，而且还顺手把头像上传、我的文章、体验设置和消息详情都接进来了。按产品文档的验收口径看：

    • 登录态持久化与退出清理已经具备
    • 收藏支持按文章/说说/树洞筛选
    • 关注页已经能承接作者回访
    • 我的页到资料、收藏、关注、文章、消息的入口都完整可达

    所以我会把“用户资产”从未完成调整为已完成，并生成这篇阶段长文。

    效果图我的页与登录弹层

    资料编辑与头像上传

    我会怎么给 AI 下任务

    请先读取 AGENTS.md、rules/frontend-uniapp.md、rules/api-contract.md，
    以及 docs/product/UNIAPP_MINI_PROGRAM_PRODUCT_DESIGN.md 第 5.1 节“用户资产”定义。

    本次只处理用户资产阶段，不扩展到社区扩展、兼容优化或联调验收。

    请重点补齐：
    1. 微信小程序登录与绑定已有账号
    2. 我的页到资料、收藏、关注、文章、消息的跳转
    3. 资料编辑、头像上传、退出登录
    4. 收藏筛选、关注回访、消息未读与详情

    输出时必须说明：
    1. 页面与模块归属
    2. 接口路径与登录策略
    3. 哪些用户资产链路已经闭环
    4. 还剩哪些验证证据

    这类任务里 AI 最容易跑偏的点

    • 只把登录做出来，却不把登录后的收藏、关注、消息承接起来。
    • “我的”页看着很满，但很多入口还是假跳转。
    • 资料页只展示，不做更新与头像上传，结果还是半成品。
    • 登录链路和小程序策略没统一，最后 mini、blog、旧接口混着跑。

    项目入口

    • 在线演示：https://sourcelin.cn
    • Gitee：https://gitee.com/my_lyq/sourcelin-cloud-blog
    • GitHub：https://github.com/SourceLin/sourcelin-cloud-blog
    赞(0)
    未经允许不得转载：171主机测评 » AI实战之小程序-登录消息资料怎么串起来，我这样把用户资产做成回访闭环
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(60634)#python(20463)#开发语言(17121)#java(15699)#运维(15567)#linux(15124)#大数据(14766)#服务器(13223)#算法(11891)#前端(11108)#网络(9520)#ai(9215)#数据库(9039)#c++(8264)#学习(6899)#课程设计(6879)#机器学习(6791)#区块链(5962)#OpenClaw(5398)#后端(5235)#spring boot(5066)#深度学习(5012)#c语言(4412)#毕业设计(4322)#数据结构(4229)#安全(4212)#docker(3968)#架构(3952)#javascript(3857)#大模型(3725)

    热门文章

    最新文章

    归档

    分类