H5如何与Native通信Hybrid交互--(1)

时间:2022-02-15 08:23:30

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中的鉴权

公共业务