更新记录

1（2025-11-26）

• 盲盒创建：支持文本、图片、语音、视频等内容，配置触发条件与可见范围，页面 pages/create/create.vue
• 盲盒开启：在满足触发条件时打开盲盒查看内容，页面 pages/open/open.vue
• 地图记忆：按照地理位置展示可见盲盒与开启范围，页面 pages/map-memory/index.vue
• 消息中心：系统消息与业务通知聚合，页面 pages/message/index.vue
• 即时通讯：基于 uni-im 的私聊与会话列表，页面 pages/chat/chat.vue、uni_modules/uni-im/pages/chat/chat
• 社交与广场：浏览公开内容与动态，页面 pages/social/social.vue、pages/square/square.vue
• 亲密空间：面向小圈层的空间管理与互动，页面 pages/space/space.vue
• 公开空间目录：浏览与申请加入公开空间，页面 pages/space-directory/space-directory.vue
• 邀请与成员管理：邀请成员加入空间或互动，页面 pages/invite/invite.vue
• 空间设置：空间基础信息与权限配置，页面 pages/space-settings/space-settings.vue
• 个人主页与关系：主页展示与关注/粉丝管理，页面 pages/profile/profile.vue、pages/profile/followers.vue、pages/profile/following.vue
• 通知聚合视图：多源消息统一查看，页面 pages/notification/aggregate.vue
• 纪念卡片：生成和查看纪念卡片，页面 pages/card/card.vue
• 活动：活动详情、报名与参与，页面 pages/activity/index.vue、pages/activity/detail.vue、pages/activity/participation.vue
• 话题详情：围绕话题的内容聚合，页面 `pages/topic-detail/top

平台兼容性

云端兼容性

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

MemoBox 项目说明

功能说明

• 盲盒创建：支持文本、图片、语音、视频等内容，配置触发条件与可见范围，页面 pages/create/create.vue
• 盲盒开启：在满足触发条件时打开盲盒查看内容，页面 pages/open/open.vue
• 地图记忆：按照地理位置展示可见盲盒与开启范围，页面 pages/map-memory/index.vue
• 消息中心：系统消息与业务通知聚合，页面 pages/message/index.vue
• 即时通讯：基于 uni-im 的私聊与会话列表，页面 pages/chat/chat.vue、uni_modules/uni-im/pages/chat/chat
• 社交与广场：浏览公开内容与动态，页面 pages/social/social.vue、pages/square/square.vue
• 亲密空间：面向小圈层的空间管理与互动，页面 pages/space/space.vue
• 公开空间目录：浏览与申请加入公开空间，页面 pages/space-directory/space-directory.vue
• 邀请与成员管理：邀请成员加入空间或互动，页面 pages/invite/invite.vue
• 空间设置：空间基础信息与权限配置，页面 pages/space-settings/space-settings.vue
• 个人主页与关系：主页展示与关注/粉丝管理，页面 pages/profile/profile.vue、pages/profile/followers.vue、pages/profile/following.vue
• 通知聚合视图：多源消息统一查看，页面 pages/notification/aggregate.vue
• 纪念卡片：生成和查看纪念卡片，页面 pages/card/card.vue
• 活动：活动详情、报名与参与，页面 pages/activity/index.vue、pages/activity/detail.vue、pages/activity/participation.vue
• 话题详情：围绕话题的内容聚合，页面 pages/topic-detail/topic-detail.vue

页面截图

项目简介

MemoBox 是基于 uni-app 与 Vue3 构建的跨平台应用，支持微信小程序、App、H5 等多端运行，核心功能包含记忆盲盒、地图记忆、社交空间与即时通讯（IM）。

技术栈

• 框架：Vue 3、uni-app
• 云端：uniCloud（阿里云）
• 即时通讯：uni-im

必须手动配置

1. uniCloud 云服务

• 配置 manifest.json 中的 uniCloud 信息（provider、spaceName、spaceId、clientSecret）。
• 部署服务端对象/云函数：项目使用 uni-im 云对象与用户管理云函数（如 user-manager）。请在 uniCloud 控制台创建并部署对应服务。
• 客户端调用会自动附带 uni_id_token，逻辑位于 App.vue 的云函数拦截器。

2. 微信小程序参数

• 配置 manifest.json 的 mp-weixin.appid 与 oauth.appid/appsecret。
• 权限声明：scope.userLocation、requiredPrivateInfos、requiredBackgroundModes 已在 manifest.json 设置，按业务需要调整。
• 生产环境下 WebSocket 必须使用 wss://，详见下方 IM 配置。

3. 登录与协议页面

• uni_modules/uni-id-pages/config.js 中更新政策协议地址：agreements.serviceUrl、agreements.privacyUrl 指向你的域名。
• 按业务选择登录方式（微信、用户名密码、短信验证码等），通过条件编译和 loginTypes 控制展示。

4. IM 与 WebSocket 配置

• uni-im 初始化在 App.vue 与 utils/uni-im-helper.js 中完成。
• 按环境设置 WebSocket 地址：在应用初始化阶段写入 WS_URL，示例：
  • 开发：ws://localhost:3000/ws
  • 生产：wss://your-domain.com/ws
• 微信小程序场景需强制使用 wss://，并附带认证参数。

5. 请求根地址与网络拦截

• libs/request/index.js 的 baseUrl 需设置为你的后端根地址。
• 拦截器会在调用 uniCloud 时自动附加 uni_id_token，认证失败会跳转登录页。

6. 页面与 TabBar 资源

• pages.json 配置了主页面与 TabBar，请确保图标在 static/tabbar/ 目录存在且命名一致。
• 法务页面位于 static/legal/privacy.html 与 static/legal/service.html，配合 uni-id-pages 的政策协议展示。

7. 构建平台与静态化插件

• 构建平台由脚本参数控制（如 mp-weixin、h5）。
• 自定义静态化插件仅在小程序平台生效（依据 UNI_PLATFORM 判断），用于将 <component :is="..."> 的动态组件静态化以提升稳定性与性能。

目录要点

• 应用入口：App.vue
• 路由与页面：pages/，主路由配置在 pages.json
• 组件：components/
• 业务服务：libs/service/（MapService.js、LocationService.js）
• 工具与通用方法：libs/function/、utils/
• 样式与主题：libs/css/、uni.scss
• uniCloud 相关：uniCloud-aliyun/
• 第三方模块：uni_modules/

安全与合规

• 不要在代码仓库中提交真实的 appid、appsecret、clientSecret 等敏感信息。
• 生产环境统一使用 HTTPS/WSS，定期更新并校验 Token，有效期过期后及时重新登录。

使用的插件与模块

• 构建插件：
  • @dcloudio/vite-plugin-uni（Vite 集成 uni-app）
  • @vitejs/plugin-vue
  • 本地插件：rollup-plugin-uniapp-cementing.js（动态组件静态化，仅小程序平台）
• 功能模块：
  • uni-im（即时通讯与会话页面）
  • uni-id-pages（统一账号体系与登录注册）
  • uni-ui 组件库（如 uni-icons、uni-forms、uni-popup、uni-badge、uni-card、uni-grid、uni-table 等）
• 前端依赖：
  • vue、vue-i18n