H5如何与Native通信Hybrid交互--（1）

1.App版本标志

　　User Agent:hybrid_xxx_1.0.0

　　User Agent:wechatdevtools/0.7.0 MicroMessenger/6.3.9

2.native有一个注入接口的方法--》JavaScript Core

　　1.Native实现callback方法

　　2.H5 调用callback方法

　　3.问题（callback注入在页面加载后）

　　4.获取登录标识用cookie比较好

3.URL Schema

　　H5主动与app通讯

　　　　1.H5发出请求（特殊URL）改变hash（路由原理）

　　　　2.Native拦截请求（分解URL）（解析hash）

　　App主动与H5通讯

　　　　1.将API绑定在WebView的window对象上

　　　　2.通过ISO/Android原生方法调用window对象中的js方法

交互模型

　　类似ajax（jsonp方法）

　　　　1.新建XHR对象

　　　　2.发送URL请求到web服务器

　　　　3.web服务器返回对应数据json格式的字符串

　　　　4.执行回调

　　Native交互

　　　　1.新建Native请求对象

　　　　2.发送URL请求到Native端

　　　　3.Native端返回对应数据j

　　　　4.执行回调

例子：

/*
1 JavascriptCore == JS Bridge
2 URL Schema

*/

var NativeBridge = {};   //
NativeBridge.getAddresslist = function (callback) {
    ////Bridge在这个函数体里面要有H5与NATIVE通讯的方式，抹平差异
    // reqestHybrid({
    //     tagname: 'getAddresslist',
    //     callback: function () {
    //         callback(data);
    //     }
    // })
    ////hybrid://getAddresslist?callbackid=id
}
NativeBridge.getAddresslist(function (data) {
    //操作
})

例子2：

window.Hybrid = window.Hybrid || {};

//处理一下url
var _getHybridUrl = function (params) {
    var k, paramStr = '',
        url = 'hybrid://',
        flag = '?';
    url += params.tagname;//时间戳，防止url不起效

    if (params.callback) {
        flag = '&';
        url += '?callback=' + param.callback;
        delete params.callback;
    }
    if (params.param) {
        paramStr = typeof params.param == 'object' ? JSON.stringify(params.param) :
            url + flag + 'param=' + encodeURIComponent(paramStr);
    }
    return url
};
//eg:   hybrid://getAddresslist?callback=id

//把框架追加到bady
var bridgePostMsg = function (params) {
    var url = _getHybridUrl(params);
    //兼容ios6
    var ifr = $('<iframe stayle="display:none;" src="' + url + '"/>');
    console.log(params.tagname + '-hybrid请求发出-' + new Date().getTime() + 'url:' + url)
    if ($.os.android) {
        //Android情况协议发的太快会有问题
        setTimeout(function () {
            $('body').append(ifr);
        })
    } else {
        $('bady').append(ifr);
    }

    //这样会阻断第二次请求
    //window.location = url;

//清除ifr
    setTimeout(function () {
        ifr.removw();
        ifr = null;
    }, 1000)

};


//H5与Native基本交互
var requestHybrid = function (params) {
    if (!params.tagname) {
        alert('必须包含tagname');
    }
    //生成唯一执行函数，执行后销毁
    var tt = (new Date().getTime()) + '_' + _.uniqueId() + '_';
    var t = 'hybrid_' + params.tagname + '_' + tt;
    var tmpFn;
    //处理有回调的情况
    if (params.callback) {
        tmpFn = params.callback;
        params.callback = t;//唯一的字符串
        window.Hybrid[t] = function (data) {
            tmpFn(data);
            //delete window.Hybrid[t];
        }
    }
    //解析callback，生成唯一的callbackid，将一个函数和一个字符串映射起来
    //callbackid:function(){}
    bridgePostMsg(params);
};


//最终调用方法
requestHybrid({
    tagname: 'getAddresslist',
    param: {},
    callback: function () {
        // callback(data);
    }
})

收口：

　　　　1个入口  一个出口

// 第一层收口
$.get(url, param, function () {

})


/*
1 公共参数，设备号，手机
2 统计需求，ajax接口响应速度
3 统一的回调处理，Server错误码code处理
4 ......
 */
//url => domain.com?flag=刘晓波
// => 业务架构层处理
// 请求参数
var commonDate = {
    flag: '刘晓波',
    id:'设备号',
    ip:'',
    geo:''  //地理信息
}
// => commonDate
// 创建订单

//ajax => data =>城市 => store => localstorage

Hybrid核心交互

　　跳转

　　　　forward

　　　　动画

// 以前
// location.href = 'url';

// 现在
var Locattion = function (url) {
    //...
    location.href = 'url';
    //...
}
var forward = function(){}


// 收口例子2
// var t = setTimeout(function () { }, timeout);
// var SetTimeout = function(){}
// ClearTimeout=function(){}

　　全局化

　　　　back的实现

　　　　history乱了

　　　　Native Path化

// 订单填写 -> 支付成功
// <----后退
// 订单填写页-----（过期了！！！产品不允许）
// 解决方法
    // 1.定制化后退，直接到大页面
    // 2.本页面，重新渲染
    //     显示-》订单以过期。。。



// 订单填写 -> server中间跳转页面 -> 钱包页面
// 订单填写  -> 钱包页面  去掉中间页面
// 订单填写  -> 钱包页面  -> 支付成功

　　入口的设计

　　　　鉴权的矛盾

　　　　体系化

账号体系

　　请求鉴权怎么做

　　　　前后分离

　　　　Webview中的鉴权

公共业务