一、功能设计
- 图文混排发布
- 前端交互（UniApp）
- 富文本编辑器：集成第三方插件（如u-parse或自定义编辑器），支持：
- 插入多张图片（本地选择/拍照上传）。
- 调整图片位置（拖拽排序）。
- 无序列表文字格式（加粗、斜体、超链接）。
- 无序列表预览功能：发布前展示图文混排效果，支持手动调整布局。
- 富文本编辑器：集成第三方插件（如u-parse或自定义编辑器），支持：
- 后端处理（PHP）
- 内容解析：接收前端提交的HTML或JSON格式的富文本数据，过滤非法标签。
- 图片存储：
- 图片上传至OSS（阿里云/腾讯云）或本地服务器，生成CDN地址。
- 记录图片与动态的关联关系（数据库表设计见下文）。
- 视频上传与播放
-
前端交互（UniApp）
- 视频录制/选择：调用设备相机或相册，支持多段视频拼接（需原生插件支持）。
- 上传进度：显示上传百分比，支持断点续传（通过uni.uploadFile实现）
-
无序列表后端处理（PHP）
- 视频转码：通过FFmpeg生成缩略图和低分辨率版本（提升加载速度）。
- 存储优化：
- 视频文件分片存储（避免大文件传输失败）。
- 记录视频元数据（时长、分辨率、封面图）。
点击获取圈子系统演示详情！！！
二、技术实现
- 图文混排上传（PHP后端）
// 接收富文本内容并解析图片
public function submitPost() {
$userId = $_POST['user_id'];
$content = $_POST['content']; // 包含HTML和图片临时路径
// 解析图片并上传至CDN
$dom = new DOMDocument();
@$dom->loadHTML($content);
$images = $dom->getElementsByTagName('img');
$mediaUrls = [];
foreach ($images as $img) {
$tmpPath = $img->getAttribute('src'); // 临时路径（base64或本地路径）
$cdnUrl = $this->uploadToCDN($tmpPath); // 上传至CDN
$mediaUrls[] = $cdnUrl;
$img->setAttribute('src', $cdnUrl); // 替换为CDN地址
}
// 保存动态内容
$finalHtml = $dom->saveHTML();
$this->db->query("INSERT INTO posts (user_id, content, media_type, media_urls)
VALUES ($userId, '$finalHtml', 1, '".json_encode($mediaUrls)."')");
}
- 视频上传（UniApp前端）
// 选择视频并上传
uni.chooseVideo({
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePath = res.tempFilePath;
uni.uploadFile({
url: 'https://api.example.com/upload/video',
filePath: tempFilePath,
name: 'video',
formData: { userId: 123 },
success: (uploadRes) => {
const data = JSON.parse(uploadRes.data);
this.mediaUrls.push(data.url); // 记录视频地址
}
});
}
});
三、多端同步策略
- 数据同步
- 实时推送：通过WebSocket或UniApp的uni.onSocketMessage实现动态发布后的即时推送。
- 离线缓存：使用UniApp的uni.setStorageSync缓存未同步数据，网络恢复后自动重试。
- 跨平台适配
- 图片显示：H5端使用，小程序端使用，通过条件编译统一处理。
视频播放：
- 图片显示：H5端使用，小程序端使用，通过条件编译统一处理。
<video :src="videoUrl" controls v-if="mediaType === 2"></video>
