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中的鉴权
公共业务