043 — Share Kit 系统分享面板一键分享月度账单报告简介社交分享是现代应用不可或缺的功能它帮助产品通过用户口碑获得自然增长。MoneyTrack 通过 Share Kit 调用系统级分享面板支持将月度账单报告以文本或图片的形式一键分享到微信、微博等社交平台。ShareUtil 封装了shareText和shareMonthlyReport两个核心方法使分享能力可以被任意页面轻松复用同时自动获取 UIAbilityContext确保分享面板的正确启动。ShareContent 完整属性分享内容通过ShareContent对象构建支持多种数据类型组合属性类型必填说明typeShareType是分享类型TEXT / IMAGE / FILE / MULTIPLEtextstring否分享的文本内容支持纯文本或图文搭配中的文字uristring否单文件/图片的 URI 路径urisArraystring否多文件分享时的 URI 数组type 为 MULTIPLE 时使用htmlstring否HTML 富文本内容适用于邮件或支持 HTML 渲染的应用wantWant否指定目标应用的 Want 对象用于定向分享abilityNamestring否仅在前台 Share Kit 接口中使用指定目标 abilityimport{share}fromkit.ShareKit;// 富文本分享示例constrichShareContent:share.ShareContent{type:share.ShareType.TEXT,text:本月账单报告已生成,html:h2三月账单报告/h2p总收入¥12,000/pp总支出¥3,560/p};// 定向分享到特定应用constdirectShareContent:share.ShareContent{type:share.ShareType.IMAGE,uri:file://data/storage/el2/base/haps/entry/files/report.png,text:来看看我的月度账单,want:{bundleName:com.example.targetapp,abilityName:ReceiveAbility}};分享结果回调分享操作完成后系统会通过回调告知应用分享结果开发者可以据此给用户不同的反馈import{share}fromkit.ShareKit;import{BusinessError}fromkit.BasicServicesKit;asyncfunctionshareWithCallback(text:string){constcontextgetContext(this)asUIAbilityContext;constshareContent:share.ShareContent{type:share.ShareType.TEXT,text:text};try{constresultawaitshare.share(context,shareContent);if(result.resultshare.ShareResult.SUCCESS){// 分享成功可弹出 toast 提示console.info(Share success:,result.targetBundleName);}elseif(result.resultshare.ShareResult.CANCEL){// 用户取消分享console.info(Share cancelled by user);}elseif(result.resultshare.ShareResult.FAIL){// 分享失败可引导用户重试console.error(Share failed:,result.errorMessage);}}catch(error){leterrerrorasBusinessError;console.error(Share exception:,err.code,err.message);}}分享截图实现分享图表时通常需要将页面内容如月度趋势图截取为图片再通过 Share Kit 分享。captureChart可通过componentSnapshot能力截取指定组件import{componentSnapshot}fromkit.ArkUI;EntryComponentstruct StatisticsView{StatechartImageUri:string;privatechartComponent:stringchartArea;asynccaptureChart():Promisestring{try{// 获取图表组件的 snapshotconstsnapshotawaitcomponentSnapshot.get(this.chartComponent);// 保存为图片文件constfileUriawaitthis.saveSnapshotToFile(snapshot);this.chartImageUrifileUri;returnfileUri;}catch(error){console.error(Capture chart failed:,error);return;}}asyncsaveSnapshotToFile(snapshot:image.PixelMap):Promisestring{constcontextgetContext(this);constfilePathcontext.filesDir/share_report_Date.now().png;constfileawaitfs.open(filePath,fs.OpenMode.CREATE|fs.OpenMode.WRITE_ONLY);constpackerimage.createImagePacker();constpackedDataawaitpacker.packing(snapshot,{format:image/png,quality:90});awaitfs.write(file.fd,packedData);awaitfs.close(file);returnfilePath;}}分享流程目标应用系统分享面板Share KitMoneyTrack用户目标应用系统分享面板Share KitMoneyTrack用户点击分享报告按钮captureChart() 截取图表构建 ShareContent 对象share(context, shareContent)拉起系统分享面板显示可选应用列表选择目标应用如微信传递分享内容返回接收结果回调分享结果返回 ShareResult展示成功/失败提示Share Kit 与社交媒体 SDK 的对比对比维度Share Kit 系统分享各平台 SDK 直连集成复杂度低无需引入三方 SDK高需逐一接入各平台 SDK包体积影响无额外体积占用显著增加约 2-5MB 每家覆盖终端系统所有支持分享的应用仅已集成 SDK 的平台分享可控性中等无法自定义分享面板样式高可完全自定义 UI 和交互分享结果回调支持成功/取消/失败支持更细粒度回调合规维护无额外合规成本需跟随各平台 SDK 更新和隐私政策适用场景通用分享需求快捷集成深度社交分享需定制化交互最佳实践优先使用系统分享对于通用分享场景系统分享面板覆盖广、集成快、维护成本低是首选方案。大图片先压缩再分享分享的图片应控制在 1MB 以内过大的图片不仅影响分享速度还可能被目标应用拒绝接收。提供 fallback 文本分享图片时应同时附带文本描述部分应用如微信朋友圈可能只展示文本不展示图片。异步处理截图componentSnapshot是异步操作需在截图完成后调用分享避免分享空白内容。分享失败引导重试当分享结果返回 FAIL 时可提示用户检查目标应用是否正常或稍后重试。保护用户隐私分享内容中不应包含敏感个人信息如手机号、银行卡号如需分享需做脱敏处理。项目代码案例文件路径lib_share/ShareUtil.etsimport{share}fromkit.ShareKit;import{UIAbilityContext}fromkit.AbilityKit;exportclassShareUtil{staticasyncshareText(text:string){constcontextgetContext(this)asUIAbilityContext;constshareContent:share.ShareContent{type:share.ShareType.TEXT,text:text};constresultawaitshare.share(context,shareContent);returnresult.result;}staticasyncshareMonthlyReport(month:string,imageUri:string){constcontextgetContext(this)asUIAbilityContext;constshareContent:share.ShareContent{type:share.ShareType.IMAGE,uri:imageUri,text:我本月${month}的账单报告来看看吧};returnawaitshare.share(context,shareContent);}staticasyncshareRichReport(month:string,imageUri:string,summary:string){constcontextgetContext(this)asUIAbilityContext;constshareContent:share.ShareContent{type:share.ShareType.MULTIPLE,text:summary,uris:[imageUri],html:h2${month}账单报告/h2p${summary}/p};returnawaitshare.share(context,shareContent);}}推荐参考文档Share Kit 分享服务指南ShareContent API 参考系统分享面板 API 参考