展开

关键词

H5开发在QQ钱包的应用实践

作为QQ钱包团队的前端工程师,我们是如何通过自研nodejs服务和利用service worker实现H5页面秒开?让我们来探讨一下QQ钱包H5应用开发实践。 ? QQ钱包众多H5应用 2015年我们正式成立了钱包团队,从刚开始QQ钱包只有一个钱包入口,一直发展到今天,已经开发出了话费充值、卡券、积分、企鹅网吧、城市服务以及智慧校园等一系列服务。 QQ钱包H5应用开发挑战 接入层服务器压力大 QQ钱包H5应用日均pv在1000w以上,推广期pv可达上亿的级别,需要解决服务器性能优化问题。 Service Worker ServiceWorker是浏览器为了解决之前AppCache在管理离线缓存上的不足,而提供的在Web应用程序与服务器之间的代理层。 总的来说,Service Worker就是一段在浏览器后台自动运行的程序,负责协助浏览器,管理和响应所有从Web应用发出的请求,以达到更好的离线体验。

55490

uni-app开发微信小程序和h5应用

最近,有个需求需要开发H5应用和微信小程序。如果针对不同的平台开发自己的一套代码,那将是一件很糟糕的事情:如果下次需要兼容支付宝小程序、快应用,那工作量随着平台的添加而快速增加。 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台 选择uni-app => 填写项目的名称 => 选择项目的存放位置 => 选择uni-app项目模版 => 点击创建 开启h5和微信小程序 开启h5: 开启微信小程序: 示例:是Mac配置 配置微信开发者工具路径 -- #ifdef H5 --> <text>h5 content</text> <! h5: 可参考官网发布为H5 最后在项目中生成dist文件。

