无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-10-04 16:12 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

H5页检测手机是否安装app,Vim常用插件

H5 玩法知多少

2017/09/01 · HTML5 · 1 评论 · H5

原文出处: 大熊   

html5的发布让移动端web增添了很多新的能力,这些能力给我们带来了很多新的玩法,不知你知道了多少呢?下面我将结合案例罗列一些自H5发布以来出现的新玩法,给大家温故而知新。本文也适合大家在策划H5活动的时候作为参考,说不定在这儿就找到灵感了。

构思H5的玩法该从何入手呢?网上的H5五花八门,其玩法大多都可以归纳到基于传感器、基于触摸屏操作、基于画面呈现、基于内容这四类来考虑。它们既有基于其中一类来构思玩法,又有将多个类别组合起来创造更复杂丰富的玩法。与H5新能力相关的是前三种类型,本文也会从这三种类型进行展开,分别介绍一下各类型下有什么玩法,而基于内容的玩法主要是图文混排展示内容,答题类游戏等与内容强相关的玩法,实际上他们也会多多少少与另外三类搭上点关系的。

接下来你将会看到这些玩法:

基于传感器:

类别 玩法或适用场景
陀螺仪、重力感应 体感游戏、摇一摇、全景图/AR转换角度、转动手机制造视差效果
地理位置 提供周边生活服务、与运动结合、上班打卡功能、外勤人员的工作监控、类似QQ的AR红包和pokemon go玩法、展示附近的优惠和广告
人脸识别 体感游戏、将用户样貌与节日/游戏/电影等主题元素相结合进行宣传的场景、用户样貌与明星脸相似度测试、猜用户年龄、猜情绪、模拟化妆
webRTC 视频会议、视频聊天、在线教育、在线问诊等视频/音频通讯的场景

基于触摸屏操作:

类别 玩法或适用场景
全景交互 虚拟全景展示、身临其境的实景展示或活动现场展示、商品360度展示
多屏互动 朋友间合作/竞技游戏、你画我猜、一问一答、情侣互动、多个屏幕拼起来看视频、投屏应用、线下现场观众互动
单屏滚动 公司主页、产品介绍、报告总结、邀请函等展示类场景
手势操作 商品图片放大查看场景、图片拖拽/旋转等编辑场景、手势解锁、拼图游戏

基于画面呈现:

类别 玩法或适用场景
视频/动画展示 产品、节日、游戏、电影等宣传场景;内容比较丰富的场景
图片裁剪和形变 类似变形金刚、七巧板形式的图片转换效果展示场景

 

如果以场景为维度来展开推荐玩法,则可参考下图所示:

图片 1图片 2

接着我会逐一介绍一下这些玩法,读者也可以直接跳到感兴趣的部分去阅读。除上表外还有一些目前还不太能用的H5能力,如手机震动、光线传感器、距离传感器等,由于边幅原因,暂不作展开介绍,读者可以自行查找相关资料。部分案例如没有贴上二维码,是因为该案例已下线了。

H5页检测手机是否安装app 相关流程

2017/04/21 · HTML5 · 2 评论 · H5

原文出处: sunsmeill   

近期公司需要针对分享流程进行优化,其中一点就是前端H5检测是否安装应用,来进行不同的判断(下载或直接跳转到app中)。原理很简单:创建一个iframe去打开uri。如果打开app成功网页进入后台,再切换回来时间会超过2.5s。利用时间去检测。下面来看具体实现过程:

Vim常用插件——前端开发工具系列

2015/08/16 · HTML5 · vim, 插件

原文出处: AlloyTeam   

作为一名开发者,应该对编辑器之神Vim)与神之编辑器Emacs有所耳闻吧。编辑器之战的具体细节有兴趣的童鞋可以google之。

Vim最大的特点是打开速度快,功能强大,一旦掌握了其中的命令,编程过程双手就不需要离开键盘了。

用习惯了Vim的另一个好处是在linux下可以很轻松地用vi来处理文件,当然emacs也可以做默认编辑器,但是不是每台机器都有安装Emacs。

今天主要给大家介绍Vim在前端领域的一些常用插件:

基于传感器

这类玩法依靠手机上的传感器实现,这些传感器有陀螺仪、gps、摄像头、麦克风、震动传感器、光线传感器、距离传感器等。大家在设计玩法的时候,要结合业务本身选用相关的合适的传感器,不要随意搭配或随意叠加多个传感器,避免画蛇添足。例如做周边生活类的需求,就应该选用gps传感器获取地理位置,做全景图的需求就选用陀螺仪来提供便捷的交互。

 

