hybrid

hybrid交互

1. JavaScript core == js bridge
2. url schema

这里有一张图可以简单说明：

detail

其实Hybrid的交互无非就2种方法：

• native调用前端页面中js方法
• 前端页面通过js调用native提供的接口

2个交互的bridge都是webview

image.png

从第一个开始讲解：web和native约定好，然后h5将一组api绑定在window对象上，app通过webview获取window对象然后调用js。这就是最初说的native调用页面中js的方法

第二个：web传递一个url，然后native那边可以截断url，通过url中的schema进行解析，然后做出相应的操作

然后app自身是可以自定义url schema的，并把自定义的url注册在调度中心，比如：

• weixin:// 打开微信
• ctrip：//xx 打开携程

js与native通信：创建这类url，native将其捕获，然后进行操作。

api式交互

native api接口和ajax调用服务器提供的接口非常相似

image.png

然后接下来这张图可以清楚的展示我们在设计hybrid交互模型的时候，通信的流程：

image.png

格式约定

前面说了这个流程和ajax比较相似，这里就按照ajax做一个参考。

$.ajax(options) => XMLHttpRequest type(default val：“get”) http请求方法（“get”，“post”，其他） url(default val：当前url) 请求url的地址 data(default val：none)

与native约定的请求模型：

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

这个方法就会形成一个url，比如：
hybridschema://hybridapi?callback=hybrid_1446276509894¶m=%7B%22data1%22%3A1%2C%22data2%22%3A2%7D

然后数据会得到返回，一般的格式是这样的：

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

code：

window.Hybrid = window.Hybrid || {};
var bridgePostMsg = function (url) {
    if ($.os.ios) {
        window.location = url;
    } else {
        var ifr = $('