就以我参与开发的一款移动报表FineReport为例,讲解一下如何开发手动推送APP消息。...这个APP里有这样一个应用,它是可以实现在客户端填报录入数据,然后数据上传到数据库中的这样一个功能,也就是所谓的移动化办公,这在企业办公方面用得比较多。...,多个用户之间用逗号分割,如“A,B” (必填) text:消息内容 (选填) url:打开地址(选填),在点击消息之后 进入app打开的地址 title: 打开地址的页面标题(选填) 举例 例子1、推送纯文本消息
1.移动端视口问题 视口是指浏览器的可视区域,移动端的视口到底是多宽呢? 现在市面上的大部分手机,比如iphone X,它的默认视口宽度为980px,而一个iphone X的屏幕宽度仅仅为375px。...(注:实际上,这里说的375像素不是真实的物理像素,至于这个375像素是怎么来的,以及为什么大部分移动端的默认视口宽度是980,这就是另一个更加复杂的话题了,在此我们先不做讨论。)...我们可以使用谷歌浏览器的移动端调试工具,来访问百度的搜索结果,可以看到网页明显被缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。...3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。...注意:在移动端,如果使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。 题外话:移动端看上去是不是很麻烦?视口那么小,还要引入各种东西,里面要添加的又杂又乱,还要计算数值,是不是很麻烦?
一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom.../ 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容...Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android...Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能...移动端特有的touch事件 由于移动端设备大都具备触摸功能,所以移动端浏览器都引入了触摸(touch)事件。...封装移动端tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件,仅供参考。...---- 参考文章: 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
Windows平台推送端(以C#为例): /* *设置输入音量, 这个接口一般不建议调用, 在一些特殊情况下可能会用, 一般不建议放大音量 *index: 一般是0和1, 如果没有混音的只用...Android推送端: /** * 设置输入音量, 这个接口一般不建议调用, 在一些特殊情况下可能会用, 一般不建议放大音量 * * @param index: 一般是0和1, 如果没有混音的只用
.
实习期间主要在写微信端H5,遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端,只能自己摸索着来。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素,但移动端不同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 3.2...4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。...通过设备判断,如果是移动端打开,则自动跳转到移动端页面。...,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。
移动端基础 移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素,但移动端不同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 3.2...4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。...通过设备判断,如果是移动端打开,则自动跳转到移动端页面。...,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1、移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素,但移动端不尽相同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比...4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。...通过设备判断,如果是移动端打开,则自动跳转到移动端页面。...,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。
本文原题为“大规模群消息推送如何保证实时性?”,来自瓜子二手车IM负责人:封宇,本次内容有修订,感谢原作者(原文链接在文末)。 1、编者注 ? 众所周之,群聊是移动端IM的服务端技术难点所在,难在哪?...那么服务端在保证消息投递的同时,面对这么大的压力该如何解决好效率问题?解决不好效率问题那实时性就不能保证!...(本文作者在另一篇文章《一套海量在线用户的移动端IM架构设计实践分享(含详细图文)》,对这个架构作了详细记录和总结,有兴趣的同行可以前往阅读。)...7.2 裸写批处理逻辑 处理一条群消息,服务端要进行大量的工作,需要查询所有群成员的路由表、在线状态,在线人员需要推送及时消息,离线人员需要推送第三方push(比如iOS的apns推送通道)。...push的延迟推送任务; 4)异步写离线消息(不影响在线用户收到消息的速度); 5)第(2)步推送消息的ack信息回到服务端; 6)c2g模块将ack信息放入消息总线。
判断移动端或pc端 经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置,根据不同的设置跳转不同的路由。 先写个方法: ?..._isMobile()) { alert("移动端"); //移动端跳转路由 } else { alert("pc端"); //Pc端跳转路由
一、移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问的是不同的页面 , 目前的 京东 / 淘宝 等电商网站移动端页面采取的该方案 ; 响应式页面兼容移动端...: 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动端页面 通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用...m.jd.com 可以访问其移动端页面 ; 如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 , 在浏览器中 , 按 F12 进入调试模式..., 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动端页面...; 2、响应式页面兼容移动端 响应式页面兼容移动端 的原理是 通过 判断当前的 屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局
由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1....优点:布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点:由于垂直方向像素恒定,可能水平很宽的屏幕会被拉伸变形严重,另外在高倍屏幕上1像素可能被多倍的物理像素显示,会变的非常粗。...2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动端首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 ?...这样优点非常多,首先开发人员直接像素还原,开发效率很高,也没有移动端1像素的问题。也是老马推荐大家使用的方式。
由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1....优点:布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点:由于垂直方向像素恒定,可能水平很宽的屏幕会被拉伸变形严重,另外在高倍屏幕上1像素可能被多倍的物理像素显示,会变的非常粗。...2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动端首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。...这样优点非常多,首先开发人员直接像素还原,开发效率很高,也没有移动端1像素的问题。也是老马推荐大家使用的方式。
SSE(Server-sent events) SSE 它是基于 HTTP 协议的,一般意义上的 HTTP 协议是无法做到服务端主动向客户端推送消息的。...有一种变通方法,就是服务器向客户端声明,发送的是流信息,本质上,这种通信就是以流信息的方式。...SSE 在服务器和客户端之间打开一个单向通道,服务端响应的不再是一次性的数据包而是 text/event-stream 类型的数据流信息,在有数据变更时从服务器流式传输到客户端。...SSE 与 WebSocket 作用相似,都可以建立服务端与浏览器之间的通信,实现服务端向客户端推送消息,两者区别: SSE 是基于 HTTP 协议的,不需要特殊的协议或服务器实现即可工作,WebSocket...需单独服务器来处理协议; SSE 单向通信,只能由服务端向客户端单向通信,webSocket 全双工通信,即通信的双方可以同时发送和接受信息。
2、秒级推送:速度经得起考验 移动推送 TPNS 提供每秒30万推送处理能力,系统每分钟可容纳1800万推送消息,消息能秒级到达,支持王者荣耀等日亿级海量推送。...为避免上述情况出现,移动推送 TPNS 为每个App设置单独的推送通道,有效保证了推送的稳定性和时效性。...所以新版本的移动推送为用户在实际创建推送过程中,提供推送配额预估功能。在推送创建过程中,为用户提供有效的信息,对推送量进行科学的预估,以保证本次推送效果达到最佳。 ?...03 支持境外推送 随着移动应用国际化趋势日益增长,终端设备的基础属性采集以及运营数据的存储需要符合所在地域的数据保护条例。...PS:小编将TPNS(腾讯移动推送)与信鸽相比的主要优势汇总到下面的图片中,以便您系统地了解一下: ? 了解更多产品信息 可扫描下方二维码 查看移送推送 TPNS 产品页 ?
2、秒级推送:速度经得起考验 移动推送 TPNS 提供每秒30万推送处理能力,系统每分钟可容纳1800万推送消息,消息能秒级到达,支持王者荣耀等日亿级海量推送。...为避免上述情况出现,移动推送 TPNS 为每个App设置单独的推送通道,有效保证了推送的稳定性和时效性。...所以新版本的移动推送为用户在实际创建推送过程中,提供推送配额预估功能。在推送创建过程中,为用户提供有效的信息,对推送量进行科学的预估,以保证本次推送效果达到最佳。...03 支持境外推送 随着移动应用国际化趋势日益增长,终端设备的基础属性采集以及运营数据的存储需要符合所在地域的数据保护条例。...PS:小编将TPNS(腾讯移动推送)与信鸽相比的主要优势汇总到下面的图片中,以便您系统地了解一下: image.png 了解更多产品信息 可扫描下方二维码 查看移送推送 TPNS 产品页 image.png
移动端轮播图功能和PC端基本一致。...功能需求: 可以自动播放图片 手指可以拖动播放轮播图 案例分析: 自动播放功能 开启定时器 移动端移动,可以使用translate 移动 想要图片优雅的移动,请添加过渡效果...,简单说就是移动端拖动元素 触摸元素touchstart: 获取手指初始坐标 移动手指touchmove: 计算手指的滑动距离,并且移动盒子 离开手指touchend: 根据滑动的距离分不同的情况...如果移动距离小于某个像素 就回弹原来位置 如果移动距离大于某个像素就上一张下一张滑动。...touchmove: 计算手指的滑动距离, 并且移动盒子 ul. addEventListener( 'touchmove', function(e) { //计算移动距离 moveX
领取专属 10元无门槛券
手把手带您无忧上云