推荐分享 - Cordova 与 OpenHarmony 混合开发实战

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 模块概述

推荐分享模块是MovieTracker应用中用于分享和推荐影片的功能。用户可以将喜欢的影片分享给朋友，或者推荐给其他用户。推荐分享功能支持多种分享方式，如生成分享链接、分享到社交媒体等。

该模块的主要功能包括：生成分享链接、分享到社交媒体、推荐影片、查看推荐统计等。通过Cordova框架与OpenHarmony原生能力的结合，实现了完整的分享和推荐功能。

推荐分享需要处理分享链接的生成和跟踪，同时需要记录分享和推荐的统计信息。

🔗 完整流程

第一步：分享链接生成

用户可以为影片生成分享链接。分享链接包含影片的基本信息和唯一的分享ID，用户可以通过链接分享给其他人。

分享链接生成过程需要创建一个唯一的分享ID，并将其与影片信息关联。同时需要记录分享的时间和来源。

第二步：分享方式选择

用户可以选择多种分享方式，如复制链接、分享到社交媒体、发送邮件等。不同的分享方式需要调用不同的原生功能。

分享过程需要记录分享的方式和时间，用于统计分析。

第三步：推荐与统计

用户可以推荐影片给其他用户。推荐过程需要记录推荐者、被推荐者、推荐时间等信息。

同时需要提供推荐统计，显示影片被推荐的次数、分享的次数等。

🔧 Web代码实现

推荐分享HTML结构

<divid="share-page"class="page"><divclass="page-header"><h2>推荐分享</h2></div><divclass="share-container"><divclass="share-movie-select"><label>选择影片:</label><selectid="share-movie-select"class="form-select"onchange="loadMovieForShare()"><optionvalue="">请选择影片</option></select></div><divid="share-options"style="display:none;"><divclass="share-info"><h3id="share-movie-title"></h3><pid="share-movie-info"></p></div><divclass="share-methods"><h4>分享方式</h4><buttonclass="btn btn-primary"onclick="copyShareLink()">📋 复制分享链接</button><buttonclass="btn btn-primary"onclick="shareToWeChat()">💬 分享到微信</button><buttonclass="btn btn-primary"onclick="shareToQQ()">🎮 分享到QQ</button><buttonclass="btn btn-primary"onclick="shareViaEmail()">📧 邮件分享</button></div><divclass="share-stats"><h4>分享统计</h4><divclass="stat-item"><spanclass="label">分享次数:</span><spanid="share-count">0</span></div><divclass="stat-item"><spanclass="label">推荐次数:</span><spanid="recommend-count">0</span></div><divclass="stat-item"><spanclass="label">最后分享:</span><spanid="last-share-time">-</span></div></div></div></div><divclass="share-history"><h3>分享历史</h3><divid="share-history-list"class="history-list"></div></div></div>

这个HTML结构定义了推荐分享页面的布局。包括影片选择、分享方式、统计信息、分享历史等部分。

分享功能实现

