027 (H5*) react01

目录正文 1:创建Vue项目 1: 全局安装 vue-cli cnpm install --global vue-cli 2: 创建一个基于 webpack 模板的新项目 vue init webpack my-project 3: 这里需要进行一些配置,默认回车即可 This will install Vue 2.x version of the template. 4: cd my-project // 安装依赖 5: cnpm install // 运行项目 6: cnpm run de…

027 H5常用标签

只记录一下比较有趣的知识点. 一:新标签 1.选项列表datalist <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" list="sg&quo…

旺财速啃H5框架之Bootstrap（五）

在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootstrap.css样式,下面我们来学习常见的CSS操控内容篇幅.... 一.响应式图片基本样式: <img src="..." class="img-responsive" alt="响应式图片"> Bootstrap.css 937行 .…

旺财速啃H5框架之Bootstrap（四）

上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面.... 对于这样的网站,要做成自适应,那你得多花点精力了,当然我不讲这个... 所以这里肯定是对那种"列很规律"的网站,例如cnblogs首页的版式,分左,中,右由于中国传统艺术版本,或习惯什么的,很多东西都讲对称性,所以几乎所有网站都是很规律的,说多了,直接上(这里我只写主要CSS)…

H5单页面手势滑屏切换原理

H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面. <div id="v…

快速构建H5单页面切换骨架

在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用程序,应用中所有的视图都包含在这个HTML页面中,并通过JavaScript控制相关视图的显示和隐藏,这种模式可以让用户在Web App感受Native App的速度和流畅.本篇文章的目的就是教你如何来快速的构建一个H5单页面切换骨架. 一. 页面设计在构建SPA应用时,首先要确定你的应用需要包含…

07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/dunitian/LoTHTML5/tree/master/LoTHTML5/4.HTML5定位定位类型 IP 定位优点任何位置都可用在服务器端处理缺点不精确,一般精确到城市运算代价大,可能出错代理的时候就可能定位出错了 GPS定位优点定位精准缺点定位时间长,耗电量大室内效果不好需要…

旺财速啃H5框架之Bootstrap（三）

好多天没有写了,继续走起在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学bootstrap? 流行?写网页快?还是其它什么的?说实话,如果写页面很熟练的人(牛人),根本不会用任何框架写,为什么呢,它们太臃肿了,谁写一个页面能把它所有的CSS都应该用上,所有的类都定义上呢?所以很多代码对于页面来说都是多余的,还好上线后,引入的都是资源库,如果你有代码精简强迫症,那估计你要重写(覆盖)一些东…

H5程序员如何利用cordova开发跨平台应用

什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码,简而言之,cordova就是连接H5和原生系统的桥.通过cordova就可以在H5页面上开发出类似原生APP的应用,而且还是跨平台的. 在windows上如何搭环境搭 1. 首先安装node.js. 不要被这个no…

H5项目开发分享——用Canvas合成文字

以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与在PS中打入的字非常接近,毫无违和感. 前面一段时间也在研读JavaScript设计模式相关的知识,这次正好小小的实践一下,但对设计模式的理解还不是很深. 一.项目总览总共就两张页面,第一张是选择性别,输入名字,第二张页面是合成文字,并展示出来. 虽然页面很简单,但在做这个项目的时候,涉及到了很多方面…

【腾讯Bugly干货分享】H5 视频直播那些事

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师.每周都会举行嘉宾分享,话题讨论等活动. 本期,我们邀请了腾讯SNG Web前端开发工程师——吕鸣,为大家分享<H5 视频直播那些事>. 如何加入 Dev Club? 移动端开发经验 >= 2 年,微信扫描下方群管理微信二维…

H5嵌入原生开发小结----兼容安卓与ios的填坑之路

一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的坑.主要分UI展示,键盘,输入框等等.解决bug最苦恼的问题不是没有解决方案,而是你没有找到真正的原因.再就是现象难以重现,每次都要发布代码,然后到手机app中去测试,模拟.这些地方会耗费大量的精力. 一.UI相关 1.安卓4.4以下不支持fixed布局. fixed布局的作用之一就是在手机键盘弹起…

video.js--很赞的H5视频播放库

video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/ git&demo :http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip 看下默认例子: <head> <title>Video.js | HTML5 Video Player</title> <…