18420
  • 广告
    关闭

    腾讯云校园大使火热招募中!

    开学季邀新,赢腾讯内推实习机会

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    App、H5、PC应用多端开发框架Flutter 2发布

    在window电脑的应用程序和mac电脑的应用程序。 现在Flutter 2 专门面向了web端(电脑浏览器网页、手机浏览器h5页面)、当然小程序这类框架慢慢兼容Flutter框架也会变成大势所趋。 今天,我们要宣布的是Flutter 2:它是对Flutter 的一个重大升级,它使开发人员能够为任何平台创建漂亮、快速和可移植的应用程序。 我们的目标是从根本上改变开发人员对构建应用程序的想法,不是从你目标的平台开始,而是从你想要创建的体验开始。Flutter 让你手工制作美丽的体验,你的品牌和设计走到了最前沿。 健全的空安全性有可能消除可怕的空引用异常,在开发和运行时提供保证,即只有在开发人员明确选择的情况下,类型才能包含空值。 如果您还没有尝试Flutter,我们认为您会发现它是您应用程序开发体验的一个重大升级。

    29830

    H5开发笔记

    25710

    h5直播webapp项目开发|h5直播案例

    这几天闲着没事就捣鼓了下h5直播项目,运用到了html5+css3+jquery+iscroll+wlsPop等技术进行架构开发,解决了直播界面聊天键盘撑起问题,新增了动画消息提示及礼物。 好吧,反正最近这段时间稍微比较清闲,趁着这个机会,在空余时间撸了一个h5仿陌陌直播项目。 h5直播webapp,主要实现的内容如下: [004-360截图20181104095737443.png] 005-360截图20181104095812016.png 006-360截图20181104100100390

    6K83

    H5游戏开发指南

    一直以来,游戏开发都是把前沿技术运用到极致的媒介,H5游戏也不例外,这篇文章会从带你从浅入手,深入H5游戏开发的世界。 我们在H5开发初期的时候,进行了各种尺寸的设计稿尝试,比如1倍的(320X480)、2倍的(640X1136)、3倍的(1242X2280)像素。最终得出的试验结果是。 就是把现实世界的牛顿定律,应用到虚拟世界当中去。物理引擎是独立于游戏引擎存在的一个库。物理引擎的种类很多,例如box2d,cocos,three等,各有优劣,各有擅长。 5、结尾 当试着用百度搜索了一些“H5游戏开发”之后,发现网上教程很多,什么“45分钟学会H5游戏开发”,“100行代码做个H5游戏”比比皆是,于是就改了主意,从另一角度来阐释游戏开发H5游戏开发的思路大都是来自于Flash,Flash有一套现成的开发流程,把它的思想理解之后,对于H5游戏开发好处多多。再次把焦点回到市场上来,“今年将是H5游戏的元年!”

    2.3K101

    移动端H5开发入门

    H5做的页面确实超级漂亮。但 为了在同事朋友面前装一下,还是要熟悉一下的。然后就可以告诉他们:不就是CSS3新增的那几个动画属性,在加上一下JS的东西嘛,不难!^_^ 昨天看了一下午的一个H5。 然后就是 还会有一些背景音乐控制、个别的还存在视频(不用担心,都是H5提供的接口,需要使用时 查看一下文档就差不多);然后就是 一些页面之间的 过度、这部分 可能会用到 缩放、透明度转换、以及简单地动画效果 // 下面的 代码片段 是从 一个手机H5页面获取的,是不是发现啥了 function startLoading() { // simulate loading something..

    44820

    H5 游戏开发 2:搭建 Egret 开发环境

    在上一期的“H5 游戏开发”教程中,猫哥介绍了如何通过 Whistle 工具对 Egret 文档进行资源修复和搜索增强。 Egret Live Reload 配置 在进行 Web 项目开发时,很多时候我们需要一边编写代码,一边刷新预览页面的呈现效果,H5 游戏开发也不例外。 我们可以使用以下任意一种方式,将浏览器代理设置为 Whistle 服务地址 127.0.0.1:8899 使用 Chrome SwitchyOmega 插件设置浏览器代理; 使用 Proxifier 配置指定应用程序的代理服务 4.2 添加 .whistle.js 配置 代理配置成功后,我们在游戏项目根目录新建 .whistle.js 文件,其内容如下: (注:本配置中包含了 Egret 文档增强功能,具体参看“H5 游戏开发 以上是搭建 Egret 开发环境的全部内容。在下一期,猫哥将会介绍 H5 游戏引擎的技术实现原理,希望对大家理解游戏开发有所帮助,感谢关注:)

    1.5K60

    H5直播源码是什么?H5直播源码如何开发

    H5直播源码是什么? H5直播也有着一套完整的直播系统,含视频录制端、视频播放端、视频服务器端。 H5直播,推流还是需要移动端或者摄像头,H5直播源码提供更多的依旧是观看,其实与传统直播系统是差不多的。 H5直播源码具有怎样的优势? 做品牌宣传的朋友都知道,H5是一个重要的表现方式。 H5直播源码开发中的WebRTC,主要有以下几个优点: 具有良好的通用性,几乎在任何平台都可以正常使用。 实际的直播和用户播放的直播会有10秒左右或者更高的延迟,这一点对于后面开发比较重要,一定要注意这个点。 怎么用H5直播源码开发直播功能 直播一共有三种状态:直播前,直播中,结束。 针对每个状态我们肯定会有不同的显示,这三种状态可以是三个页面,相互切换,或者一个页面,控制页面相关隐藏和显示。

    47620

    H5(drag,百度地图使用,requestFullscreen,H5应用缓存)

    document.webkitCancelFullScreen){ document.webkitCancelFullScreen(); } } </script> 7.H5应用缓存 --HTML5 应用缓存--> <!

    45510

    原生app开发h5开发体验对比

    从移动客户端转h5开发这一个月左右以来,给我最大的感触就是两者之间本质没有任何区别,为了证明我说的这一点,我将用移动客户端来类比h5,来"证明"我说的两者没有任何本质区别。 当然从动效上来看的话: 原生app:原生需要写一个动效函数,然后应用到这个view上。 h5:用css写一个动画,使用class丢该这个dom节点,但本质上还是对这个view做了一些什么。 当然,从数据的传递上来看: 原生app:在intent中放一些参数可以传递过去,回来的时候也可以通过intent携带,参考startActivityForResult.... h5h5传递参数到下一个页 h5h5也有自己的页面栈,通过history来管理回退或者前进。 而h5似乎就没有这方面的限制了,随改随修,立马上线。

    1.9K91

    用于H5的移动开发框架

    用于H5的移动开发框架 今天给大家介绍10款有关HTML5移动开发APP开发框架,这几款框架都是比较优秀的移动 Web 开发框架,能够帮助开发者更加高效的开发移动Web应用。. Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 5 Intel XDK框架   Intel发布了其首个版本基于web的编程工具,可帮助开发者为Android和iOS开发移动应用开发者可用此软件开发基于HTML5的应用,并 用于移动设备中。 6 Appcelerator Titanium框架   Titanium 是一个跟手机平台无关的开发框架,用来开发具有本地应用效果的Web应用

    13410

    H5动画开发快车道

    前言 以往做一些H5的运营项目,都是动画设计师使用Animate cc(原来的Flash)先设计好动画原型,然后交给我们UI开发来实现。 做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的,而且还要高质量的还原动画设计师设计好的动画,来回沟通成本也非常高。 那有没有一种高效的方法来改善这种流程,提高开发效率的同时还能完成高品质的动画呢? 经过一段时间的摸索,发现AnimateCC(就是原来的Flash)可以导出canvas动画,而且是基于createjs这个开发轻量级游戏的js库的,非常适合用来做移动端的一些h5动画。 比如下面这个小的h5动画,使用上面的animate cc和createjs两天就可以搞定: 雪碧图功能 如果碰到图片很多的项目怎么办呢?

    3.5K80

    用于H5的移动开发框架

    用于H5的移动开发框架 ? 今天给大家介绍10款有关HTML5移动开发APP开发框架,这几款框架都是比较优秀的移动 Web 开发框架,能够帮助开发者更加高效的开发移动Web应用。. ? Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 5 Intel XDK框架   Intel发布了其首个版本基于web的编程工具,可帮助开发者为Android和iOS开发移动应用开发者可用此软件开发基于HTML5的应用,并 用于移动设备中。 6 Appcelerator Titanium框架   Titanium 是一个跟手机平台无关的开发框架,用来开发具有本地应用效果的Web应用

    34440

    Flutter与原生H5混合开发

    我们知道Flutter可以跟原生Android或iOS混合开发,那Flutter能不能与原生H5混合开发呢? 答案是:Yes! 给他做个遮罩层 [ca61dd3b340347d59670e5c70498db19~tplv-k3u1fbpfcp-zoom-1.image] 嗯,现在是不是有点感觉了✌️ 但还差点东西,现在Flutter跟原生H5 tplv-k3u1fbpfcp-zoom-1.image] [d333f4dff1344d6a8ffa192f7b5988cc~tplv-k3u1fbpfcp-zoom-1.image] 我们甚至可以把h5 tplv-k3u1fbpfcp-zoom-1.image] *PS:细节的东西我不再多讲,感兴趣的同学,可以自己去看下官方js库的文档( https://pub.flutter-io.cn/packages/js)* Dart原生H5 开发 Dart不仅可以与原生JS互调,也可以拿来写原生网页应用

    1.5K00

    H5与原生混合开发总结

    一、引言 本文主要针对H5与原生混合开发中的交互问题进行讨论,当然,这仅仅是鄙人的见解,求同存异。 本文主要针对以下问题进行总结: 如何实现JS与Andriod的交互? 如果存在多个H5模块包,如何实现模块包的完全更新与部分更新? 针对以上问题的,如何建立一个公用的工具集(框架?)? 遇到的问题及解决办法。 OK, 开始吧! 多模块包自动更新 支持多模块自动更新的目的是方便更新维护,减少用户升级所带来的流量开支,每个模块包之间可以是相互独立的,也方便于团队开发,仅需要和前端约定好文件目录即可。 五、总结 本文基于实际项目,介绍了混合开发中JS与原生交互的实现,然后以一个小实验测试了含WebView的Activity的启动速度,优化,然后测试优化后的启动速度,接着介绍了H5分模块更新的逻辑,最后整理了一套工具集 使用H5混合开发确实能够提升开发速度,但是实际体验确实一般,适合非常追求开发速度的场景。

    7820

    vuejs开发H5页面总结

    最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验。 之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。 有的设计师也许会偷懒,设计图上面没有任何的标注,如果我们边开发边量尺寸,无疑效率是比较低的。要么让设计师标注上,要么自食其力。 所以为了提高开发效率,可以使用px转化为rem的插件。 gulpfile.js如下: 开发过程使用gulp server命令,监听文件改动并使用livereload刷新;使用gulp命令进行打包。

    1.1K90

    H5 手机 App 开发入门:概念篇

    如果你开始学习手机 App 开发,就一定会听到 H5 这个词。它是目前的主流开发技术之一,容易上手,开发周期短、成本低、兼容传统 Web 开发。 一、H5 的含义 表面上看,手机 App 都是同样的东西,就是手机上的应用程序,点击图标就能运行,但是它们的底层技术不一样。按照开发技术,App 可以分成三大类。 真正理解 H5 开发,需要先搞清楚什么是原生 App、什么是 Web App,因为混合 App 是在它们的基础上诞生的。 二、原生应用 2.1 概念 原生 App 是专门为特定手机平台开发应用程序 ,无法在其他平台运行。一个手机软件如果要同时支持苹果手机和安卓手机,就需要为它们各写一个原生 App。 今天对于 H5 相关概念的介绍,就到这里为止,下一篇文章将介绍 H5 相关开发工具和框架。 (正文完)

    92451

    扫码关注腾讯云开发者

    领取腾讯云代金券