更新记录
1.0.1(2026-08-11) 下载此版本
无
平台兼容性
云端兼容性
| 阿里云 | 腾讯云 | 支付宝云 |
|---|---|---|
| √ | × | × |
uni-app(5.22)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| - | √ | √ | - | √ | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| √ | - | - | - | - | - | - | - | - | - | - | - |
云函数类插件通用教程
使用云函数类插件的前提是:使用HBuilderX 2.9+
戏钓山河 — 钓友社区(uniCloud 云端一体项目模板)
项目简介
戏钓山河是一款基于 uni-app + uniCloud + VK-unicloud-router 开发的钓鱼爱好者社区应用。
支持 微信小程序 和 H5 两端运行,涵盖钓点发现与分享、渔获动态发布、装备推荐、天气查询等核心场景,并内置了管理员审核系统和内容安全检测机制。
技术栈
| 层级 | 技术 |
|---|---|
| 前端框架 | uni-app (Vue 3) |
| UI 组件库 | vk-uview-ui(基于 uView 1.8.3 改造,支持 Vue 3) |
| 云开发平台 | uniCloud(阿里云) |
| 后端框架 | VK-unicloud-router(云函数路由 + 云对象路由) |
| 用户体系 | uni-id |
| 地图服务 | 腾讯地图 WebService API |
| 天气服务 | 和风天气 API |
主要功能
钓点地图
- 地图 / 列表双模式切换,基于用户当前位置展示附近钓点
- 地图模式支持左右滑动卡片切换钓点,列表模式支持下拉刷新 + 触底加载
- 按水体类型(淡水/海水/溪流/湖泊/水库)和距离筛选
- 钓点详情:查看钓点信息、鱼种、费用、图片,支持一键导航
- 分享解锁机制:发布者选择需要分享后才能查看时,好友分享后才可查看详细信息
渔获社区
- 发布动态(图文 + 标签 + 钓点位置关联)
- 动态列表(普通动态 / 热门动态)
- 下拉刷新 + 触底加载更多
- 点赞、评论互动
- 动态详情页 + 作者主页跳转
- 内容安全检测(文本 + 图片)
实用工具
- 天气查询:实时天气 + 7 天预报 + 生活指数(基于和风天气 API)
- 渔获记录:记渔获、晒鱼获,支持日历筛选查看
- 装备推荐:管理员后台配置,前端分类展示
个人中心
- 微信一键登录(支持静默登录)
- 个人信息(头像、昵称、简介)编辑
- 我的动态管理(编辑 / 删除)
- 关注 / 粉丝体系
- 用户公共主页(查看他人动态和钓点)
管理员系统
- 管理控制台(首页统计面板)
- 钓点审核(待审核 / 已通过 / 已拒绝,支持通过 / 拒绝 / 删除)
- 内容管理(帖子列表 + 热门管理 + 上下架)
- 社区发布开关(关闭后前端不再显示发布入口和社区动态)
- 装备推荐管理(增删改)
分享积分
- 分享场景识别(单人聊天 / 群聊)
- 去重防刷(同日同来源同动作最多 5 次)
目录结构
├── App.vue # 应用入口
├── main.js # 主入口(挂载 VK、Vuex、全局组件)
├── manifest.json # uni-app 配置(含微信小程序 appid)
├── pages.json # 页面路由 + 导航栏配置
├── app.config.js # VK 框架全局配置
├── uni.scss # 全局样式变量
│
├── common/ # 公共工具
│ ├── tabbar-config.js # 底部导航栏配置(含社区/发布开关)
│ └── *.scss # 公共样式
│
├── components/ # 自定义组件
│
├── store/ # Vuex 状态管理
│ └── index.js # Store 入口
│
├── pages/ # 业务页面
│ ├── tabbar/ # 底部导航栏页面
│ │ ├── community/ # 渔获社区
│ │ ├── map/ # 钓点地图(地图/列表双模式)
│ │ ├── tools/ # 实用工具
│ │ └── profile/ # 个人中心 + 菜单
│ ├── post/ # 发布动态 + 位置选择
│ ├── map/ # 钓点详情
│ ├── profile/ # 用户主页、我的动态、关注/粉丝
│ ├── tools/ # 天气、渔获记录、装备推荐
│ ├── admin/ # 管理员后台
│ │ ├── index/ # 管理首页
│ │ ├── spots/ # 钓点审核
│ │ ├── posts/ # 内容管理
│ │ └── gear/ # 装备管理
│ └── user/ # 登录页
│
├── static/ # 静态资源(图片、图标)
│
├── uni_modules/ # uni_modules 插件(自动加载)
│ ├── vk-unicloud/ # VK-unicloud-router 核心库
│ ├── vk-uview-ui/ # vk-uview-ui 组件库(Vue 3 版)
│ ├── uni-config-center/ # uni-id / VK 框架配置中心
│ └── ... # 其他 uni_modules 插件
│
├── uniCloud-aliyun/ # uniCloud 阿里云服务空间
│ ├── cloudfunctions/ # 云函数
│ │ └── router/ # 云函数路由入口
│ │ ├── index.js # 路由入口文件
│ │ ├── config.js # 路由配置
│ │ ├── dao/ # 数据库 DAO 层
│ │ ├── middleware/ # 中间件(鉴权、权限、日志等)
│ │ └── service/ # 业务云函数
│ │ └── client/ # 客户端业务
│ │ ├── admin/ # 管理员(sys)
│ │ ├── posts/ # 动态(kh/pub)
│ │ ├── comments/ # 评论(kh/pub)
│ │ ├── user/ # 用户(kh/pub)
│ │ ├── fishing-spots/ # 钓点(kh/pub)
│ │ ├── location/ # 位置服务(pub)
│ │ ├── config/ # 配置(pub)
│ │ ├── follows/ # 关注(kh)
│ │ ├── points/ # 积分(kh/pub)
│ │ ├── catches/ # 渔获记录(kh)
│ │ └── gear/ # 装备(kh/pub)
│ └── database/ # 数据库 Schema 定义
│ ├── dy-posts.schema.json # 动态表
│ ├── dy-comments.schema.json # 评论表
│ ├── dy-fishing-spots.schema.json # 钓点表
│ ├── dy-follows.schema.json # 关注关系表
│ ├── dy-catches.schema.json # 渔获记录表
│ ├── dy-gear.schema.json # 装备推荐表
│ ├── dy-points-rules.schema.json # 积分规则表
│ ├── dy-points-records.schema.json # 积分记录表
│ ├── dy-spot-unlocks.schema.json # 钓点解锁记录表
│ ├── dy-config.schema.json # 配置表(社区开关等)
│ └── db_init.json # 数据库初始化配置
│
└── 使用帮助/ # 帮助文档
├── 插件使用说明.md # 本文件
└── ...
配置方法
1. 腾讯地图 Key
1.1 云函数端(必需 — 逆地址解析、附近地点搜索)
文件位置:uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/vk-unicloud/index.js
"service": {
"openapi": {
"tencentMap": {
"key": "你的腾讯地图WebService API Key"
}
}
}
申请地址:https://lbs.qq.com/console/key.html
1.2 前端(仅在微信小程序端使用地图组件时可选)
文件位置:manifest.json
"mp-weixin": {
"appid": "你的小程序AppID",
"setting": {
"urlCheck": false
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于钓点地图展示"
}
}
}
说明:uni-app 的 map 组件在小程序端会使用微信内置地图,无需单独配置 key。如果 H5 端使用 map 组件,需要在
manifest.json的h5节点配置腾讯地图 key。
2. 微信小程序 AppID 和密钥
2.1 小程序 AppID
文件位置:manifest.json → mp-weixin.appid
"mp-weixin": {
"appid": "wx你的小程序AppID"
}
2.2 小程序密钥(云函数端)
文件位置:uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/vk-unicloud/index.js
"vk": {
"oauth": {
"weixin": {
"list": [
{ "appid": "wx你的小程序AppID", "appsecret": "你的小程序AppSecret" }
]
}
}
}
2.3 uni-id 配置
文件位置:uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json
{
"passwordSecret": "你的密码加密密钥",
"tokenSecret": "你的token加密密钥",
"tokenExpiresIn": 7200,
"tokenExpiresThreshold": 600,
"mp-weixin": {
"oauth": {
"weixin": {
"appid": "wx你的小程序AppID",
"appsecret": "你的小程序AppSecret"
}
}
}
}
passwordSecret和tokenSecret请替换为自定义的随机字符串。
3. 和风天气 Key(可选)
文件位置:uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/vk-unicloud/index.js
"service": {
"openapi": {
"qweather": {
"key": "你的和风天气API Key"
}
}
}
申请地址:https://dev.qweather.com/(免费开发版 1000 次/天)
4. 微信小程序服务器域名白名单
在微信公众平台 → 开发管理 → 开发设置 → 服务器域名中配置:
| 类型 | 域名 |
|---|---|
| request 合法域名 | https://api.bspapp.com |
| uploadFile 合法域名 | https://api.bspapp.com |
| downloadFile 合法域名 | https://api.bspapp.com |
快速开始
- 使用 HBuilderX 导入本项目
- 在 uniCloud 目录右键选择关联服务空间
- 按上方配置方法填写地图 Key、微信小程序 AppID/密钥
- 右键
uniCloud-aliyun/database→ 上传所有 DB Schema - 右键
uniCloud-aliyun/cloudfunctions/router→ 上传部署 - 运行到微信小程序或 H5 进行调试
许可协议
本项目代码采用 MIT 协议 开源。
项目所依赖的第三方库协议:
- VK-unicloud-router:MIT 协议
- vk-uview-ui:基于 uView 1.8.3(MIT 协议),由 VK 改造并无条件开源
联系方式
如有问题或建议,欢迎提 Issue 或在 DCloud 插件市场评论区留言。

收藏人数:
下载插件并导入HBuilderX
赞赏(0)
下载 0
赞赏 0
下载 34912
赞赏 159
赞赏
京公网安备:11010802035340号