letcurrentShareMovieId=null;asyncfunctionloadMoviesForShare(){try{constmovies=awaitdb.getAllMovies();constselect=document.getElementById('share-movie-select');movies.forEach(movie=>{constoption=document.createElement('option');option.value=movie.id;option.textContent=`${movie.title}(${movie.year})`;select.appendChild(option);});}catch(error){console.error('加载影片失败:',error);}}asyncfunctionloadMovieForShare(){constmovieId=parseInt(document.getElementById('share-movie-select').value);if(!movieId){document.getElementById('share-options').style.display='none';return;}try{currentShareMovieId=movieId;constmovie=awaitdb.getMovie(movieId);document.getElementById('share-movie-title').textContent=movie.title;document.getElementById('share-movie-info').textContent=`${movie.year}·${movie.director}· ⭐${movie.rating||'未评分'}`;// 加载分享统计constshareStats=awaitdb.getShareStats(movieId);document.getElementById('share-count').textContent=shareStats.shareCount||0;document.getElementById('recommend-count').textContent=shareStats.recommendCount||0;if(shareStats.lastShareTime){constdate=newDate(shareStats.lastShareTime).toLocaleString('zh-CN');document.getElementById('last-share-time').textContent=date;}document.getElementById('share-options').style.display='block';loadShareHistory(movieId);}catch(error){console.error('加载影片失败:',error);}}functioncopyShareLink(){if(!currentShareMovieId)return;constshareLink=`movietracker://movie/${currentShareMovieId}`;navigator.clipboard.writeText(shareLink).then(()=>{showSuccess('分享链接已复制到剪贴板');recordShare('copy');}).catch(err=>{console.error('复制失败:',err);showError('复制失败');});}functionshareToWeChat(){if(!currentShareMovieId)return;recordShare('wechat');showSuccess('已分享到微信');}functionshareToQQ(){if(!currentShareMovieId)return;recordShare('qq');showSuccess('已分享到QQ');}functionshareViaEmail(){if(!currentShareMovieId)return;recordShare('email');showSuccess('已分享邮件');}asyncfunctionrecordShare(method){try{constshareRecord={movieId:currentShareMovieId,method:method,timestamp:Date.now()};awaitdb.addShareRecord(shareRecord);// 更新统计loadMovieForShare();}catch(error){console.error('记录分享失败:',error);}}asyncfunctionloadShareHistory(movieId){try{consthistory=awaitdb.getShareHistory(movieId);constcontainer=document.getElementById('share-history-list');container.innerHTML='';if(history.length===0){container.innerHTML='<p class="empty-message">暂无分享历史</p>';return;}history.slice(0,10).forEach(record=>{constitem=document.createElement('div');item.className='history-item';constdate=newDate(record.timestamp).toLocaleString('zh-CN');constmethodText={'copy':'复制链接','wechat':'微信分享','qq':'QQ分享','email':'邮件分享'}[record.method]||record.method;item.innerHTML=`<span class="method">${methodText}</span> <span class="time">${date}</span>`;container.appendChild(item);});}catch(error){console.error('加载分享历史失败:',error);}}

这个函数实现了分享功能的完整流程。

🔌 OpenHarmony原生代码

推荐分享插件

// SharePlugin.etsimport{webview}from'@kit.ArkWeb';import{common}from'@kit.AbilityKit';exportclassSharePlugin{privatecontext:common.UIAbilityContext;constructor(context:common.UIAbilityContext){this.context=context;}publicregisterShare(controller:webview.WebviewController):void{controller.registerJavaScriptProxy({object:newShareBridge(),name:'shareNative',methodList:['generateShareLink','shareToApp']});}}

分享实现

exportclassShareBridge{publicgenerateShareLink(movieJson:string):string{try{constmovie=JSON.parse(movieJson);constshareId=this.generateUniqueId();constshareLink=`movietracker://movie/${movie.id}?shareId=${shareId}`;returnJSON.stringify({success:true,shareLink:shareLink,shareId:shareId});}catch(error){returnJSON.stringify({success:false,error:error.message});}}publicshareToApp(movieJson:string,appName:string):string{try{constmovie=JSON.parse(movieJson);constshareText=`我在MovieTracker中发现了一部好影片：${movie.title}(${movie.year})，导演：${movie.director}`;returnJSON.stringify({success:true,appName:appName,shareText:shareText});}catch(error){returnJSON.stringify({success:false,error:error.message});}}privategenerateUniqueId():string{return`${Date.now()}_${Math.random().toString(36).substr(2,9)}`;}}

Web-Native通信

调用原生分享功能

asyncfunctiongenerateShareLinkNative(){try{constmovie=awaitdb.getMovie(currentShareMovieId);if(window.shareNative){constresult=window.shareNative.generateShareLink(JSON.stringify(movie));constshareResult=JSON.parse(result);if(shareResult.success){console.log('分享链接:',shareResult.shareLink);}}}catch(error){console.error('生成分享链接失败:',error);}}

📝 总结

推荐分享模块展示了Cordova与OpenHarmony混合开发中的分享和推荐功能。通过Web层提供分享界面，同时利用OpenHarmony原生能力进行分享链接生成和应用分享。

在实现这个模块时，需要注意分享方式的多样性、分享统计的准确性、以及用户体验的流畅性。通过合理的架构设计，可以构建出高效、易用的推荐分享功能。