js- js(webview如何和app交互,js前端部分)

背景: 今天碰到了一个有意思的需求, h5需要实现一个自定义分享的功能,  

h5分享页,可以在浏览器分享,可以在微信分享, 可以在app里分享, 那说明运行环境是多样的, 那么处理起来也不同,

最开始我在浏览器中,是调用了一个NativeShare.js插件, 自动调用浏览器自带的分享功能, 微信端调用微信JS_JDK,

微信和浏览器运行都没问题, 但是在app的webview中是打不开的, 最后查了下,不能跨过app和微信直接通信,

采取的方案. h5 -> app -> 微信

废话不多说, 直接撸了

那我们js前端首先要解决的就是 和 app通信的问题, 演示的话 ios和android分开写, 实际中需要判断运行环境

1, js主动和Android进行通信   注意 : injectedObject需要挂载到 window变量下

injectedObject是和app约定的一个方法,app就能监听这个事件

2, js主动和ios进行通信   

messageHandlers 是和app约定的一个方法,app就能监听这个事件

3.APP与前端交互

   app 可以直接调用我们挂载到window的方法, 所以定义一个回调函数, 挂载到window下面就ok了

window.syncAuthor = function(){ app通知函数, 处理逻辑       }