手把手教你开发鸿蒙碰一碰加好友功能手把手教你开发鸿蒙碰一碰加好友功能告别扫码贴贴就加友● 碰一碰功能介绍● 简单的碰一碰实现● 碰一碰拉起指定应用Deeplink的使用● 碰一碰加好友功能实战碰一碰接收端处理碰一碰发送端处理总结手把手教你开发鸿蒙碰一碰加好友功能告别扫码贴贴就加友还在为加好友扫半天二维码、输一串数字抓狂鸿蒙的“碰一碰”功能直接把加好友简化到“贴贴就行”不用搜、不用输两台手机轻轻一碰好友信息自动飞过去主打一个“近在咫尺一键加友”。今天就手把手带你把这个神仙功能搬进自己的App以喵屿App的碰一碰加宠物好友为例从原理到实战包教包会● 碰一碰功能介绍碰一碰分享本质上是鸿蒙Share Kit的“隐藏彩蛋”支持用户通过设备轻碰发起跨端分享不管是传图片、共享Wi-Fi还是咱今天要搞的加好友都能搞定。更爽的是只要你的应用支持系统分享理论上不用额外魔改就能解锁碰一碰能力简直是懒人开发者的福音流程说明先给自家应用“注册”碰一碰分享事件然后让两部亮屏解锁的手机来个“贴贴”就像朋友握手一样应用发现“贴贴”触发后会调用碰一碰分享回调咱在回调里把要分享的好友数据打包发出去对方手机接住数据乖乖处理事儿办完了记得解除注册别让应用“占着茅坑不拉屎”使用约束划重点不然贴贴也白贴想让俩手机顺利贴贴传好友得满足几个小条件双端设备都得亮屏、解锁总不能黑屏贴贴吧手机也得“醒着”才知道要干活而且华为分享服务得开着系统默认开的除非你手欠手动关了。贴的时候得用手机顶部碰不是随便怼哪里都管用哈如果华为分享关了碰的时候系统会贴心提醒你打开不用慌。链接: 碰一碰功能介绍● 简单的碰一碰实现先从最简单的图片分享入手带你尝尝碰一碰的甜头其实鸿蒙的碰一碰超友好只要你的应用支持系统分享几乎不用额外折腾几行代码就能搞定看privateasynchandelShare():Promisevoid{constuiContext:UIContextthis.getUIContext();//需设置本地图片链接letfilePaththis.ImgData[this.curIndex];letutdTypeIdutd.getUniformDataTypeByFilenameExtension(.png,utd.UniformDataType.IMAGE);letshareData:systemShare.SharedDatanewsystemShare.SharedData({utd:utdTypeId,uri:fileUri.getUriFromPath(filePath),title:喵屿图片分享,});letcontroller:systemShare.ShareControllernewsystemShare.ShareController(shareData);constcontext:common.UIAbilityContextuiContext.getHostContext()ascommon.UIAbilityContext;controller.show(context,{previewMode:systemShare.SharePreviewMode.DETAIL,selectionMode:systemShare.SelectionMode.BATCH,}).then((){logger.info(HuaweiShare_ show);}).catch((error:BusinessError){logger.error(HuaweiShare_ show error. Code:${error?.code}, message:${error?.message});});}就这么几行把本地图片路径填好调用系统分享Kit分享界面里就自带碰一碰功能了是不是比凑半天二维码轻松多了● 碰一碰拉起指定应用Deeplink的使用但是问题来了默认分享的图片、文本这些会被图库、浏览器这些“路人甲”应用打开咱要的是直接拉起自己的App加好友啊总不能让用户碰完结果跳去浏览器那也太掉链子了。系统早就想到这点了给了俩解决方案一是分享Applinking/Deeplink形式的链接二是指定应用直达6.0.0(20) Beta3新功能咱今天先不唠这个。Applinking和Deeplink的区别简单说Applinking如果对方没装你家App会跳浏览器或应用市场Deeplink只会告诉你没有对应应用Deeplink的配置更简单咱今天就拿捏它想用Deeplink让分享内容精准跳自家App第一步得给App“贴标签”——在module.json5里配置skills标签相当于给系统说“这个链接只能我家App接别乱分给别人”示例如下{module:{// ···abilities:[// ···{// ···skills:[{entities:[entity.system.home],actions:[ohos.want.action.home]},{actions:[// actions不能为空actions为空会造成目标方匹配失败。ohos.want.action.viewData],uris:[{// scheme必选可以自定义以link为例需要替换为实际的schemescheme:link,host:www.example.com}]}// 新增一个skill对象用于跳转场景。如果存在多个跳转场景需配置多个skill对象。]},// ···],// ···}}配置完标签还得让App知道“接了链接该干啥”——在目标应用的UIAbility的onCreate()或者onNewWant()里解析链接参数比如拿到好友信息后就可以触发加好友逻辑了// 以DeepAbility.ets为例import{AbilityConstant,UIAbility,Want}fromkit.AbilityKit;import{url}fromkit.ArkTS;constDOMAIN0x0000;exportdefaultclassDeepAbilityextendsUIAbility{onCreate(want:Want,launchParam:AbilityConstant.LaunchParam):void{// 从want中获取传入的链接信息。// 如传入的url为link://www.example.com/programs?actionshowallleturiwant?.uri;if(uri){// 从链接中解析query参数拿到参数后开发者可根据自己的业务需求进行后续的处理。leturlObjecturl.URL.parseURL(want?.uri);letactionurlObject.params.get(action);// 例如当action为showall时展示所有的节目。if(actionshowall){// ···}}}// ···}说白了想让碰一碰拉起指定App干指定事只要分享的时候把Deeplink链接发出去就行系统会自动帮你找对App。不过上面都是靠系统分享界面实现的有没有更“私密”的玩法不用走系统界面必须有直接注册’knockShare’监听就能自己掌控碰一碰的全过程看官方代码import{uniformTypeDescriptorasutd}fromkit.ArkData;import{systemShare,harmonyShare}fromkit.ShareKit;import{fileUri}fromkit.CoreFileKit;Componentexportdefaultstruct Index{aboutToAppear():void{letcapabilityRegistry:harmonyShare.SendCapabilityRegistry{windowId:999,// 此值仅为示例 实际使用时请替换正确的windowId}harmonyShare.on(knockShare,capabilityRegistry,(sharableTarget:harmonyShare.SharableTarget){letshareData:systemShare.SharedDatanewsystemShare.SharedData({utd:utd.UniformDataType.HYPERLINK,content:https://sharekitdemo.drcn.agconnect.link/ZB3p,// 根据title,description,thumbnailUri会生成不同的卡片模板具体可参考设置配套的卡片样式。title:碰一碰分享卡片标题,description:碰一碰分享卡片描述});// 若云端预览图无法及时下载 可先发送数据sharableTarget.share(shareData);setTimeout((){// 待预览图下载完成后 补充更新预览图letuiContext:UIContextthis.getUIContext();letcontextFaker:ContextuiContext.getHostContext()asContext;letfilePathcontextFaker.filesDir/exampleKnock1.jpg;// 仅为示例 请替换正确的文件路径sharableTarget.updateShareData({thumbnailUri:fileUri.getUriFromPath(filePath)});},5000);});}aboutToDisappear():void{letcapabilityRegistry:harmonyShare.SendCapabilityRegistry{windowId:999,// 此值仅为示例 实际使用时请替换正确的windowId}// 解除碰一碰分享knockShare监听事件harmonyShare.off(knockShare,capabilityRegistry);}build(){}}● 碰一碰加好友功能实战光说不练假把式接下来咱就拿“喵屿App”的碰一碰加宠物好友为例手把手带你把这个功能落地让养宠党贴贴手机就能互加宠物好友再也不用手动输宠物信息啦碰一碰接收端处理想让碰一碰跳自家App加好友第一步得给App“办个身份证”——在module.json5里配置skills标签告诉系统“这个链接是我的别给别人”abilities:[{name:EntryAbility,srcEntry:./ets/entryability/EntryAbility.ets,description:$string:EntryAbility_desc,icon:$media:layered_image,label:$string:EntryAbility_label,startWindowIcon:$media:layered_image,startWindowBackground:$color:start_window_background,exported:true,skills:[{entities:[entity.system.home],actions:[ohos.want.action.home]},{actions:[action.system.viewData],entities:[entity.system.browser],uris:[{// scheme必选可以自定义以catIsland为例需要替换为实际的schemescheme:catIsland,host:catIsland.sx.com}]}// 新增一个skill对象用于跳转场景。如果存在多个跳转场景需配置多个skill对象。]}]划重点碰一碰接收数据后App会走onCreate()或onNewWant()生命周期俩都得处理不然会漏数据然后就得让App“读懂”链接里的好友信息了——在EntryAbility的onCreate()和onNewWant()里解析链接参数把宠物姓名、性别、生日这些信息抠出来存到AppStorage里等着后续处理exportdefaultclassEntryAbilityextendsUIAbility{onCreate(want:Want,launchParam:AbilityConstant.LaunchParam):void{// 从want中获取传入的链接信息。// 如传入的url为catIsland://catIsland.sx.com/share/?name${info.name}sex${info.sex}birth${info.birth}breed${info.breed}leturiwant?.uri;if(uri){// 从链接中解析query参数拿到参数后开发者可根据自己的业务需求进行后续的处理。hilog.info(DOMAIN,testTag,%{public}s,Ability onCreateJSON.stringify(uri));consturlObjecturl.URL.parseURL(want?.uri);constnameurlObject.params.get(name);constsexurlObject.params.get(sex);constbirthurlObject.params.get(birth);constbreedurlObject.params.get(breed);if(name){letbaseInfonewBaseInfo(name)baseInfo.sexNumber(sex)baseInfo.birthbirth baseInfo.breedbreed AppStorage.setOrCreate(newFriend,JSON.stringify(baseInfo));//数据保存起来}}...}onNewWant(want:Want,launchParam:AbilityConstant.LaunchParam):void{// 从want中获取传入的链接信息。// 如传入的url为catIsland://catIsland.sx.com/share/?name${info.name}sex${info.sex}birth${info.birth}breed${info.breed}leturiwant?.uri;if(uri){// 从链接中解析query参数拿到参数后开发者可根据自己的业务需求进行后续的处理。hilog.info(DOMAIN,testTag,%{public}s,Ability onCreateJSON.stringify(uri));consturlObjecturl.URL.parseURL(want?.uri);constnameurlObject.params.get(name);constsexurlObject.params.get(sex);constbirthurlObject.params.get(birth);constbreedurlObject.params.get(breed);if(name){letbaseInfonewBaseInfo(name)baseInfo.sexNumber(sex)baseInfo.birthbirth baseInfo.breedbreed AppStorage.setOrCreate(newFriend,JSON.stringify(baseInfo));//数据保存起来emitter.emit(BaseConstants.NEW_FRIEND)//通知有新朋友数据}}}...为啥俩生命周期都要解析简单说App冷启动第一次打开走onCreate()如果App已经开着Deeplink拉它就只走onNewWant()。俩都处理不管App是开是关都能稳稳接住好友数据主打一个“不漏网之鱼”MainPage弹窗选择是否保存好友数据数据存好了总得让用户知道吧在App首页MainPage.ets里监听好友数据只要有新数据就弹个窗让用户选“加好友”还是“拒绝”体验直接拉满onNewFriend(){if(AppStorage.get(newFriend)!undefined){letnewFriendJSON.parse(AppStorage.get(newFriend)!!)asBaseInfo console.log(testTagJSON.stringify(newFriend))AppStorage.set(newFriend,undefined)this.friendDialogDialogHub.getCustomDialog()//好友数据弹窗可以选择接受或者拒绝.setOperableContent(wrapBuilder(NewFriendDialogBuilder),(action:DialogAction){letparanewPetDialogParams(newFriend,action,this.promptAction,0);returnpara;}).setConfig({dialogBehavior:{isModal:true,autoDismiss:false,passThroughGesture:false}}).setAnimation({dialogAnimation:AnimationType.BOTTOM_UP}).setStyle({radius:32,backgroundColor:Color.White,maskBackgroundEffect:{blurOptions:{grayscale:[50,50]},radius:10}}).build();this.friendDialog.show();}}aboutToAppear():Promisevoid{emitter.on(BaseConstants.NEW_FRIEND,this.onNewFriend)//注册好友申请的监听this.onNewFriend()...}...aboutToDisappear():void{emitter.off(BaseConstants.NEW_FRIEND.eventId,this.onNewFriend)}App启动后打开MainPage先注册好友申请监听确保主页在的时候能实时收到通知然后立刻检查有没有待处理的好友数据有就弹窗不让用户等主打一个“贴心”碰一碰发送端处理宠物信息界面设置碰一碰监听碰一碰后触发的分享界面最后一步让碰一碰“活”起来在宠物信息界面注册碰一碰监听只要检测到两台手机贴贴就把当前宠物的信息打包进Deeplink注意要和前面moudule.json5中定义的scheme和host要匹配 对方接住后就能按上面的流程处理好友申请了showID(info:BaseInfo,index:number0){harmonyShare.on(knockShare,(sharableTarget:harmonyShare.SharableTarget){constfilePathinfo.icon;// 仅为示例 请替换正确的文件路径letshareData:systemShare.SharedDatanewsystemShare.SharedData({utd:utd.UniformDataType.HYPERLINK,content:catIsland://catIsland.sx.com/share/?name${info.name}sex${info.sex}birth${info.birth}breed${info.breed},// 根据title,description,thumbnailUri会生成不同的卡片模板。thumbnailUri:fileUri.getUriFromPath(filePath),title:分享${info.name}给好友,description:碰一碰即可将宠物信息分享给好友});sharableTarget.share(shareData);});this.IDDialogDialogHub.getCustomDialog().setOperableContent(wrapBuilder(PetIDDialogBuilder),(action:DialogAction){letparanewPetDialogParams(info,action,this.promptAction,index);returnpara;}).setConfig({dialogBehavior:{isModal:true,autoDismiss:false,passThroughGesture:false}}).setAnimation({dialogAnimation:AnimationType.BOTTOM_UP}).setStyle({radius:32,backgroundColor:Color.White,maskBackgroundEffect:{blurOptions:{grayscale:[50,50]},radius:10}}).build();this.IDDialog.show();}}这里踩个坑提醒各位老铁博主最开始傻乎乎跟着官方新API写用了6.0.0(20)新增的带capability参数的on方法结果发现5.0版本的设备直接不兼容主打一个“新是新用不了”最后只能乖乖换回5.0.0(12)的低版本API不用传capability。大家用的时候可别踩这个坑——新API虽香但得看你的用户设备支不支持啊//注册设备轻贴的事件监听。//起始版本6.0.0(20)on(event:knockShare,capability:SendCapabilityRegistry,callback:CallbackSharableTarget):void//起始版本5.0.0(12)on(event:knockShare,callback:CallbackSharableTarget):void实际效果演示可自行下载APP碰一碰试一试 喵屿下载链接总结怎么样是不是发现鸿蒙碰一碰加好友功能一点都不复杂从配置Deeplink让链接精准跳自家App到解析冷/热启动的参数不漏数据再到监听碰一碰事件分享好友信息一套流程走下来你的App也能拥有“贴贴加好友”的神仙能力相比传统的扫码、输码加好友碰一碰直接把操作简化到“贴一下”用户体验直接拉满。而且整个开发过程几乎不用造轮子依托鸿蒙Share Kit就能搞定唯一要注意的就是API版本兼容问题别像博主一样踩坑就行。现在就把这些代码搬去你的项目里试试吧不管是做宠物社交、熟人社交还是其他场景碰一碰加好友都能让你的App多一个“让人眼前一亮”的小功能。要是开发过程中踩了啥新坑或者有更酷的玩法评论区唠唠