你可能会遇到的问题

  • 什么是uri,获取uri需要哪些帮助?
  • 安卓中应用切换到后台, 计时器仍会不断运行有什么解决方法?
  • 微信中不支持第三方uri,下载应用。怎么解决来完成跳转到自身app。

都会在文中找到答案。

1.mark.vim

mark.vim主要的功能是变量的高亮。

选中要高亮的词,使用 m 来使其高亮,多个词的高亮会显示为不同的颜色,在不需要查找的时候以及代码review的时候使用效果还是挺不错的,

使用n可以去除所选的词的高亮。

更多详情可以点击插件主页了解。

ps: 查找单词可以使用 * 这个命令来进行快速搜索

陀螺仪、重力感应

这类交互在体感游戏中比较常见,如控制射箭的方向、挥剑、打乒乓球等,而在H5中则可用于摇一摇、控制赛车左右前进、检查手机是否平躺/竖直、全景图/AR转换角度等,也可以用于制造视差效果(如王者荣耀的登录界面),使画面富有层次感。

案例:

降温摇可乐:

该H5在模拟摇可乐的情景,玩家需要不停地摇动手机,尽快使可乐喷出来。个人认为可以换另一种玩法,让朋友互相传递手机摇,谁摇爆了可乐就算输。

图片 3图片 4

来玩点耐心吧:

这是腾讯互动娱乐2017年度发布会的预热H5,提倡用户做事要多点耐心,因而玩法是耐心地竖立手机,看着一幅漂亮繁复的画慢慢地画完。

图片 5图片 6

图片 7图片 8

图片 9

图片 10

一“陆”狂飙,极速挑战:

该H5与速度与激情8联动,先播放一段在朋友圈上飚车的视频,然后开始赛车游戏,通过左右倾侧手机来控制赛车左右前进、躲避障碍,最后根据行使的距离进行排名和抽奖。

图片 11

图片 12

天猫:地球上的另一个你

该H5同时播放代表理想与现实的两个视频,利用重力感应来切换看到的画面,向上转动手机模拟抬头看到理想的画面,向下转动手机模拟低头看到现实的画面,也可以转到一半的位置同时看两个视频同时播放,比较有新意,也较好表达出理想和现实之间的对比。

图片 13

图片 14

 

uri获取

这里的uri,指得就是通过 Url scheme 来实现的H5与安卓、苹果应用之间的跳转链接。

我们需要找到客户端的同事,来获取如下格式的链接。

xx://'跳转页面'/'携带参数'

1
xx://'跳转页面'/'携带参数'

这里给大家简单解释下url scheme。

url 就是我们平常理解的链接。
scheme 是指url链接中的最初位置,就是上边链接中 ‘xx’的位置。
详细介绍可以看这里:使用url scheme详解

用这个链接我们可以跳转到 应用中的某个页面,并可以携带一定的参数。这个是我们实现这个功能的前提哟。

2.zencoding.vim

zencoding.vim 后来改名为Emmet.vim,主要功能是实现代码的快速编写。

具体教程可以参见官方的网站

个人感受是做页面重构的时候用得比较多,通过命令可以快速生成html的结构,提高了前端开发的生产力。

地理位置

这类H5结合用户所处的位置,可以提供比较方便的周边生活服务,如查找附近的摩拜单车、获取附近的餐饮信息和前往路线;也可以与运动结合,如记录用户的跑步轨迹。如果用于办公,则可以做上班打卡功能、外勤人员的工作监控等。如果用于游戏,则可以创造出类似pokemon go的玩法,在用户的位置附近散落奖品,让用户走到目的地收集奖励。

案例:

杜蕾斯全民抓喜鹊:

该游戏H5类似pokemon go,在地图上散落各种喜鹊,用户需走到散落点附近,将喜鹊划入篮圈内,然后点击捕获,捕获够一定数量就可以兑换奖品。

图片 15

 

具体实现

3.ctrlp.vim

ctrlp.vim主要功能是对文件以及buffer进行模糊查询,快速打开文件。

操作实例如下图所示:

图片 16

图片 17

在知道文件名的情况下,使用ctrl p打开此插件,输入文件名,实则是文件名开头几个字母就可以快速打开文件。

ps:如果当前的文件已经保存好,那么会直接替换成搜索到的文件,如果没有保存的,会进行窗口的分隔类似与sp的命令。

所以在对比文件的情况下我一般会用vsp来分割窗口或者tabnew一个新的tab,再打开新的文件。

如果需要查其他目录或者忘记了文件名的话,就可以使用下面的插件NERD_tree了。

人脸识别

