当前位置：首页 > news >正文

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

news 2026/6/15 11:17:33

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

📌 模块概述

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

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

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

🔗 完整流程

第一步：分享链接生成

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

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

第二步：分享方式选择

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

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

第三步：推荐与统计

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

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

🔧 Web代码实现

分享功能实现

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原生代码

分享实现

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);}}