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

Posted 2020-11-18 WidgetBox

今天做了一个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方法，这个方法的作用就是告诉客户端，你是在我的客户端打开的

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

 

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

 

作者：旧旧的 <[e-mail]> 解决问题的方式，就是解决它一次