微信硬件H5面板开发(一) ---- 调用openApi

微信硬件平台是微信推出连接物与人,物与物的IOT解决方案.也就是说可以通过微信控制各种智能设备.比如一些蓝牙设备.空调.电视等等. 我本身不懂硬件(虽然是电子信息专业),硬件是北航的两个研究生在弄,小团队里我负责开发H5自定义面板,刚开始看官方文档各种迷糊,对于jssdk.jsapi.Airkiss.openApi.直连SDK都不知道该用哪个做,官方论坛问问题基本上没结果,加了几个微信硬件群问问题,发现好些开发者和我一样,同一个问题,发到几个群里问,画面好心酸.给wxthings发邮件问,能回复…

H5拍照应用开发经历的那些坑儿

一.项目简介 1.1.项目背景:这是一个在移动终端创新应用的项目,用户在浏览器端(微信/手Q)即可完成与金秀贤的合影,希望通过这样一种趣味体验,引发用户的分享与转发的热潮. 1.2.系统要求:ios6-ios7.android3.0-android4.3.android4.4+(非webview内) 1.3.体验地址: 二.初步技术方案确定在项目前期首先启动了技术预演,确定初步技术方案(*非最终解决方案): 2.1.获取用户照片数据2.1.1.首先放弃了主动获取用户摄像头的getUserMed…

慕课网H5圣诞主题

继七夕之后,我又出了一个圣诞主题的课程.圣诞主题是基于HTML5+CSS+JS编写与实现的,同时也是七夕主题的故事延续.圣诞主题依旧延续着七夕主题设计的思路,引入了3个经典的场景页面,在每个场景中表述着不同的行为.实现上总结了之前七夕主题的一些经验与反馈,并在此之上加以优化与扩展.这个案例不算很难,但是把前端做动画的一些精髓已经讲透了.运用的技术基本就是H5+JS+CSS3,但是每个部分的实现都会有很多知识点的涉及,这里大体的总结下具体我来归纳下改良的技术方案与涉及到的知识点: 为了处理自适应…

H5+JS+CSS3 综合应用

慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新复习了下CSS3动画的知识点下面是一个简单的预览这个是一个比较综合的效果了,这个案例把前端做动画的一些精髓已经讲透了运用的技术基本就是H5+JS+CSS3,但是每个部分的实现都会有很多知识点的涉及这里大体的总结下自适应分辨率的问题可以采用的是JS+百分比布局处理通过合成"雪碧图"…

H5 Notes：PostMessage Cross-Origin Communication

Javascript中要实现跨域通信,主要有window.name,jsonp,document.domain,cors等方法.不过在H5中有一种新的方法postMessage可以安全实现跨域通信,并且使用简单. 要使用postMessage,首先得检查浏览器是否支持该方法,postMessage属于window对象,检测方法如下: if('postMessage' in window){ }else{ console.log('浏览器不支持postMessage'); } postMessag…

H5 Notes：Navigator Geolocation

H5的地理位置API可以帮助我们来获取用户的地理位置,经纬度.海拔等,因此我们可以利用该API做天气应用.地图服务等. Geolocation对象是我们获取地理位置用到的对象. 首先判断浏览器是否支持该对象 if('geolocation' in navigator){ navigator.geolocation.getCurrentPosition(success,fail,options); }else{ alert('浏览器不支持获取地理位置!'); } 获取用户地理位置getCurren…

h5应用缓存及收藏时Icon显示

h5应用实现离线缓存,加载后,断网仍然可以继续使用. 一.需求转行做h5,目前做赛道游戏,动手做了个赛道编辑器web版的,由于web版需要开启服务器才能使用,策划要想回家使用就要发布到外网服务器了,特麻烦了. h5 cache manifest 文件完美解决我的需求,让策划回家也能使用. 二.原理使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行…

用H5中的Canvas等技术制作海报

在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作--预览旋转合成> 这次有时间就实现一个功能稍微多点的海报. 一.概要第一屏第二屏第三屏总共有三屏,第一屏是选择图片,第二屏是合成图片,第三屏是显示结果图,可保存分享朋友圈. 页面内容不是很多,分析起来也比较简单. 1)每一屏的左右边距相同,上边距各不相同. 2)屏幕内的元素,大部分是居中,有些特…

H5图片裁剪升级版

