前端判断是否APP客户端打开触屏,实现跳转APP原生组件交互之遐想

今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~...

产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~

静下心来思考

以往我们是判断是否客户端打开都依赖于后端,通过app主动拼接参数的方式,传递给后端,后端告诉前端本次的加载是在app里还是app外,实现页面的特殊功能

那我们发现,这个方式环节和局限性太多,我们无法保证客户端一定能够每个触屏页面都拼接我们需要的参数,而且我们的触屏页面有很多种,有的是活动需要的,有的是动态,有的是静态

而且APP里头有很多途径可以打开,而且新的功能页面还在持续增加,这样就导致我们每次开发前必须定对好,确保它的正确性,缺乏容错性,并且缺乏安全性,而且如果客户端已经发布将只能重新发布进行修正

那么我们能不嫩通过更简单的方式直接通过 前端对客户端 的方式来实现呢,答案肯定是可以的~,下面还是从产品的需求说起。

产品要求某个静态资源页面中的某些连接,在app外打开的时候跳转的是正常的触屏页面,在app中打开的时候则跳转app的原生交互页,咋一听,需求咋这么变态呢~

如果利用以往的方式,我们就得把这些页面转化为动态的页面,而且还得和客户端进行协定处理,工作量又被增加,开发效率降低,而且页面性能也会受影响。

这导致我必须寻求一种新的解决方案。

首先,我用静态页调取了一个客户的提供的js方法,提示

is not defined

什么鬼呢,一般我们见到的都是

undefined

那什么是is not defined?

从字面意思上来讲就是未定义,也就是未申明。就是这个变量(对象)压根就没有,如下:

console.log(abc);//abc is not defined

可能还一知半解,我们继续往下看。

is not defined 和 undefined 区别。

我们大多数人都知道 undefined  ,却不知道 defined  , undefined  是未定义,如下:

var abc;
console.log(abc);//undefined
console.log(abc.a);//so.a is undefined

这个时候输出的是 undefined  。访问变量的属性就会提示is undefined 就是这个变量so 未定义值(类型);

而defined 呢,如下:

console.log(abc);//abc is not defined

其实如果理解一下其实就是未申明。也就是可以理解对象使用的过程是,先声明后赋值,在赋值的过程中确定了这个的类型。

所以总结一下:is not defined 优先于 undefined ,也就是先判断这个对象是否申明了,如果没申明直接就 is not defined,如果已经申明,那么再看有没有赋值(类型),如果没有那么就是 undefined 或者 访问对象的属性就是 is undefined 。

如何判断 undefined,undefined 很好判断,如下:

var abc;
console.log(abc == undefined);//true
console.log(abc === undefined);//true;
console.log(typeof abc == ‘undefined‘);//true
console.log(typeof abc ===  ‘undefined‘);//true
console.log(!abc);//true

等等,有很多方式,但是这些都不是我需要的啊,如何判断is not defined,这个才我们今天的重点.. ,直接上代码..

try {
    //调取客户端方法;
} catch (e) {
    location.href = ‘‘;//跳转触屏版地址
}

是不是很简单,很高效,我们利用浏览器如果程序出现错误,会抛出异常的特性,来捕获这个操作,执行我们指定的操作;

至此,我们得到相对完美的解决方案,又一次提升了自己,O(∩_∩)O哈哈~

接下来我们遐想一下

那我们是不是可以让将全部的前端和客户端交互的操作利用这样的方式实现呢?

首先,客户端定义一个被触屏调用的js方法,这个方法的作用就是告诉客户端,你是在我的客户端打开的

然后,触屏调用这个方法,如果成功则将页面交互处理为在客户端的模式,如果失败则处理为触屏版的模式

这样处理是不是更方便呢,不知大家还有什么更好的方式呢~~~~

By  Hgq

原文地址:https://www.cnblogs.com/widgetbox/p/9122883.html

时间: 2024-09-28 21:36:08

前端判断是否APP客户端打开触屏,实现跳转APP原生组件交互之遐想的相关文章

