- 综合排序
- 最热优先
- 最新优先
- 来自专栏python3
H5、CSS3、Mui开发实例
前言 因进度需要，所以本人从一个服务端、架构暂时变成了一个前端开发者！ 使用到的技术 html5、css3、mui 首页效果如下 ? 接着是3个列表
论坛
更多</span 最后还是决定使用H5的标签来做 2、音乐播放、同样要兼容2种类型的设备，所以无奈自己写了一个Audio,效果如下 --信息-->择天记.mp3
<!76210发布于 2020-01-08来自专栏Hello worldH5开发笔记
window.scrollTo(0, top) // 回到原先的top } } 参考地址：https://juejin.im/post/5a27cad56fb9a045186a9d94 3.
96110发布于 2021-01-06来自专栏h5h5直播webapp项目开发|h5直播案例
这几天闲着没事就捣鼓了下h5直播项目，运用到了html5+css3+jquery+iscroll+wlsPop等技术进行架构开发，解决了直播界面聊天键盘撑起问题，新增了动画消息提示及礼物。 好吧，反正最近这段时间稍微比较清闲，趁着这个机会，在空余时间撸了一个h5仿陌陌直播项目。 h5直播webapp，主要实现的内容如下： [004-360截图20181104095737443.png] 005-360截图20181104095812016.png 006-360截图20181104100100390 = rndObj.length, num = Math.floor(Math.random() * len); wcTips({ selector: 'body', id: 'wcTips3'
8.9K83发布于 2018-11-04来自专栏Java比较H5开发与安卓开发
比较H5开发与安卓开发 1. 项目结构对比 H5开发项目结构： 在H5开发中，项目结构相对简单，通常包含HTML、CSS和JavaScript文件。 android:layout_below="@id/textView" android:layout_marginTop="16dp" /> </RelativeLayout> 3. 网络请求对比 H5开发的网络请求： 在H5开发中，网络请求通常使用JavaScript中的XMLHttpRequest对象或者更现代的fetch API。 多线程处理对比 H5开发的多线程处理： 在H5开发中，JavaScript是单线程执行的，但通过Web Workers可以实现在后台运行脚本。 总结与学习资源 H5开发与安卓开发的总结： 项目结构和语言差异： H5开发通常使用HTML、CSS、JavaScript，项目结构相对简单。
94110编辑于 2025-01-21来自专栏若是烟花移动端H5开发入门
零、一些资料 ---- 1. http://www.w3school.com.cn/h.asp 2. http://www.imooc.com/learn/33 # 感觉这个还是有些难度的 H5做的页面确实超级漂亮。但 为了在同事朋友面前装一下，还是要熟悉一下的。然后就可以告诉他们：不就是CSS3新增的那几个动画属性，在加上一下JS的东西嘛，不难！^_^ 昨天看了一下午的一个H5。 然后就是 还会有一些背景音乐控制、个别的还存在视频(不用担心，都是H5提供的接口，需要使用时 查看一下文档就差不多)；然后就是 一些页面之间的 过度、这部分 可能会用到 缩放、透明度转换、以及简单地动画效果 // 下面的 代码片段 是从 一个手机H5页面获取的，是不是发现啥了 function startLoading() { // simulate loading something.. CSS3 新增动画、CSS3新增动画、CSS3新增动画（the point） 先这样吧
2.5K20发布于 2020-07-28来自专栏腾讯大讲堂的专栏H5游戏开发指南
一直以来，游戏开发都是把前沿技术运用到极致的媒介，H5游戏也不例外，这篇文章会从带你从浅入手，深入H5游戏开发的世界。 我们在H5开发初期的时候，进行了各种尺寸的设计稿尝试，比如1倍的（320X480）、2倍的（640X1136）、3倍的（1242X2280）像素。最终得出的试验结果是。 也就是说一个完整的H5游戏，至少有3个页面不可或缺，就是加载页、游戏页、结果页。由此也可以延伸出多个页面，比如开始页，分享页等。 ? 3、理解游戏 3.1、认识phaser 对于一款游戏来说，框架就是它的基石。好的框架能是开发者利器，能够帮助开发者做出强有力的，跨浏览器的游戏，能给广大玩家带来更精致的作品。 H5游戏开发的思路大都是来自于Flash，Flash有一套现成的开发流程，把它的思想理解之后，对于H5游戏开发好处多多。再次把焦点回到市场上来，“今年将是H5游戏的元年！”
5.3K112发布于 2018-02-13来自专栏全栈程序员必看移动端H5开发基础
前言 随着移动端H5需求场景越来越多，例如微信公众号中H5页面的开发，APP中内嵌H5页面等，移动端H5开发基础知识和技巧是前端开发工程师必备的技能~ 一、移动端屏幕相关概念 1. 屏幕分辨率 横纵向上的像素点（物理像素）数（个数），1px=1个像素点，也称物理像素，例如iphone6的屏幕分辨率为：750*1336 3. CSS像素 web开发的最小单位，一个CSS像素在移动设备上最终会转成物理像素去呈像 一个CSS像素占用多少个物理像素，取决于【设备特性】、【用户缩放行为】 3. var visual = window.innerWidth 视觉视口，接近全部支持 3. 理解了这些基础概念，才能掌握移动端H5开发技巧~ 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151992.html原文链接：https://javaforall.cn
2.6K30编辑于 2022-08-31来自专栏猫哥学前班H5 游戏开发 2：搭建 Egret 开发环境
在上一期的“H5 游戏开发”教程中，猫哥介绍了如何通过 Whistle 工具对 Egret 文档进行资源修复和搜索增强。 在实际的游戏开发过程中，Debugging 断点调试用的不多。更多时候，我们需要确认游戏 UI 元素的层级和布局渲染是否正确。这就需要用到 Egret Inspecter Chrome 扩展。 3. Egret Live Reload 配置 在进行 Web 项目开发时，很多时候我们需要一边编写代码，一边刷新预览页面的呈现效果，H5 游戏开发也不例外。 4.2 添加 .whistle.js 配置 代理配置成功后，我们在游戏项目根目录新建 .whistle.js 文件，其内容如下： （注：本配置中包含了 Egret 文档增强功能，具体参看“H5 游戏开发 以上是搭建 Egret 开发环境的全部内容。在下一期，猫哥将会介绍 H5 游戏引擎的技术实现原理，希望对大家理解游戏开发有所帮助，感谢关注：）
5.7K60发布于 2020-02-11来自专栏用户7603185的专栏H5直播源码是什么？H5直播源码如何开发？
H5直播源码是什么？ H5直播也有着一套完整的直播系统，含视频录制端、视频播放端、视频服务器端。 H5直播，推流还是需要移动端或者摄像头，H5直播源码提供更多的依旧是观看，其实与传统直播系统是差不多的。 H5直播源码具有怎样的优势？ 做品牌宣传的朋友都知道，H5是一个重要的表现方式。 H5直播源码开发中的WebRTC，主要有以下几个优点： 具有良好的通用性，几乎在任何平台都可以正常使用。 实际的直播和用户播放的直播会有10秒左右或者更高的延迟，这一点对于后面开发比较重要，一定要注意这个点。 怎么用H5直播源码开发直播功能 直播一共有三种状态：直播前，直播中，结束。 针对每个状态我们肯定会有不同的显示，这三种状态可以是三个页面，相互切换，或者一个页面，控制页面相关隐藏和显示。
2.7K20发布于 2021-03-04来自专栏玩转全栈原生app开发与h5开发体验对比
从移动客户端转h5开发这一个月左右以来，给我最大的感触就是两者之间本质没有任何区别，为了证明我说的这一点，我将用移动客户端来类比h5，来"证明"我说的两者没有任何本质区别。 h5：用css写一个动画，使用class丢该这个dom节点，但本质上还是对这个view做了一些什么。 当然，从数据的传递上来看： 原生app：在intent中放一些参数可以传递过去，回来的时候也可以通过intent携带，参考startActivityForResult.... h5：h5传递参数到下一个页 h5：h5也有自己的页面栈，通过history来管理回退或者前进。 而h5似乎就没有这方面的限制了，随改随修，立马上线。
3.3K91发布于 2019-08-02来自专栏jQuery每日经典用于H5的移动开发框架
用于H5的移动开发框架 今天给大家介绍10款有关HTML5移动开发APP开发框架,这几款框架都是比较优秀的移动 Web 开发框架，能够帮助开发者更加高效的开发移动Web应用。. 十款移动APP开发框架 1.jquery mobile框架 2.bootstrap框架 3.ionic框架 4.Mobile Angular UI框架 5.Intel XDK框架 6.Appcelerator 3 ionic框架 Ionic 是一个强大的 HTML5 应用程序开发框架，可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。 4 Mobile Angular UI框架 Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。 控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 流畅体验 • 下拉刷新 为实现下拉刷新功能，大多H5
7.3K10编辑于 2022-01-20来自专栏全栈程序员必看H5移动端开发学习总结
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。 viewport（视口） ###3个视口### layout viewport（布局视口）:CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。 CSS像素:px(设备独立像素) 逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript 当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（33）个设备像素显示1个CSS像素。 但是当屏幕超过一定的尺寸以后还继续显示h5页面的话会给用户带来不好的体验。因此，我们需要给页面设置最大的宽度和最小宽度。
1.7K20编辑于 2022-08-31来自专栏APP开发H5 APP开发框架及特点
H5 APP开发框架，是利用HTML5技术构建跨平台移动应用程序的工具集。它们简化了开发流程，使得开发者能用Web技术（HTML、CSS、JavaScript）创建出接近原生应用体验的应用。 以下是一些常见的H5 APP开发框架及其特点。常见H5 APP开发框架：Ionic： 特点： 基于Angular、React或Vue.js，提供丰富的UI组件。 适用场景：适用于开发注重性能和原生体验的移动应用。MUI： 特点： 最接近原生开发的H5框架实例。 提供了丰富的组件和优秀的适配能力。 让开发者能够在Web上，高效的构建高质量的应用。 适用于开发适配不同屏幕尺寸的Web应用。 拥有庞大的社区和丰富的资源。 适用场景：适用于开发响应式Web应用。H5 APP开发框架的特点：跨平台： 一套代码，多平台运行，降低开发成本。 开发效率高： 利用Web技术，开发周期短。更新迭代快： 无需应用商店审核，热更新方便。技术栈成熟： Web技术生态完善，开发者资源丰富。灵活性强： 可根据需求选择合适的框架和技术。
88410编辑于 2025-03-12来自专栏互联网杂技H5动画开发快车道
前言 以往做一些H5的运营项目，都是动画设计师使用Animate cc（原来的Flash）先设计好动画原型，然后交给我们UI开发来实现。 做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的，而且还要高质量的还原动画设计师设计好的动画，来回沟通成本也非常高。 经过一段时间的摸索，发现AnimateCC（就是原来的Flash）可以导出canvas动画，而且是基于createjs这个开发轻量级游戏的js库的，非常适合用来做移动端的一些h5动画。 比如下面这一页动画，如果使用传统的html css3的动画开发或者是canvas方式来硬写代码来实现，切图加上动画开发没有一天应该是搞不定的；而使用AnimateCC导出配合自己写一点点代码，一两个小时就可以搞定 3、素材规范 少用矢量多用位图，Text shape都算矢量（如果是用 flashCC或者animateCC做的，在里面就直接把字和矢量图转成位图）。
5.6K80发布于 2018-04-03来自专栏javascript艺术用于H5的移动开发框架
用于H5的移动开发框架 ? 今天给大家介绍10款有关HTML5移动开发APP开发框架,这几款框架都是比较优秀的移动 Web 开发框架，能够帮助开发者更加高效的开发移动Web应用。. ? 3 ionic框架 Ionic 是一个强大的 HTML5 应用程序开发框架，可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。 4 Mobile Angular UI框架 Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。 Bootstrap 3 2. AngularJS Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。 控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 流畅体验 • 下拉刷新 为实现下拉刷新功能，大多H5
7.5K40发布于 2021-05-28来自专栏万物皆可ServerlessFlutter与原生H5混合开发
我们知道Flutter可以跟原生Android或iOS混合开发，那Flutter能不能与原生H5混合开发呢？ 答案是：Yes! ~tplv-k3u1fbpfcp-zoom-1.image] 嗯，现在是不是有点感觉了✌️ 但还差点东西，现在Flutter跟原生H5少了点交互，下面我们来处理下Dart与JS互调 [b44a0256bf9249ddb79c0924a816587e ~tplv-k3u1fbpfcp-zoom-1.image] [2b3d33e8d9cd44708570b4158451b6fc~tplv-k3u1fbpfcp-zoom-1.image] [c600d6575dde4229990a5a022eff67b9 h5中的组件嵌入到Flutter中，无限套娃～ [7009fdb32c47433f8e935c05ec5b2255~tplv-k3u1fbpfcp-zoom-1.image] [8a125d032e934ca2bb90d977ac236017 /js)* Dart原生H5开发 Dart不仅可以与原生JS互调，也可以拿来写原生网页应用。
4K00发布于 2021-02-21来自专栏技术社区H5与原生混合开发总结
一、引言 本文主要针对H5与原生混合开发中的交互问题进行讨论，当然，这仅仅是鄙人的见解，求同存异。 本文主要针对以下问题进行总结： 如何实现JS与Andriod的交互？ 先来个具体场景：比如说我们项目中有个评论功能，这个功能是用H5写的，然后每次评论时可以选择数量小于3张的评论图片，附带文字上传至服务器。 image/jpg;base64," + base64Data }); } 不过这里依然可能存在一些问题，比如内存溢出，因为图片本身可能很大，尤其是使用相机直接拍照取图的情况，一张图片可能会有3~ 五、总结 本文基于实际项目，介绍了混合开发中JS与原生交互的实现，然后以一个小实验测试了含WebView的Activity的启动速度，优化，然后测试优化后的启动速度，接着介绍了H5分模块更新的逻辑，最后整理了一套工具集 使用H5混合开发确实能够提升开发速度，但是实际体验确实一般，适合非常追求开发速度的场景。
1.8K20编辑于 2022-06-17来自专栏APP开发H5 APP开发框架的对比
在开发H5 APP时，选择合适的框架对开发效率和用户体验至关重要。以下是几个主流H5 APP开发框架的对比。 部分原生功能需额外开发。2.Flutter特点: 由Google开发，使用Dart语言，提供丰富的UI组件。优点:高性能，渲染速度快。跨平台支持（iOS、Android、Web、桌面）。 热重载提升开发效率。缺点:Dart语言相对小众。应用体积较大。3.Ionic特点: 基于Web技术（HTML、CSS、JavaScript），支持多种前端框架。优点:开发门槛低，适合Web开发者。 6.Weex特点: 由阿里巴巴开发，使用Vue.js构建跨平台应用。优点:Vue.js开发者易上手。跨平台支持。性能接近原生。缺点:社区和资源较少。文档和工具链不够完善。 Ionic 和 Framework7 适合Web开发者快速构建应用。Vue Native 和 Weex 适合Vue.js开发者。选择框架时需根据项目需求、团队技能和长期维护考虑。
1K10编辑于 2025-02-25来自专栏陶士涵的菜地H5客服系统开发实现
gofly.v1kf.com 作为一款基于Golang开发的H5客服系统的开发者，今天我想与大家分享我们系统的登录机制设计思路和实现细节。 系统概述 我们的H5客服系统主要包含两个入口： 直接访问入口：https://域名/h5（通常不建议直接使用） 微信公众号入口：通过模板消息通知进入（推荐方式） 为什么设计两种登录方式 } } c.String(200, "success") } 3. 这种设计充分利用了微信生态的能力，实现了： 无感登录：用户无需记忆账号密码 即时通讯：通过模板消息实现实时提醒 身份绑定：自动关联客服与用户关系 作为开发者，我们在 希望这篇分享对正在开发类似系统的同行有所启发。如果你有任何问题或建议，欢迎在评论区交流！
1.6K10编辑于 2025-08-17来自专栏KrryblogH5 和 CSS3 新特性
博客地址：https://ainyi.com/52 H5 新特性 语义化标签：header、footer、section、nav、aside、article 增强型表单：input 的多个 type 新增表单元素 新特性 选择器 背景和边框 文本效果 2D/3D 转换 动画、过渡 多列布局 用户界面 选择器 :last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 ，包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变) 详看：https://www.ainyi.com/krry_project 2D/3D 转换 2D 转换 transform:matrix(0.866,0.5,-0.5,0.866,0,0); 3D 转换 rotateX()：元素围绕其 X 轴以给定的度数进行旋转。 ；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放） animation-play-state: running | paused ：控制元素动画的播放状态 多列布局 通过CSS3，
2.9K10发布于 2018-10-15腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号