前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更通用.下图是活动中裁剪的页面: 先来看看两个活动的不同: 1.原先的活动每次旋转只能90°,而此次活动可以任意角度旋转. 2.原先的活动每次旋转就会生成一段Base64数据,导致页面卡顿严重,而此次只有在裁剪的时候才生成图片. 以上两点是最大的不同,其它方面基本一致,如果碰到不明白的可以参考一下<海报制…

手动制作微信h5分享活动页面

现在网上有很多自动制作h5宣传页的网站,可以通过传图,点几下鼠标就可以制作一个集动画.生产二维码等各种功能于一身的h5微信宣传页.对于运营来讲,非常方便,没有技术门槛,不足之处就是只有特定的动画效果,而且生成的h5带有这个网站自己的logo也好,自己的打点代码也好,总之,看个人爱好啦~ 作为一个正在步入专业前端之列的专业前端工程师,怎么能不会手写这么一个活动页,不过这里面要注意的点还是很多的. 首先,自适应手机分辨率. 我们知道手机的种类特别多,分辨率也有很多种,更不用说长宽比了,有时候在iph…

H5实现本地预览图片

我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>UploadFile</title> </head> <body> <div> <img src="" id=&quo…

使用h5的history改善ajax列表请求体验

信息比较丰富的网站通常会以分页显示,在点“下一页”时,很多网站都采用了动态请求的方式,避免页面刷新.虽然大家都是ajax,但是从一些小的细节还是可以区分优劣.一个小的细节是能否支持浏览器“后退”和“前进“键.本文讨论两种方法,让浏览器可以后退和前进,或者说让ajax就像重定向到新页面一样拥有能够返回到上一页或者前进到下一页. 数据实现分页显示,最简单的做法是在网址后面加多个page的当数,点“下一页”时,让网页重定向到page+1的新地址.例如新浪的新闻网就是这么做的,通过改变网址实现:i…

H5天气查询demo（二）

最近刚好有空,学长帮忙让做个毕设,于是我提到了那个基于H5地理位置实现天气查询的方法,学长听了也觉得不错,于是就这个主题,扩展了一下,做了一个航班管理查询系统,为上次博客中提到的利用H5 api中的经纬度应用做了一个例子.这边也贴上部分代码简单提下思路. 首先网站框架:bootstarp+less+ajax(交互方法)+php+mysql 搭建在sae平台上,文章结束贴上demo地址 $(document).ready(function(){ $("#myCarousel").car…

利用H5和ChromiumWebBrowser构建应用

chromium是google chrome浏览器所采用的内核,最开始由苹果的webkit发展而出,由于webkit在发展上存在分歧,而google希望在开发上有更大的自由度,2013年google决定自己开发webcore的分支,叫做Blink引擎,而后google以BSD伯克利许可开源,BSD许可限制较为宽松,很多浏览器都是基于chromium开发的,比如,此后省略100字.google在原有基础上做了进一步的精简优化,并开发出v8 javascript引擎,2010年google收购了we…

H5 本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失. HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStora…

【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知

前言不知不觉来百度已有半年之久,这半年是996的半年,是孤军奋战的半年,是跌跌撞撞的半年,一个字:真的是累死人啦! 我所进入的团队相当于公司内部创业团队,人员基本全部是新招的,最初开发时连数据库都没设计,当时评审需求的时候居然有一个产品经理拿了一份他设计的数据库,当时我作为一个前端就惊呆了...... 最初的前端只有我1人,这事实上与我想来学习学习的愿望是背道而驰的,但既然来都来了也只能独挑大梁,马上投入开发,当时涉及的项目有: ① H5站点 ② PC站点 ③ Mis后台管理系统 ④ 各种百度…

移动站适配rel=alternate PC页和H5页适配标注

鉴于移动化大潮的汹涌和H5页的炫丽普及,百度针对PC页与H5页的跳转适配方式推出了最优方案:1.在pc版网页上,添加指向对应移动版网址的特殊链接rel="alternate"标记,这有助于百度发现网站的移动版网页所在的位置:2.同时在移动版网页上,添加指向对应pc版网址的链接rel="canonical"标记. 电脑端网站截图: 移动端网站截图: 如果你的网址是:pc版网址:http://pc_url移动版网址:http://mobile_url 那么此示例中的注释…

【027 (H5*) react01】的更多相关文章