一、背景 通过之前悟空活动中台系列文章，大家对微组件、动态布局等技术方案有了一定的了解。本篇我们带大家了解下悟空H5专题性能优化之路。 在移动互联网时代，H5页面加载体验至关重要。...（4）动态字体压缩 字体文件大小普遍在2M左右，H5活动页面字体量有限，但仅仅为少量特殊文字全量引入字体文件，页面性能损耗非常大。...，img 标签的 src 改为 v-lazy 就可以实现图片懒加载 功能符合预期，支持背景图片懒加载，支持图片 url 动态修改为 webp 悟空提供给组件开发者资源懒加载指令，用户无需感知具体的加载逻辑...（3）减少白屏时间 相比 Native 页面，H5 页面体验问题主要是：打开一个 H5 页面需要做一系列处理，会有一段白屏时间，体验糟糕。...在笔者看来，性能优化不是一种手段，而是一种意识，开发者在实际开发过程中需要建立意识，在各处细节上去保证用户体验。
- 2015年的老文，搬运存档用 - 作为一个UI工程师，在这个移动互联网叱咤风云的时代，每次看到timeline中被分享的各种花样H5页面，总是心痒难耐，也想做有着酷炫动画和带感声效的H5呢。...作为一个盗（ge）墓（sao）脑残粉，非常高兴能参与制作，还是职业生涯中第一个有着酷炫动画以及动人声效的H5呢。 作为刚刚来到新手村的朋友，踩到了一些坑，所以让我进入正题吧。...在实际开发的时候，我完全混乱了这两个属性的用法，所以稍作研究，对此有兴趣或有疑问的同学，请移步 km 文章《zoom 和 transform: scale(x)》。...因为这个项目是重构和前端并行开发的……把伪元素改成实际 DOM 元素的时候，是怀着一颗对不起前台@nicholguang 的心的。...拿这次的活动页面设计稿来说，与用户产生交互的按钮在页面篇底部的位置。
H5营销活动平台采用P3-Weixin插件开发框架，开发微信H5活动，插件以JAR形式存在，支持独立部署，解决H5活动,用户量大，并发高的问题。...（提供成熟的分布式解决方案） 特点 采用插件模式开发H5营销活动，独立部署，解决微信活动大用户、高并发问题。...微信H5活动插件列表 微信砍价活动 P3-Biz-gzbargain 摇一摇送卡券 P3-Biz-shaketicket 九宫格活动 P3-Biz-jiugongge 斧头帮砍价...九宫格活动-效果图 ? 斧头帮砍价-效果图 ? 摇一摇送卡券-效果图 ? 开发文档 ?...，按照模块进行开发，每个模块可以单独达成jar包 6.数据库配置文件： src/main/resources/db.properties 开发入门 “ 1.Eclipse + Maven + JDK7
H5报告。...参与地址 活动2—【返图有礼】 参与资格：所有创作者（在腾讯云开发者社区发表文章数≥1的用户） 活动时间：2020.1.16-2020.2.3 参与方式： 1、在朋友圈晒出自己的年度总结（海报、H5截图...、直接分享H5均可）或获奖礼品； 2、所有分享文案必须包括【腾讯云开发者社区】； 3、将分享截图反馈给腾讯云开发者社区作者助理（微信：15989558128）或通过问卷进行提交。...活动时间：2020.1.16-2020.1.22 参与方式： 1、符合活动参与资格的创作者可以联系腾讯云开发者社区作者助理（微信：15989558128）申请新春粉丝福利券包； 2、福利券包包含若干张100...---- 对以上活动有任何疑问，可以邮件至yunjia_community@tencent.com进行咨询。祝大家新春快乐，万事如意。
0x00：写在前面 甲方给出的大致需求是做一个移动端 H5 的活动网站，需要实现微信登录、在线点播视频，抽奖、奖品发放等功能，但距离甲方的活动上线的时间只有7天左右，所以还需要考虑是否能在这个时间区间内实现所有的需求...0x02：需求分析 甲方给出的活动流程如下： 前三天进行推文和长图传播，最终弄实现形式是H5（包括微电影+抽奖） 三天三部微电影，观看完整视频后可获得一次（仅有一次）抽奖机会，奖品大多数是红包 并生成二维码进行分享传播...第四天做答案揭晓，并在朋友圈做广告推广（推广这块由另一位老板负责）根据排行榜抽取最终的大奖 开发周期：7 天时间实现所有需求，第 8 天早上上线，活动持续 4 天时间，第 11 天下午活动结束。...“网站应用” 文档内的 "微信登录开发指南" 只能实现PC端的二维码扫码登录，而并不适用于移动端H5的需求（移动端的需求应该是打开网页后直接弹出授权请求） PC端扫码后提示授权 image.png 移动端直接提示授权...image.png 经过资料的查阅，以及在询问经验丰富的大哥，最后在 segmentfault 提出的问题 得到了答复，最终确认了移动端 H5 网站要想实现微信登录授权，必须通过微信公众号来进行，而微信开发平台上的
澎湃新闻近日上线新春互动H5《拜年腔调》，邀请热门电视剧《繁花》里的明星朋友做大家的沪语“私教”，“宝总”胡歌、“陶陶”陈龙、“潘经理”佟晨洁等一齐嘉宾教大家用上海话送上“地道”的新年祝福，延续《繁花》...在腾讯云语音识别（ASR）技术的加持下，这只H5融合互动营销和语音识别等前沿科技元素，为用户创造了一场别开生面的新春年味。...别具一格 《繁华》版新春祝福引热议 《拜年腔调》一经上线，便迅速引发了广大用户的关注和参与。 在短短12小时内，该H5便获得了约3.6万用户的浏览与参与，成为春节期间的一大热门话题。...这种参与感满满的互动体验让用户感受到了别具一格的新春氛围和乐趣。 H5的策划负责人、澎湃新闻数据新闻负责人吕妍表示：“腾讯云ASR技术的稳定性和准确性为《拜年腔调》的成功上线提供了强大的后盾。...同时基于大模型升级而展现的方言识别能力也为我们本次的活动运行打下了坚实基础，调用过程流畅自然，使得用户能够顺畅地进行语音输入和互动。”
，通过扫码活动入口进入查看自己的 H5 报告。...活动 1 「分享有礼」 参与资格：所有社区用户 活动时间：2023.1.16-2023.1.31 参与方式： 1、在朋友圈晒出腾讯云开发者社区 2022 年度回顾活动（海报、H5截图、直接分享H5均可）...活动时间：2023.1.16-2023.1.31 参与方式： 1、符合活动参与资格的创作者可以联系腾讯云开发者社区作者助理（微信号：yun_assistant）申请新春粉丝福利礼包； 2、福利礼包包含社区定制随机礼品...活动 3「红包封面有礼」 参与资格：所有社区用户 活动时间：2023.1.16-2023.1.31 参与方式：扫码关注【腾讯云开发者】公众号，既有机会获得 5 款定制红包封面，数量有限，先到先得。...图片 特别注意：以上活动禁止作弊，如有发现，回收获奖资格，不予发放奖品，同时作弊者将被腾讯云开发者社区永久拉黑。
穿过春光明媚、夏日炎炎、秋高气爽、冬之寒凛~ 2021年的时光列车到站了~ 在这农历年末时光里，让我们一起回首这段旅程 感谢开发者们陪伴腾云先锋团队度过了成绩斐然的2021 这一年，有许多优秀开发者加入我们...TDP运营团队为大家准备了一系列的活动一起共赴新春，希望有你的参与~ 篇章一：回望 2021年，我与腾讯云的那些事儿！分享有奖！...活动时间： 2022.1.14-2022.1.21 14:00 活动规则： 活动期间在本活动贴下方回帖参与互动，分享2021年你与腾讯云的故事。...拿开发者的经历打个样~ 2021年这一年，我初次接触了云计算，初次接触了腾讯云，购买了我的第一台轻量应用服务器。...更多活动详情，请扫码加入活动通知群！对活动有任何疑问，欢迎进群艾特活动助手（腾云先锋-饭团、腾云先锋-芋头） 微信截图_20220114172008.png
腾讯云开发者社区创作者年度回顾 腾讯云开发者社区于 2023 年 1 月 16 日发布了《2022 腾讯云开发者社区创作者年度总结》，各位创作者可以在 2023 年 1 月中下旬登录腾讯云开发者社区，通过扫码活动入口进入查看自己的...H5 报告。...活动 1 「分享有礼」 参与资格：所有社区用户 活动时间：2023.1.16-2023.1.31 参与方式： 1、在朋友圈晒出腾讯云开发者社区 2022 年度回顾活动（海报、H5截图、直接分享H5均可）...活动时间：2023.1.16-2023.1.31 参与方式： 1、符合活动参与资格的创作者可以联系腾讯云开发者社区作者助理（微信号：yun_assistant）申请新春粉丝福利礼包； 2、福利礼包包含社区定制随机礼品...特别注意：以上活动禁止作弊，如有发现，回收获奖资格，不予发放奖品，同时作弊者将被腾讯云开发者社区永久拉黑。
2020年，腾讯云开发者社区总共举办了大大小小近30场活动。...2020年，腾讯云开发者社区以2019腾讯云开发者社区创作者年度总结暨新年活动 划出一个新的开始，以圣诞活动 和杂货摊第二季 落下一个完美的句号。...腾讯云开发者社区在2021年1月14号发布了《2020腾讯云开发者社区创作者年度总结》，各位创作者大大可以在2021年1月14号之后登录腾讯云开发者社区，通过活动入口进入查看自己的H5报告！...- 2021.1.31 参与方式： 1、在朋友圈晒出自己的年度总结（海报、H5截图、直接分享H5均可）或获奖礼品； 2、所有分享文案必须包括【腾讯云开发者社区】； 3、将分享截图反馈给腾讯云开发者社区作者助理...活动时间：2021.1.14 - 2021.1.25 参与方式： 1、符合活动参与资格的创作者可以联系腾讯云开发者社区作者助理（微信：juxiaoka66）申请新春粉丝福利礼包； 2、福利礼包包含社区定制随机礼品
1.css实现自动隐藏scroll滚动条但不影响滚动功能 谷歌内核webkit .container::-webkit-scrollbar { disp...
这几天闲着没事就捣鼓了下h5直播项目，运用到了html5+css3+jquery+iscroll+wlsPop等技术进行架构开发，解决了直播界面聊天键盘撑起问题，新增了动画消息提示及礼物。...好吧，反正最近这段时间稍微比较清闲，趁着这个机会，在空余时间撸了一个h5仿陌陌直播项目。...h5直播webapp，主要实现的内容如下： [004-360截图20181104095737443.png] 005-360截图20181104095812016.png 006-360截图20181104100100390
一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。...活动宣传页面分析 以imweb conf的第一屏为例，如下图： 现在对里面的元素布局进行一个分析： 一个全屏的背景图 ”往届回顾“定位在左上(left, top)，IMWeb.io 文字及向上箭头定位为中下...function(event) { document.documentElement.style.fontSize = window.innerHeight/10 + "px"; }); 总结 活动宣传页的布局说到底就是要解决如下几个问题
本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载 一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了...活动宣传页面分析 以imweb conf的第一屏为例，如下图： ?...function(event) { document.documentElement.style.fontSize = window.innerHeight/10 + "px"; }); 总结 活动宣传页的布局说到底就是要解决如下几个问题
运营大促就是根据不同产品策略目标，对多个产品设计不同的创意玩法及套餐方案，集成整合进行大规模的限时售卖活动（如：新春大促、618年中大促、双11大促等活动），为业务及品牌提供明确、连续、一致的销售增长，...运营大促设计难点 运营一般每年都会进行三场大促活动推广：新春、618、双11，而每期大促都需要不同的策略玩法去实现运营目标，给我最大的感触有以下两点： a）设计周期短 大促设计包含：1 个主会场 + 4...高效提升UI开发及前端开发搭建时间，并保证整个大促的视觉风格。 5....高效延展 大促并不是做完主会场和分会场视觉工作就结束了，在上线之前，还需要延展一系列的物料设计，如：官网首屏推广、友商渠道推广、H5 活动推广、分享推广等，不同渠道推广的规格不同，要求也不同。...一些小故事 在 2019 年末的时候，运营团队就开始了新春大促设计，加上UI开发历时两个月。
H5做的页面确实超级漂亮。但 为了在同事朋友面前装一下，还是要熟悉一下的。然后就可以告诉他们：不就是CSS3新增的那几个动画属性，在加上一下JS的东西嘛，不难！^_^ 昨天看了一下午的一个H5。...然后就是 还会有一些背景音乐控制、个别的还存在视频(不用担心，都是H5提供的接口，需要使用时 查看一下文档就差不多)；然后就是 一些页面之间的 过度、这部分 可能会用到 缩放、透明度转换、以及简单地动画效果...// 下面的 代码片段 是从 一个手机H5页面获取的，是不是发现啥了 function startLoading() { // simulate loading something..
系统 总结 ---- 前言 随着移动端H5需求场景越来越多，例如微信公众号中H5页面的开发，APP中内嵌H5页面等，移动端H5开发基础知识和技巧是前端开发工程师必备的技能~ ---- 一、移动端屏幕相关概念...CSS像素 web开发的最小单位，一个CSS像素在移动设备上最终会转成物理像素去呈像 一个CSS像素占用多少个物理像素，取决于【设备特性】、【用户缩放行为】 3....在PC web开发中无意义，无此概念。 4. 位图像素 1个位图像素对应一个设备独立像素，图片才能完美清晰的展现 5....理解了这些基础概念，才能掌握移动端H5开发技巧~ 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151992.html原文链接：https://javaforall.cn
一直以来，游戏开发都是把前沿技术运用到极致的媒介，H5游戏也不例外，这篇文章会从带你从浅入手，深入H5游戏开发的世界。...我们在H5开发初期的时候，进行了各种尺寸的设计稿尝试，比如1倍的（320X480）、2倍的（640X1136）、3倍的（1242X2280）像素。最终得出的试验结果是。...2.2、资源的加载 区别于普通的网页的开发，H5游戏需要大量的视觉听觉素材，并且用户的网络的带宽有限。当你使用了很多的图片、声音、视频以及媒体文件的时候，用户会花费一些时间等待浏览器从服务器下载。...5、结尾 当试着用百度搜索了一些“H5游戏开发”之后，发现网上教程很多，什么“45分钟学会H5游戏开发”，“100行代码做个H5游戏”比比皆是，于是就改了主意，从另一角度来阐释游戏开发。...H5游戏开发的思路大都是来自于Flash，Flash有一套现成的开发流程，把它的思想理解之后，对于H5游戏开发好处多多。再次把焦点回到市场上来，“今年将是H5游戏的元年！”
在上一期的“H5 游戏开发”教程中，猫哥介绍了如何通过 Whistle 工具对 Egret 文档进行资源修复和搜索增强。...Egret 官方为开发者和设计师提供了丰富的系列工具产品，帮助提升游戏开发体验和效率。...Egret Live Reload 配置 在进行 Web 项目开发时，很多时候我们需要一边编写代码，一边刷新预览页面的呈现效果，H5 游戏开发也不例外。...4.2 添加 .whistle.js 配置 代理配置成功后，我们在游戏项目根目录新建 .whistle.js 文件，其内容如下： （注：本配置中包含了 Egret 文档增强功能，具体参看“H5 游戏开发...以上是搭建 Egret 开发环境的全部内容。在下一期，猫哥将会介绍 H5 游戏引擎的技术实现原理，希望对大家理解游戏开发有所帮助，感谢关注：）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
