关于小程序内嵌H5页面交互的问题?

有木有遇到?有木有遇到。

小程序内嵌了H5,然后H5某个按钮,需要打开小程序某个页面进行信息完善或登记,登记后要返回H5页面,而H5页面要动态显示刚才在小程序页面登记的信息。

操作流程是这样:

方案1: 增加类似 刷新,用户操作 -> 读取控制配置 -> 做相应动作。

增加用户操作!!

方案2: 利用websocket通信,通过服务端传递。

增加外部资源,流程长,稳定性差!

在个人认知不足的情况下,有些问题解决就只局限在现有认知中,知识面扩展后,很多问题便有新的解决方向。

方案3:利用对 visibilitychange 事件, 当h5页重新获取视野时,自动刷新。

解决了增加人为,也不额外使用其他中转资源!

javascript 复制代码
// 示例代码
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

详情查看连接:

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilitychange_event

相关推荐
WebInfra5 分钟前
Rspack 2.0 正式发布!
前端·javascript·前端框架
极速蜗牛11 分钟前
Cursor最近变傻了?
前端
码字小学妹21 分钟前
Claude Opus 4.7 接入指南(2026):国内配置 + xhigh 推理 + 成本计算
前端
小赵同学WoW23 分钟前
插槽【vue2】与 【vue3】对比
前端
代码随想录23 分钟前
Agent大厂面试题汇总:ReAct、Function Calling、MCP、RAG高频问题
前端·react.js·前端框架
前端那点事23 分钟前
Vue响应式原理|从底层实现到面试考点,一文吃透(Vue2+Vue3全解析)
前端·vue.js
walking95725 分钟前
Vite 打包优化终极指南:从 30MB 到 800KB 的性能飞跃
前端·vue.js·vite
Highcharts.js26 分钟前
在 React 中使用 useState 和 @highcharts/react 构建动态图表
开发语言·前端·javascript·react.js·信息可视化·前端框架·highcharts
梓言26 分钟前
解决 Element Plus 中 Tooltip 样式影响全局菜单(Menu)及宽度控制失效的完美方案
前端·css·element
小蜜蜂dry30 分钟前
css变量
前端·css