- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端笔记ing
小程序组件页面通信
本文将讲解一些小程序中常用的几种通信方式，以及在什么场景中使用哪种方式通信。 acceptDataFromOpenerPage', { data: '测试传递' }) } })在 b 组件中 通过 this.getOpenerEventChannel() 获取到 页面间事件通信通道 ({ status: 'TEST})4.设置返回的页面层级 wx.navigateBack({ delta: 1 // 返回上一级页面。 上个页面就会执行这里的操作。 piece: 333333333 }) wx.navigateBack({ delta: 1 // 返回上一级页面。 })父子组件通信 Component子组件向父组件传递值通过在 子组件中，写入事件，然后通过 triggerEvent 方法，指定事件名、detail对象和事件选项 ，来向父组件传递数据// 子组件var
1.5K11编辑于 2023-11-13 - 来自专栏lhyt前端之路
不同页面通信与跨域
html5出现了一个事件： onstorage，我们在window对象上添加监听就可以监听到变化： window.addEventListener('storage', (e) => console.log 如果我们用服务器打开，我们的不同tab页面通信完成了，而且是实时的。 2. 玩转iframe 我们都知道frame可以跨域，那么我们来试一下。 2.4 postmessage（能跨域） H5之后为window新增了window.postMessage()方法，第一个参数是要发送的数据，第二个参数是域名。 非同域的两个tab页面通信 也就是两个毫无关系的tab页面通信（比如我打开一个baidu和一个github），怎么通？ 当然baidu和github能不能通信，我们不知道，得问他们家的开发。 前面我们已经知道，iframe能跨域，localstorage能使得两个tab页面通信。那我们就来试一下，iframe桥接两个互不相干的tab页面。
2.3K10编辑于 2022-09-21 - 来自专栏TopFE
小程序打开h5页面,并实现H5与小程序的通信
在小程序中打开H5页面,需要使用web-view组件 web-view组件是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。 会自动铺满屏幕,意思就是说你的页面只要有了web-view组件,其他内容就显示不出来啦 需要注意的是 src如果有中文会显示白屏 最好使用encodeURIComponent转义一下url 此组件有几个参数分别 e.detail = { src } 1.6.4 web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。 tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。 > <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> 我是H5页面的内容
3.5K20编辑于 2022-01-24 - 来自专栏前端达人
uniapp页面间通信相关方法总结
我们假设一个场景，进入app,是未登陆状态，需要在我的页面点击登陆，进入登陆页面进行登陆。登陆成功之后，返回到我的页面，实时显示登陆后的用户信息。 监听事件 首先，在我的页面监听事件。 触发事件 进入登陆页面，触发事件 // 登陆页面 uni. 而我们开发中会遇到很多页面间通讯场景，如： vue 与 nvue，nvue 与 vue 间的通讯 tabbar 页面之间的通讯 父页面与多级子页面间的通讯 基本上述场景均可以实现，本质上就是一个页面通知另一个面我发生了变化 注意，这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。 Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。
5.1K20发布于 2021-06-16 - 来自专栏kwcode
iframe 同域下父子页面的通信
window.trip = window.trip || {}; window.trip.name== window.trip.name || {}; })(window, $); //父页面 缓存一个控件 }); //html代码
<input type="text" class=" j-item-name name" placeholder="姓名" >//子页面 iframe弹出的页面 //直接赋值 parent.trip.name.val(“ceshi”)1K100发布于 2018-03-14h5页面制作，什么是H5页面？
H5页面设计与制作是指利用HTML5技术进行网页设计和开发的过程。HTML5作为最新的HTML标准，带来了许多新的特性和功能，使得网页设计更加灵活、互动性更强，并且能够在各种设备上提供一致的用户体验。 下面我们将详细介绍H5页面设计与制作的概念、特点、应用以及如何入门。什么是H5页面设计与制作？H5页面设计与制作是指使用HTML5、CSS3和JavaScript等技术来创建和优化网页的过程。 H5页面的特点跨平台兼容性：H5页面可以在PC、平板、手机等多种设备上运行，提供一致的用户体验。多媒体支持：HTML5支持音频、视频、图形等多媒体元素，无需依赖第三方插件。 在线教育：H5页面可以嵌入视频、音频、动画等教学资源，增强学习体验。如何入门H5页面设计与制作？学习基础知识：首先需要掌握HTML、CSS和JavaScript的基础知识。 关注用户体验：设计时要考虑用户的使用习惯和体验，确保页面加载速度、交互流畅性等。总结H5页面设计与制作不仅仅是技术的进步，更是用户体验的提升。
25K32编辑于 2025-02-13来自专栏学习/读书笔记《Flutter》-- 5.Flutter页面布局
参阅书籍： 《Flutter跨平台开发入门与实践》-- 向治洪（著） 5. Flutter页面布局 5.1 盒约束模型 盒约束是指组件可以按照指定限制条件来决定如何布局自身位置。 height: 100, child: Container( width: 80, height: 5, 2）mainAxisSize：表示主轴应该占用多大空间； 3）crossAxisAlignment：表示子组件在交叉轴的对齐方式； 4）textDirection：表示子组件在主轴方向上的布局顺序； 5） 主轴的方向； 2）mainAxisAlignment：子组件在主轴的对齐方式； 3）mainAxisSize：主轴占用的空间大小； 4）crossAxisAlignment：子组件在交叉轴的对齐方式； 5） 5.4 流式布局 流式布局指的是页面元素的宽度可以根据屏幕的分辨率适配调整，但整体布局风格保持不变。
1.4K20编辑于 2022-04-07来自专栏前端小课堂百度小程序之间的页面通信.md
背景 主要是针对小程序开发中页面之间进行通信的问题，在涉及支付的场景中，用户从页面支付入口进行跳转进行支付之后，回到原来页面，在原来的页面需要进行相应的状态刷新，比如用户身份状态、支付状态、文档或商品情况 遇到的问题 在使用百度小程序的 swan.navigateBack 进行回跳页面时，API中的方法参数不支持携带参数，只支持number参数。 所以就涉及了几个单独页面之间的通信问题。 fail function 否 - 接口调用失败的回调函数 complete function 否 - 接口调用结束的回调函数（调用成功、失败都会执行） 解决方法 主要有以下三种方法，实现各page之间通信 afterPaySuccess', { docId: this.data.tradeInfo.docId, triggerFrom: 'docCashierBack' }); 根据事件中心的发布和订阅，实现了页面之间的通信 ，就能实现比如页面在支付成功后回退时，页面状态的改变的场景，同时利于维护页面之间的数据关系，能通过在发布时传递参数，实现数据之间的通信。
56910发布于 2019-09-04来自专栏技术/开源UWP开源项目 LLQNotifier 页面间通信利器（移植EventBus）
前言 EventBus是一个Android版本的页面间通信库，这个库让页面间的通信变得十分容易且大幅降低了页面之间的耦合。 这个库原理很简单，就是把观察者模式封装成库，页面想收到某类通知就注册相关事件，在其他页面发出通知后就做响应。 优先级，总共有5级，实际运用中可能会碰到注册同一种事件并需要控制执行先后顺序，这时优先级就派上用场。 RemoveSubscription(type, subscriber); } } } 垃圾回收 因为注册时会把注册的对象保存起来，强引用的话会导致对象不能被GC回收，表现在应用里就是页面只要打开一次 ，内存就会被占用，即使页面已经关掉，内存不回收，这就是内存泄露了。
71370发布于 2018-01-04来自专栏Hello worldH5和移动端通信
UIWebView）WKScriptMessageHandler（只适用于WKWebView，iOS8+）Bridge第三方框架（适用于UIWebView和WKWebView）1. url拦截url拦截是在H5请求一个地址后 ，客户端拦截住这个地址，对地址进行解析处理H5中调用iOS方法代码：弹出登录弹窗(拦截url)iOS中拦截到url代码：- (BOOL)webView request.URL.absoluteString hasPrefix:@"news://login"]) { //弹出登录弹窗 [self login]; // 禁止打开页面 - (void)login{ [self.delegate login]; }@end// H5加载完成 JavaScriptInterfaceH5端代码<body> <input type="button" name="" value="登录" onclick="login()"><script type
1.8K30编辑于 2022-10-21来自专栏采云轩H5 页面列表缓存方案
前言 在 H5 日常开发中，会经常遇到列表点击进入详情页面然后返回列表的情况，对于电商类平台尤为常见，像我们平常用的淘宝、京东等电商平台都是做了缓存，而且不只是列表，很多地方都用到了缓存。 但刚才说的都是 App，在原生 App 中，页面是一层层的 View，盖在 LastPage 上，天然就能够保存上一个页面的状态，而 H5 不同，从详情返回到列表后，状态会被清除掉，重新走一遍生命周期， localStorage 是一种方式，提供的 getItem、setItem 等 api 也足够支持存取操作，最大支持 5M，容量也够，通过序列化 Serialize 整合也可以满足需求，另外 IndexDB 也不失为一种好的方式，WebSQL 已废弃，就不考虑了，详细可点击张鑫旭的这篇文章《HTML5 indexedDB前端本地存储数据库实例教程》(https://www.zhangxinxu.com/wordpress /2017/07/html5-indexeddb-js-example/)查看对比。
2.2K20发布于 2021-04-08来自专栏deepcchtml5页面头部
-- 尺寸的设置以及页面是否允许缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale -- 忽略<em>页面</em>中的数字识别为电话,忽略email识别 --> <meta name="format-detection" content="telephone=no, email=no"/> <!
2K20发布于 2018-07-05来自专栏deepcchtml5页面头部
-- 尺寸的设置以及页面是否允许缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale -- 忽略<em>页面</em>中的数字识别为电话,忽略email识别 --> <meta name="format-detection" content="telephone=no, email=no"/> <!
2.2K70发布于 2018-05-16来自专栏coding for love5-13 多页面打包配置
简介 前面的配置基本上是基于 spa，不过如果细心的同学可能会发现，之前在 5-5 webapck-dev-server 解决单页应用路由问题 一文中已经用到了多页面打包。 配置多页面 const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require
62210发布于 2020-06-02来自专栏卓越笔记H5页面唤醒 支付宝App 指定页面
appId=20000307”;暗号 —400 参考资料 H5页面唤醒支付宝 app指定页面_daxiong0816的博客-程序员秘密 - 程序员秘密 (cxymm.net) URLScheme 之 支付宝
6K20编辑于 2023-02-18来自专栏Android开发技术H5如何与原生App通信？
前言 为了提高开发效率，开发人员往往会使用原生app里面嵌套前端h5页面的快速开发方式，这就要涉及到h5和原生的相互调用，互相传递数据，接下来就实践项目中的交互方式做一个简单的记录分享，废话不多说，直接上正文 说白了UIWebView有类似浏览器的功能，我们使用可以它来打开页面，并做一些定制化的功能，如可以让js调某个方法可以取到手机的GPS信息。 code <WebView useWebKit={true} source={{ url: 'https://m.douyu.com' }} /> WebView组件不要嵌套在或原生点击组件中，会造成H5内页面滚动失效 通过在webview页面里直接注入原生js代码方式，使用addJavascriptInterface方法来实现。 ，因此我们不需要直接通过schema协议来通信，只需要使用浏览器postMessage、onMessage来传递消息即可，类似于iframe，而真正的通信过程RN已经帮我们做了。
7.1K20编辑于 2021-12-17来自专栏七禾页话通信随笔｜5G快来了吗？
今天看到一张图片，对当前5G来说很形象，分享一下。 图片的标题就是5G Networks - Coming soon？ 这个图片对于5G NSA来说非常形象，毕竟NSA就是借用4G网络挂了个5G基站，套壳上市。 不过作为从业者来说，现在的5G对于终端手机用户没看到什么有用的或者革命性的场景。打游戏、看视频直播、语音视频电话依然是4G就可以满足的场景，再加个WIFI，更是没什么5G的用武之地。 5G真正的用武之地是工业自动化，比如码头装卸自动化，铺设光纤使用有线的时候，光纤磨损维护更换成本都是很高的，那么对于码头这个地方铺设5G，使用无线传输，然后再自建一套核心网就近完成数据计算就很有应用场景了 至于5G，别当回事儿。 ----
30320编辑于 2022-11-23来自专栏learn-anything.cnHTML页面跳转的5中方式！
window.opener是指向前一个页面，这样就可以控制前一个页面。 譬如：当新旧页面在同一个域名下时，在新页面控制台输入 window.opener.alert(1) ，会发现旧页面弹出消息1 。 当新旧页面不在同一个域名时，通过window.opener.location.replace 可以改变旧页面的url。 相关链接 window 对象详细说明 window.opener 对象详细说明 --- 页面跳转传递参数 # 传参页面 let a = { key:'value' } // 对参数进行序列化 5中方式！
3.1K20编辑于 2021-11-27来自专栏linux运维什么是H5页面？
一、H5页面是啥？H5页面，全称是HTML5页面，是用HTML5（超文本标记语言第5版）技术开发的网页。跟传统网页比，H5页面更轻巧、互动性更强，特别适合在手机、平板上浏览。 举个例子，你在微信里点开那种活动邀请函、品牌宣传页、抽奖页面，带动画、滑动效果、背景音乐的，那些多半就是H5页面！ 二、H5页面的特点跨平台：不管是安卓、iOS，还是PC，H5页面都能跑，只要有浏览器就行。互动性强：支持触摸、滑动、点击等操作，还能加动画、视频、音频，体验像玩游戏一样。 广告：微信朋友圈广告、短视频平台跳转页，H5页面是主力。四、H5页面咋做的？想做H5页面？大概分这几步：策划内容：先想好页面要干啥，比如宣传产品还是搞活动，定好主题和风格。 整个页面加点背景音乐，分享到微信群，吸引用户点开玩。这种页面用H5做，成本低、效果好，传播快！七、想学H5页面制作？
5.6K31编辑于 2025-07-31来自专栏前端QWebpack5构造React多页面应用
来源 | https://github.com/zhedh/react-multi-page-app/ 介绍 react-multi-page-app是一个基于webpack5构造的react多页面应用 为什么建造多页面应用： 多个页面之间业务互不关联，页面之间并没有共享的数据 多个页面使用同一个一个服务，使用通用的组件和基础库 建造多页面应用的好处： 保留了传统单页应用的开发模式：支持补充打包，你可以把每个页面看成是一个单独的单页应用 独立部署：每个页面相互独立，可以单独部署，解压缩项目的复杂性，甚至可以在不同的页面选择不同的技术栈 减少包的体积，优化加载渲染流程 快速上手 克隆 git clone https://github.com ，查看完整代码react-multi-page-app 入口配置和模版自动匹配 为了不用每次补充页面都要添加入口页面配置，我们将入口配置改成自动匹配 入口文件自动匹配 cd config touch webpack.util.js 我们项目中没有安装webpack-cli，webpack会进行交替使用的webpack-cli，webpack5和webpack-cli3不兼容 解决：升级版本webpack-cli3到webpack-cli4
4.3K20发布于 2021-01-07
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号