WAP、触屏版网站及APP的区别

 1.电脑版网站: 电脑版网站是指用户通过台式或者笔记本电脑浏览器打开的网站,也就是我们平时上网所访问的网站.其支持和兼容IE6.IE7.IE8.IE9.IE10.Firefox.Chrome等各种主流浏览器,该网站通常包含一些网站应用程序及系统(如:CMS网站内容管理系统等),并包含了独立的数据库及完整的后台管理系统,是企业开展网络营销和电子商务的基础. 为了管理和维护方便,其手机WAP版网站.手机触屏版网站.手机APP应用等通常共享同一个数据库和管理后台. 2.手机WAP版网站: WAP网站

如何让网站判断是手机客户端访问,如果是跳到手机版

<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>< script type="text/javascript">uaredirect("www.imiansha.com");</script>     就是上面的这段代

【WAP触屏】YouKu视频弹窗播放组件

(function(window){ /* youku api : http://open.youku.com/tools 调用方法 : LM_youkuPop.open('XODI5Mzk3MDAw'); */ var head = document.getElementsByTagName('head')[0], youkuApi = 'http://player.youku.com/jsapi', cssTmpl = '#LM-youkuPop{display:none; z-index:

转:Android随笔之——使用Root权限实现后台模拟全局按键、触屏事件方法(类似按键精灵)

本文转载自CSDN的jzj1993,原文连接:http://blog.csdn.net/jzj1993/article/details/39158865 有时我们需要使用安卓实现在后台模拟系统按键,比如对音量进行调节(模拟音量键),关闭前台正在运行的App(模拟返回键),或者模拟触屏事件.但是对于原生安卓系统而言,后台进程关闭前台进程,甚至模拟用户事件,进而操控整个系统,是不符合系统安全原则的,如果有这样的漏洞被病毒或恶意软件所利用,会非常危险. 由于一些特殊原因,我恰巧需要实现这样的功能,而又

问卷调查 for 移动触屏版

什么是移动触屏版(Html5触屏.WEB APP)? 采用最新HTML5技术,无需下载安装.无需下载升级,使用移动设备浏览器,就能访问自适应屏幕大小的访问界面,微信也能扫描访问. 为什么已经有PC网页版和移动端APP版还需要移动触屏版? PC网页版是基于传统PC上的浏览器使用,在移动终端浏览器访问会出现屏幕大小伸缩,不适合在移动终端浏览器上使用. 移动端APP版需要安装才能使用,而且有升级的烦恼. 基于Html5触屏版使用PC.手机.平板电脑浏览器都能自适应屏幕去访问,体验效果近乎于APP. 移

html5页面js判断是否安装app,以及判断是否在app内部打开html5页面

一.html5页面js判断是否安装app 目前还不能通过浏览器直接判断是否安装app 通过谷歌参考别人的方式和测试 我们知道安装了某个app后通过scheme跳转协议(引荐:http://www.jianshu.com/p/eed01a661186)进入到app 没有安装时点击链接是无效的 所以通过点击链接后到执行进入app之间的时间差来判断是否安装app 1.下面只是处理了安卓系统时 if (navigator.userAgent.match(/android/i) ){ var nowTim

【JS】点击页面判断是否安装app并打开,否则跳转下载的方法

应用场景 App产品在运营推广上有一个需求,就是要求可以让用户在访问我们的推广网页时,就可以判断出这个用户手机上是否安装了我们的App,如果安装了则可以直接在网页上打开,否则就引导用户前往下载.从而形成一个推广上的闭环. 解决办法 而对于点击链接后,能否直接打开,可以通过下面的代码来实现.前提条件:你得知道你的APP对应的打开协议,如贴吧APP,协议为:com.baidu.tieba:// ,微信的:weixin:// ,等等 1 <!-- a标签点击打开的动作,在click事件中注册 -->

点击页面判断是否安装app并打开,否则跳转app store的方法

常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用户的操作步骤: 1.用户第一次访问宣传页面 a.点击Banner,进入到APP Store中对应的APP下载页 b.APP下载页中提示:安装:用户点击安装 c.安装完成后,APP下载页中提示:打开:用户继续点击打开 d.用户正常使用APP 2.用户第二次访问宣传页面 a.点击Banner,进入到AP

前端判断横屏还是竖屏

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢.首先在head中加入如下代码: 1 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明1).content中的width