前言
对于商务类的app，随着app注册使用人数递增，app的运营者们就会逐渐考虑在应用中开展一些推广活动。大多数活动具备时效性强、运营时间短的特征，一般产品们和运营者们都是通过wap页面快速投放到产品的活动模块。Wap页面可以声文并茂地介绍活动，但活动的最终目标是通过获取特权、跳转进入本地功能模块，最后达成交易。如何建立wap页面和本地Native页面的深度交互，这就需要用到本文介绍的JSBridge。
此外一些平台类的产品，如大家每天都在使用的微信、支付宝、手机qq等，无一例外都在使用集成JSBridge的webContainer完成众多业务组件功能，大大减少了客户端Native开发的工作量，不仅节约了大量人力开发成本，还能避开产品上线更新的版本审核周期限制（特别是IOS平台）。当然这些超级APP有强大的技术力量支撑，通过JSBridge有计划的进行API规范接口，不断向前端Wap开发人员开放，并在版本上向下兼容。但对于我们刚起步运营的中小级app来说暂时还没有必要如此大张旗鼓，相反前面提到的wap活动推广则是我们的主要需求。
为了满足这个需求，本文通过提炼JSBridge的核心部分改造成JSService方式供各个不同的产品零修改方式使用。各个不同的产品只需要按照插件的方式提供Native扩展接口，并在各自封装的webContainer中调用JSService对Wap调用进行拦截处理。
具体产品应用
目前该框架同时覆盖了Android和IOS平台，在我司的几个电商类产品中都得到了很好的使用，并趋于稳定。
本文的Demo工程运行效果如下：
关于JSAPI的接口封装
JSAPI的封装包括核心JS和对外开放接口JS两个部分。 核心JS部分通过拦截某Q的wap请求页面获取，获取的JS进行编码混淆处理，已经通过调试进行了注释，其主要过程就是对参数和回调进行封装，并构建一个url链接通过创建一个隐藏的iframe进行发送。核心JS代码阅读
对参数和回调进行封装部分的代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
//invoke //mapp.invoke("device", "getDeviceInfo", e); //@param e 类 必须 //@param n 类方法 必须 //@param i 同步回调的js方法 //@param s function k(e, n, i, s) { if (!e || !n) return null; var o, u; i = r.call(arguments, 2), //相当于调用Array.prototype.slice(arguments) == arguments.slice(2),获取argument数组2以后的元素 //令s等于回调函数 s = i.length && i[i.length - 1], s && typeof s == "function" ? i.pop() : typeof s == "undefined" ? i.pop() : s = null, //u为当前存储回调函数的index； u = b(s); //如果当前版本支持Bridge if (C(e, n)) { //将传进来的所有参数生成一个url字符串； o = "ldjsbridge:" + "/" + "/" + encodeURIComponent(e) + "/" + encodeURIComponent(n), i.forEach(function(e, t) { typeof e == "object" && (e = JSON.stringify(e)), t === 0 ? o += "?p=": o += "&p" + t + "=", o += encodeURIComponent(String(e)) }), (o += "#" + u); //带上存储回调的数组index; //执行生成的url, 有些函数是同步执行完毕，直接调用回调函数；而有些函数的调用要通过异步调用执行，需要通过 //全局调用去完成； var f = N(o); if (t.iOS) { f = f ? f.result: null; if (!s) return f; //如果无回调函数，直接返回结果； } }else { console.log("mappapi: the version don't support mapp." + e + "." + n); } } |
创建iframe发送JSBridge调用请求：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//创建一个iframe，执行src，供拦截 function N(n, r) { console.log("logOpenURL:>>" + n); var i = document.createElement("iframe"); i.style.cssText = me"); i.style.cssText = 跳转进入本地功能模块，最后达成交易。如何建立wap页面和本地Native页面的深度交互，这就需要用到本文介绍的JSBridge。
此外一些平台类的产品，如大家每天都在使用的微信、支付宝、手机qq等，无一例外都在使用集成JSBridge的webContainer完成众多业务组件功能，大大减少了客户端Native开发的工作量，不仅节约了大量人力开发成本，还能避开产品上线更新的版本审核周期限制（特别是IOS平台）。当然这些超级APP有强大的技术力量支撑，通过JSBridge有计划的进行API规范接口，不断向前端Wap开发人员开放，并在版本上向下兼容。但对于我们刚起步运营的中小级app来说暂时还没有必要如此大张旗鼓，相反前面提到的wap活动推广则是我们的主要需求。 为了满足这个需求，本文通过提炼JSBridge的核心部分改造成JSService方式供各个不同的产品零修改方式使用。各个不同的产品只需要按照插件的方式提供Native扩展接口，并在各自封装的webContainer中调用JSService对Wap调用进行拦截处理。 具体产品应用目前该框架同时覆盖了Android和IOS平台，在我司的几个电商类产品中都得到了很好的使用，并趋于稳定。
jsapidemo_ios.png
jsapidemo_android.jpg
关于JSAPI的接口封装JSAPI的封装包括核心JS和对外开放接口JS两个部分。 核心JS部分通过拦截某Q的wap请求页面获取，获取的JS进行编码混淆处理，已经通过调试进行了注释，其主要过程就是对参数和回调进行封装，并构建一个url链接通过创建一个隐藏的iframe进行发送。核心JS代码阅读 对参数和回调进行封装部分的代码如下：
创建iframe发送JSBridge调用请求：
|
