鸿蒙学习实战之路-Share Kit系列(15/17)-手机与PC/2in1设备间分享

鸿蒙学习实战之路-Share Kit系列(15/17)-手机与PC/2in1设备间分享最近好多朋友问我“西兰花啊我想实现手机与PC/2in1设备间分享功能但不知道代码怎么写” 害这问题可问对人了今天这篇我就手把手带你实现手机与PC/2in1设备间分享功能从零到一全程不超过 10 分钟不含调试时间手机与PC/2in1设备间分享是啥手机与PC/2in1设备间分享就是跨设备分享内容。比如你在手机上看到一张好照片想分享到电脑上查看你在电脑上看到一篇文章想分享到手机上阅读这就像前端的跨设备同步只不过 Share Kit 是系统级别的服务体验更统一。需要申请权限吗是的手机与PC/2in1设备间分享需要申请ohos.permission.DISTRIBUTED_DATASYNC权限。配置权限在module.json5中声明权限{module:{requestPermissions:[{name:ohos.permission.DISTRIBUTED_DATASYNC}]}}西兰花警告我有个朋友忘记申请权限结果跨设备分享一直不成功debug 了两小时才发现是权限问题血泪教训啊朋友们完整实现步骤实现手机与PC/2in1设备间分享就三步申请权限在module.json5中声明权限获取设备列表使用deviceManager模块获取设备列表分享到指定设备使用systemShare模块分享到指定设备步骤 1申请权限在module.json5中声明ohos.permission.DISTRIBUTED_DATASYNC权限。{module:{requestPermissions:[{name:ohos.permission.DISTRIBUTED_DATASYNC}]}}步骤 2获取设备列表使用deviceManager模块获取设备列表。import{deviceManager}fromkit.DistributedDeviceKit;// 获取设备列表deviceManager.getTrustedDeviceList((err,data){if(err){console.error(获取设备列表失败${err});return;}console.log(设备列表${data});});步骤 3分享到指定设备使用systemShare模块分享到指定设备。import{common}fromkit.AbilityKit;import{systemShare}fromkit.ShareKit;// 分享到指定设备functionshareToDevice(deviceId:string){// 构造分享数据letshareData:systemShare.SharedDatanewsystemShare.SharedData({utd:general.text,uri:file://.../xxx.txt,title:跨设备分享,description:这是一段跨设备分享文本});// 构建分享控制器letcontroller:systemShare.ShareControllernewsystemShare.ShareController(shareData);// 显示分享面板letuiContext:UIContextthis.getUIContext();letcontext:common.UIAbilityContextuiContext.getHostContext()ascommon.UIAbilityContext;controller.show(context,{previewMode:systemShare.SharePreviewMode.DEFAULT,selectionMode:systemShare.SelectionMode.SINGLE,targetDeviceId:deviceId});}完整代码示例把上面的步骤整合起来就是一个完整的手机与PC/2in1设备间分享的实现import{common}fromkit.AbilityKit;import{systemShare}fromkit.ShareKit;import{deviceManager}fromkit.DistributedDeviceKit;EntryComponentstruct CrossDeviceSharePage{// 分享文本shareText:string这是一段跨设备分享文本;// 设备列表deviceList:Array{deviceId:string,deviceName:string}[];aboutToAppear(){// 获取设备列表this.getDeviceList();}// 获取设备列表getDeviceList(){deviceManager.getTrustedDeviceList((err,data){if(err){console.error(获取设备列表失败${err});return;}this.deviceListdata.map(device{return{deviceId:device.deviceId,deviceName:device.deviceName};});});}// 分享到指定设备shareToDevice(deviceId:string){// 构造分享数据letshareData:systemShare.SharedDatanewsystemShare.SharedData({utd:general.text,uri:file://.../xxx.txt,title:跨设备分享,description:this.shareText});// 构建分享控制器letcontroller:systemShare.ShareControllernewsystemShare.ShareController(shareData);// 显示分享面板letuiContext:UIContextthis.getUIContext();letcontext:common.UIAbilityContextuiContext.getHostContext()ascommon.UIAbilityContext;controller.show(context,{previewMode:systemShare.SharePreviewMode.DEFAULT,selectionMode:systemShare.SelectionMode.SINGLE,targetDeviceId:deviceId});}build(){Column(){Text(跨设备分享示例).fontSize(20).fontWeight(FontWeight.Bold).margin(20).fontColor(Color.Black);Text(this.shareText).fontSize(16).margin({left:20,right:20,bottom:20}).fontColor(Color.Gray);if(this.deviceList.length0){Text(选择设备).fontSize(16).margin(20).fontColor(Color.Black);ForEach(this.deviceList,(device:{deviceId:string,deviceName:string}){Button(device.deviceName).onClick((){this.shareToDevice(device.deviceId);}).margin(10);});}else{Text(暂无可用设备).fontSize(16).margin(20).fontColor(Color.Gray);}}.width(100%).height(100%);}}在实际项目中怎么用上面的代码是基础实现但在实际项目中你可能会这样用示例跨设备分享图片import{common}fromkit.AbilityKit;import{systemShare}fromkit.ShareKit;import{deviceManager}fromkit.DistributedDeviceKit;EntryComponentstruct CrossDeviceImageSharePage{// 分享图片shareImage:stringfile://.../xxx.jpg;// 设备列表deviceList:Array{deviceId:string,deviceName:string}[];aboutToAppear(){// 获取设备列表this.getDeviceList();}// 获取设备列表getDeviceList(){deviceManager.getTrustedDeviceList((err,data){if(err){console.error(获取设备列表失败${err});return;}this.deviceListdata.map(device{return{deviceId:device.deviceId,deviceName:device.deviceName};});});}// 分享到指定设备shareToDevice(deviceId:string){// 构造分享数据letshareData:systemShare.SharedDatanewsystemShare.SharedData({utd:general.image,uri:this.shareImage,title:跨设备分享图片,preview:this.shareImage,description:这是一张跨设备分享的图片});// 构建分享控制器letcontroller:systemShare.ShareControllernewsystemShare.ShareController(shareData);// 显示分享面板letuiContext:UIContextthis.getUIContext();letcontext:common.UIAbilityContextuiContext.getHostContext()ascommon.UIAbilityContext;controller.show(context,{previewMode:systemShare.SharePreviewMode.DEFAULT,selectionMode:systemShare.SelectionMode.SINGLE,targetDeviceId:deviceId});}build(){Column(){Text(跨设备分享图片示例).fontSize(20).fontWeight(FontWeight.Bold).margin(20).fontColor(Color.Black);Image(this.shareImage).width(200).height(200).margin(20);if(this.deviceList.length0){Text(选择设备).fontSize(16).margin(20).fontColor(Color.Black);ForEach(this.deviceList,(device:{deviceId:string,deviceName:string}){Button(device.deviceName).onClick((){this.shareToDevice(device.deviceId);}).margin(10);});}else{Text(暂无可用设备).fontSize(16).margin(20).fontColor(Color.Gray);}}.width(100%).height(100%);}}常见问题Q1跨设备分享不成功怎么办检查以下几点是否申请了权限确认是否在 module.json5 中声明了ohos.permission.DISTRIBUTED_DATASYNC权限确认用户是否授权了该权限设备是否在同一网络确认手机和PC/2in1设备是否在同一网络确认设备是否支持跨设备分享设备是否已信任确认设备是否已添加到信任设备列表确认设备是否在线Q2如何添加设备到信任列表在设备的设置中找到分布式设备管理添加设备到信任列表。Q3如何判断设备是否支持跨设备分享可以通过deviceManager.getTrustedDeviceList获取设备列表然后检查设备类型deviceManager.getTrustedDeviceList((err,data){if(err){console.error(获取设备列表失败${err});return;}data.forEach(device{if(device.deviceTypePC||device.deviceType2IN1){console.log(支持跨设备分享的设备${device.deviceName});}});});下一步学什么看完这篇你应该已经能实现手机与PC/2in1设备间分享了。接下来可以深入学习隔空传送与可信任设备隔空传送的实现常见问题分享失败、数据类型不支持等问题的解决方案推荐资料官方文档跨设备分享分布式设备管理Share Kit API 参考我是盐焗西兰花不教理论只给你能跑的代码和避坑指南。下期见