前端JS与App交互

在工作的时候，有时候会接到这样的需求：开发H5页面。内嵌到App里面。

在这里，我们只需要写好前端代码，接好接口。将项目打包后丢给运营去部署就行了。

但是往往我们写代码的时候，需要与app之间进行交互，例如app传值给前端，前端传值给app。这两种情况处理的方式都不同。

1.前端主动与app交互

（1）主动与ios进行交互

	在与ios交互的时候，有一个固定的语法。
	
	 window.webkit.ios开发人员定义的方法名.postMessage(这里是给ios传值的地方)
	 
	 例如：
	 
	 window.webkit.messageHandlers.postMessage({a:1});

注意：不要在方法名后面加（），比如这种：window.webkit.messageHandlers().postMessage({a:1});
当时开发的时候，我刚开始加了括号，导致ios检测不到我调用他的方法。 与ios交互时，最好随便传一个参数，要不然ios监听不到方法的调用

（2）主动与Android进行交互

window.Android开发人员定义的对象名.Android开发人员定义的方法名();
例如：
	window.jsObj.authorRefresh();

具体为啥有对象名Android开发人员是这样跟我说的：他们挂在方法在window下面，必须要有一个对象，具体是真的假的就不去核实了哈。

2.APP与前端交互

因为app可以调用前端挂载在window下面的方法，所以前端需要在自己的js下面创建一个函数，挂载在window下面。

       window.syncAuthor = function(){
		这里面的逻辑就是，当app调用这个方法的时候，我们需要干什么。
      }

当时app调用这个方法时，我需要将cookie中的数据存储在本地。

所以当时我是这样干的。

       window.syncAuthor = function(){
	        localStorage.setItem("app_token", getCookie("access_token"));
	        localStorage.setItem("app_mobile", getCookie("mobile"));
      }

因为开发的时候使用的是vue，引入了许多依赖，比如axios. 所以我是在第一个vue页面的 created生命周期中将函数挂载的。 （因为刚开始挂载是在mounted生命周期里，后来没起效。偷偷换到了created函数中。）