鸿蒙5开发隐藏案例分享---自由流转的浏览进度接续

举报
yd_280025482 发表于 2025/05/29 10:49:19 2025/05/29
【摘要】 ✨ 鸿蒙开发隐藏案例大揭秘!手把手教你玩转应用接续功能 ✨大家好呀~今天要跟大家分享一个超实用的鸿蒙开发技巧!之前总觉得鸿蒙的官方文档案例藏得太深,最近偶然挖到了「应用接续」相关的宝藏代码,忍不住连夜整理成干货!这篇内容会用最白话的方式 + 超多案例,带大家轻松实现“手机切平板,进度不中断”的神奇效果!🚀🌟 为什么要用应用接续?想象一下这些场景👇:📱 手机上刷了半小时淘宝,切到平板后...

鸿蒙开发隐藏案例大揭秘!手把手教你玩转应用接续功能


大家好呀~今天要跟大家分享一个超实用的鸿蒙开发技巧!之前总觉得鸿蒙的官方文档案例藏得太深,最近偶然挖到了「应用接续」相关的宝藏代码,忍不住连夜整理成干货!这篇内容会用最白话的方式 + 超多案例,带大家轻松实现“手机切平板,进度不中断”的神奇效果!🚀


🌟 为什么要用应用接续?

想象一下这些场景👇

  • 📱 手机上刷了半小时淘宝,切到平板后又要从头往下滑…(暴躁!)
  • 🎬 看到一半的电影换设备播放,进度条居然归零了…(抓狂!)
  • 📖 网页看了20屏切设备,结果又要重新找位置…(窒息!)

鸿蒙的分布式能力就是来拯救你的!今天咱们重点攻克三个高频场景:长列表、媒体播放、Web浏览的接续功能,附完整代码和避坑指南!


🛠️ 环境准备

先确认你的项目配置正确!

  1. module.json5中开启接续能力(必做!)
{
  "module": {
    "abilities": [
      {
        "continuable": true  // 这行必须加!
      }
    ]
  }
}
  1. 权限申请:在config.json中添加分布式权限:
"reqPermissions": [
  {
    "name": "ohos.permission.DISTRIBUTED_DATASYNC"
  }
]

📜 场景一:长列表接续(比如购物车列表)

痛点:滑动到第100条,切设备后又要从头开始?

🔑 核心代码

// 1. 监听滚动位置
Scroll(this.scroller) {
  // ...列表内容
}
.onDidScroll((xOffset, yOffset) => {
  // 记录当前滚动到的y轴位置
  AppStorage.setOrCreate('currentOffset', yOffset);
})

// 2. 源设备保存数据
async onContinue(wantParam) {
  const currentOffset = AppStorage.get('currentOffset') || 0;
  const dataObject = distributedDataObject.create(this.context, { currentOffset });
  const sessionId = distributedDataObject.genSessionId();
  dataObject.setSessionId(sessionId);
  wantParam.distributedSessionId = sessionId;
  dataObject.save(wantParam.targetDevice);
  return AbilityConstant.OnContinueResult.AGREE;
}

// 3. 目标设备恢复数据
continueRestore(want) {
  const sessionId = want.parameters.distributedSessionId;
  const dataObject = distributedDataObject.create(this.context, {});
  dataObject.setSessionId(sessionId);
  
  dataObject.on('status', (sessionId, networkId, status) => {
    if (status === 'restored') {
      // 拿到之前的滚动位置
      const savedOffset = dataObject['currentOffset'];
      this.scroller.scrollTo({ xOffset:0, yOffset:savedOffset });
    }
  });
}

避坑指南

  • 列表组件必须用Scroll包裹,直接操作List的滚动可能失效!
  • 如果列表有分页加载,记得同时传递页码参数!

🎥 场景二:视频播放接续(比如B站切设备)

痛点:看到45分钟切设备,进度条回到开头?

🔑 核心代码

// 1. 监听播放进度
this.avPlayer.on('timeUpdate', (currentTime) => {
  AppStorage.setOrCreate('videoProgress', currentTime);
});

// 2. 保存进度(onContinue方法内)
const progress = AppStorage.get('videoProgress') || 0;
const dataObject = distributedDataObject.create(this.context, { progress });

// 3. 恢复播放
// 注意!必须在视频加载完成后执行seek
this.avPlayer.on('stateChange', (state) => {
  if (state === 'playing') {
    const savedTime = dataObject['progress'];
    this.avPlayer.seek(savedTime); // 跳转到记录的时间
  }
});

避坑指南

  • 必须等视频进入playing状态后再调用seek,否则无效!
  • 如果是网络视频,确保目标设备有相同的播放权限!

🌐 场景三:网页浏览接续(比如知乎长文)

痛点:看了20屏的网页切设备后回到顶部?

🔑 核心代码

// 1. 监听网页滚动
Web({ controller: this.webController })
.onTouch((event) => {
  if (event.type === TouchType.Up) {
    // 获取当前滚动位置
    this.webController.runJavaScript('window.pageYOffset').then((result) => {
      AppStorage.setOrCreate('webScrollY', result);
    });
  }
})

// 2. 保存数据(onContinue方法内)
const scrollY = AppStorage.get('webScrollY') || 0;
const dataObject = distributedDataObject.create(this.context, { scrollY });

// 3. 恢复滚动位置
onPageEnd(() => {
  const savedY = dataObject['scrollY'];
  this.webController.runJavaScript(`window.scrollTo(0, ${savedY})`);
})

避坑指南

  • 部分网页用document.documentElement.scrollTop代替window.pageYOffset
  • 如果网页内有动态加载内容,建议用元素ID精准定位!

💡 开发小技巧

  1. 调试神器:用hilog打印分布式数据传递日志:
hilog.info(0x0000, 'DEBUG', '当前进度:%{public}s', savedOffset);
  1. 兼容性处理:旧设备可能不支持接续,记得加try-catch
  2. 数据压缩:如果传递大对象,先用zlib压缩减少传输时间!

🚀 总结

搞定这三个场景,你的App瞬间拥有“丝滑切换”的超能力!其实鸿蒙的分布式开发远不止这些——跨设备剪贴板、共享摄像头等玩法也超有趣!如果大家遇到问题,欢迎去华为开发者社区吼一声,很多大佬在线答疑哦~

最后的灵魂提问:你们还遇到过哪些想砸手机的“切换断档”场景?评论区一起吐槽,说不定下期就出解决方案! 💥


互动时间:觉得有用的话,点个赞❤️让我知道吧!

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。