欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。
分享功能系统概述
分享功能允许用户与他人分享他们的植物信息和养护经验。在Cordova框架与OpenHarmony系统的结合下，我们需要实现一个完整的分享系统，包括分享内容生成、社交媒体集成和分享统计。
分享内容数据模型
javascript
class ShareContent {
constructor(plantId, shareType) {
this.id = 'share_' + Date.now();
this.plantId = plantId;
this.shareType = shareType; // 'basic', 'detailed', 'photo', 'stats'
this.createdDate = new Date();
this.content = '';
this.imageUrl = null;
this.shareLinks = {};
}
}
class ShareManager {
constructor() {
this.shares = [];
this.loadFromStorage();
}
generateShareContent(plantId, shareType) {
const plant = plants.find(p => p.id === plantId);
if (!plant) return null;
const share = new ShareContent(plantId, shareType);
if (shareType === 'basic') {
share.content = `我在养护一株${plant.name}（${plant.species}），位置在${plant.location}。`;
} else if (shareType === 'detailed') {
const stats = new PlantHealthReport(plantId).generateReport();
share.content = `我的${plant.name}健康评分是${stats.overallScore}/100。`;
} else if (shareType === 'photo') {
share.content = `看看我的${plant.name}！`;
} else if (shareType === 'stats') {
const wateringCount = wateringManager.getWateringRecordsForPlant(plantId).length;
share.content = `我已经为${plant.name}浇水${wateringCount}次了。`;
}
this.shares.push(share);
this.saveToStorage();
return share;
}
}这个分享功能数据模型定义了ShareContent和ShareManager类。
与OpenHarmony社交媒体的集成
javascript
function shareToSocialMedia(shareId, platform) {
const share = shareManager.shares.find(s => s.id === shareId);
if (!share) return;
cordova.exec(
function(result) {
console.log("已分享到" + platform);
showToast(`已成功分享到${platform}`);
},
function(error) {
console.error("分享失败:", error);
},
"SocialMediaPlugin",
"share",
[{
platform: platform,
title: '我的植物',
message: share.content,
imageUrl: share.imageUrl
}]
);
}
function generateShareLink(shareId) {
const share = shareManager.shares.find(s => s.id === shareId);
if (!share) return;
cordova.exec(
function(result) {
console.log("分享链接已生成");
share.shareLinks.link = result.link;
showToast('分享链接已复制到剪贴板');
},
function(error) {
console.error("生成失败:", error);
},
"SharePlugin",
"generateLink",
[{
shareId: shareId,
content: share.content
}]
);
}这段代码展示了如何与OpenHarmony的社交媒体服务集成。
分享内容生成
javascript
function renderShareDialog(plantId) {
const plant = plants.find(p => p.id === plantId);
const dialog = document.createElement('div');
dialog.className = 'modal-dialog';
dialog.innerHTML = `
<div class="modal-content">
<h3>分享 ${plant.name}</h3>
<div class="share-options">
<div class="share-option">
<input type="radio" name="share-type" value="basic" checked>
<label>基础信息</label>
</div>
<div class="share-option">
<input type="radio" name="share-type" value="detailed">
<label>详细信息</label>
</div>
<div class="share-option">
<input type="radio" name="share-type" value="photo">
<label>照片分享</label>
</div>
<div class="share-option">
<input type="radio" name="share-type" value="stats">
<label>养护统计</label>
</div>
</div>
<textarea id="share-content" placeholder="编辑分享内容"></textarea>
<div class="share-platforms">
<button onclick="shareToSocialMedia('${plantId}', 'wechat')">微信</button>
<button onclick="shareToSocialMedia('${plantId}', 'qq')">QQ</button>
<button onclick="shareToSocialMedia('${plantId}', 'weibo')">微博</button>
<button onclick="generateShareLink('${plantId}')">生成链接</button>
</div>
<div class="form-actions">
<button onclick="closeDialog()">关闭</button>
</div>
</div>
`;
document.getElementById('modal-container').appendChild(dialog);
// 生成初始内容
const shareType = document.querySelector('input[name="share-type"]:checked').value;
const share = shareManager.generateShareContent(plantId, shareType);
document.getElementById('share-content').value = share.content;
// 监听分享类型变化
document.querySelectorAll('input[name="share-type"]').forEach(radio => {
radio.addEventListener('change', function() {
const newShare = shareManager.generateShareContent(plantId, this.value);
document.getElementById('share-content').value = newShare.content;
});
});
}这个函数创建分享对话框，允许用户选择分享类型和平台。
分享统计
javascript
class ShareStatistics {
constructor() {
this.shareManager = shareManager;
}
getTotalShares() {
return this.shareManager.shares.length;
}
getSharesByType() {
const counts = {
basic: 0,
detailed: 0,
photo: 0,
stats: 0
};
this.shareManager.shares.forEach(share => {
counts[share.shareType]++;
});
return counts;
}
getSharesByPlatform() {
const counts = {};
this.shareManager.shares.forEach(share => {
Object.keys(share.shareLinks).forEach(platform => {
counts[platform] = (counts[platform] || 0) + 1;
});
});
return counts;
}
getMostSharedPlant() {
const plantCounts = {};
this.shareManager.shares.forEach(share => {
plantCounts[share.plantId] = (plantCounts[share.plantId] || 0) + 1;
});
const mostSharedId = Object.keys(plantCounts).reduce((a, b) =>
plantCounts[a] > plantCounts[b] ? a : b
);
return plants.find(p => p.id === mostSharedId);
}
}这个ShareStatistics类提供了分享的统计功能。
分享历史
javascript
function renderShareHistory() {
const container = document.getElementById('page-container');
container.innerHTML = `
<div class="share-history">
<h2>分享历史</h2>
</div>
`;
if (shareManager.shares.length === 0) {
container.innerHTML += '<p class="empty-message">还没有分享任何内容</p>';
return;
}
const historyList = document.createElement('div');
historyList.className = 'history-list';
shareManager.shares.forEach(share => {
const plant = plants.find(p => p.id === share.plantId);
const historyItem = document.createElement('div');
historyItem.className = 'history-item';
historyItem.innerHTML = `
<h4>${plant.name}</h4>
<p>类型: ${share.shareType}</p>
<p>时间: ${share.createdDate.toLocaleString('zh-CN')}</p>
<p>内容: ${share.content}</p>
`;
historyList.appendChild(historyItem);
});
container.appendChild(historyList);
}这个函数显示分享历史。
总结
分享功能系统为用户提供了与他人分享植物信息的能力。通过与社交媒体的集成，我们可以帮助用户轻松分享他们的植物养护经验。