【开源】浅谈Hybrid技术的设计与实现 - 叶小钗(2)_H5之家

1 BNJSReady(function(){ 2 BNJS.http.post({ 3 url : 'http://cp01-testing-tuan02.cp01.baidu.com:8087/naserver/user/feedback', 4 params : { 5 msg : '测试post', 6 contact : '18721687903' 7 }, 8 onSuccess : function(res){ 9 alert('发送post请求成功！'); 10 }, 11 onFail : function(res){ 12 alert('发送post请求失败！'); 13 } 14 }); 15 });

前端框架定义了一个全局变量BNJS作为Native与前端交互的对象，只要引入了糯米提供的这个JS库，并且在糯米封装的Webview容器中，前端便获得了调用Native的能力，我揣测糯米这种设计是因为这样便于第三方团队的接入使用，手机百度有一款轻应用框架也走的这种路线：

clouda.mbaas.account //释放了clouda全局变量

这样做有一个前提是，Native本身已经十分稳定了，很少新增功能了，否则在直连情况下就会面临一个尴尬，因为web站点永远保持最新的，就会在一些低版本容器中调用了没有提供的Native能力而报错。

API式交互

手白、糯米底层如何做我们无从得知，但我们发现调用Native API接口的方式和我们使用AJAX调用服务器端提供的接口是及其相似的：

这里类似的微薄开放平台的接口是这样定义的：

粉丝服务（新手接入指南）

读取接口接收消息接收用户私信、关注、取消关注、@等消息接口

写入接口发送消息向用户回复私信消息接口

生成带参数的二维码生成带参数的二维码接口

我们要做的就是通过一种方式创建ajax请求即可：

https://api.weibo.com/2/statuses/public_timeline.json

所以我在实际设计Hybrid交互模型时，是以接口为单位进行设计的，比如获取通讯录的总体交互是：

格式约定

交互的第一步是设计数据格式，这里分为请求数据格式与响应数据格式，参考ajax的请求模型大概是：

$.ajax(options) ⇒ XMLHttpRequest type (默认值："GET") HTTP的请求方法(“GET”, “POST”, or other)。 url (默认值：当前url) 请求的url地址。 data (默认值：none) 请求中包含的数据，对于GET请求来说，这是包含查询字符串的url地址，如果是包含的是object的话，$.param会将其转化成string。

所以我这边与Native约定的请求模型是：

requestHybrid({ //创建一个新的webview对话框窗口 tagname: 'hybridapi', //请求参数，会被Native使用 param: {}, //Native处理成功后回调前端的方法 callback: function (data) { } });

这个方法执行会形成一个URL，比如：

hybridschema://hybridapi?callback=hybrid_1446276509894&param=%7B%22data1%22%3A1%2C%22data2%22%3A2%7D

这里提一点，APP安装后会在手机上注册一个schema，比如淘宝是taobao://，Native会有一个进程监控Webview发出的所有schema://请求，然后分发到“控制器”hybridapi处理程序，Native控制器处理时会需要param提供的参数（encode过），处理结束后将携带数据获取Webview window对象中的callback（hybrid_1446276509894）调用之

数据返回的格式约定是：

{ data: {}, errno: 0, msg: "success" }

真实的数据在data对象中，如果errno不为0的话，便需要提示msg，这里举个例子如果错误码1代表该接口需要升级app才能使用的话：

{ data: {}, errno: 1, msg: "APP版本过低，请升级APP版本" }

代码实现

这里给一个简单的代码实现，真实代码在APP中会有所变化：