顾名思义,就是用人脸和H5进行互动,玩法有根据人脸猜测年龄、猜情绪,测试与明星脸的匹配度,将人脸和游戏电影人物相结合,将人脸变成小时候的样子,根据人脸的动作做出反馈(如张嘴时从嘴里飞出企鹅、眨眼睛拍照)等,通常跟AR和图片合成技术搭配使用。这类方式比较适合用于游戏电影宣传、个性化用户样貌、图片类产品推广的场景。合成的图片可以在边角加上活动二维码,使得其他用户看到这张图片时也可以参与活动。

相关技术主要是人脸识别和人脸动作捕捉的技术,腾讯有提供优图识别技术,微软也有提供人脸识别技术。

案例:

腾讯:我的魔兽我主演

这个H5将人脸和魔兽电影相结合。用户上传自己的照片,选择喜欢的模板和添加一些刀疤之类的装饰后,就可以生成一张用自己脸制作出来的的魔兽海报了。

图片 18

图片 19

我的小学生证件照:

用户上传照片生成小学生证件照,并可以通过”换基因“换一下生成的样子。

图片 20

图片 21

QQ钱包三周年活动之扫脸获红包:

用户在活动页张大嘴巴说”FUN开付“后,会有企鹅从嘴里探出来跳舞,然后发红包给用户。

图片 22

图片 23

 

第一步:通过iframe打开App

Android平台则各个app厂商差异很大,比如Chrome从25及以后就不再支持通过js触发(非用户点击),所以这里使用iframe src地址等来触发scheme。

//在iframe 中打开APP var ifr = document.createElement('iframe'); ifr.src = openUrl; ifr.style.display = 'none';

1
2
3
4
    //在iframe 中打开APP
    var ifr = document.createElement('iframe');
    ifr.src = openUrl;
    ifr.style.display = 'none';

4.NERD_tree.vim

NERD_tree.vim主要功能是一款文件浏览器,可以查看文件目录结构打开相应的文件。

具体演示如下图所示:

图片 24

我是使用绑定的快捷键F4来打开文件浏览器,光标在文件浏览器中可以用jk来移动,回车键可以打开文件,按q可以退出文件浏览器。

webRTC

webRTC是H5的一个新特性,它可以在web上访问摄像头和麦克风,进行视频和音频的实时通讯,用途有视频会议、视频聊天、在线教育、在线问诊等,以前只能客户端才能实现的视频类应用也可以应用到web上了。兼容性方面,移动端浏览器的支持程度很差,安卓5.x以上的chrome才支持,而ios直至safari11发布才终于得到了支持,但这个发展表明web端也逐渐具备这个能力了,我们可以预先想想这方面的策划,说不定不久的将来就能用上了。

案例:

Chatroulette:

这是一个随机视频聊天网页,你可以随机和地球上的陌生人视频聊天,一般遇到的都是外国人,我也是从这个网页第一次真实地感受到真的有外国人的存在。可惜现在不能访问了。

图片 25

 

第二步: 判断是否安装某应用

原理:若通过url scheme 打开app成功,那么当前h5会进入后台,通过计时器会有明显延迟。利用时间来判断。

//检查app是否打开 function checkOpen(cb){ var _clickTime = (new Date()); function check(elsTime) { if ( elsTime > 3000 || document.hidden || document.webkitHidden) { cb(1); } else { cb(0); } } //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束 var _count = 0, intHandle; intHandle = setInterval(function(){ _count ; var elsTime = (new Date()) - _clickTime; if (_count>=100 || elsTime > 3000 ) { clearInterval(intHandle); check(elsTime); } }, 20); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    //检查app是否打开
    function checkOpen(cb){
        var _clickTime = (new Date());
        function check(elsTime) {
            if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
                cb(1);
            } else {
                cb(0);
            }
        }
        //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
        var _count = 0, intHandle;
        intHandle = setInterval(function(){
            _count ;        
            var elsTime = (new Date()) - _clickTime;
            if (_count>=100 || elsTime > 3000 ) {
                clearInterval(intHandle);
                check(elsTime);
            }
        }, 20);
    }

5.neocomplcache.vim

neocomplcache.vim主要功能是进行代码补全,

优点是对上下文进行索引,结果保存到缓存中,自动补全的效率比较高,另外匹配的也比较精准。

补全效果如下图展示:

图片 26

图片 27

im中的代码补全插件比较多,一般补全的智能性依赖于插件的字典,变量缓存机制。

从这点看neocomplcache也是挺不错的,另外智能读读取路径的功能也是挺赞的。

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:H5页检测手机是否安装app,Vim常用插件

关键词: