/**
|
* 跨端双向通讯桥
|
* @author Tevin
|
* @tutorial
|
* 网页对 app 发起通讯
|
* 1. app 注册接收机制
|
* app 在网页打开之前，注入方法 linking
|
* 2. js 发起
|
* bridge.invoking('methodName', {key1:'value1'}, function(res){console.log(res)});
|
* 3. Bridge 转换为发送
|
* window.linking('{method:\'methodName\', param:{key1:\'value1\'}, callback:\'bridge.cb111at1541994536008\'}');
|
* 4. app 处理完后直接调用网页上的回调，并传递结果
|
* bridge.cb101at1541994536008('{key2:\'value2\'}');
|
* app 对网页发起通讯
|
* 1. 网页注册接收器，用于接收 app
|
* window.telling = function(dataStr) {};
|
* 2. 网页注册业务
|
* bridge.register('methodName', function(data, callback){});
|
* 3. app 调用（至少需要在页面完成再延迟至少1秒之后）
|
* telling('{method:\'methodName\', param:{key1:\'value1\'}, marker:\'mk222at1541994536008\'}');
|
* 4. 网页完成业务逻辑处理，并回调
|
* window.linking('{method:\'methodName\', param:{key2:\'value2\'}, marker:\'mk222at1541994536008\'}');
|
*/
|
|
|
export class Bridge {
|
|
constructor() {
|
this._data = {
|
count: 100,
|
};
|
this._receives = {};
|
this._init();
|
}
|
|
/**
|
* 检查 linking 方法
|
* @return {string}
|
* @private
|
*/
|
_checkLinking() {
|
// 安卓注入
|
if (window.iTop && window.iTop.linking) {
|
return 'android';
|
}
|
// 没有注入
|
else {
|
return '';
|
}
|
}
|
|
/**
|
* 初始化
|
* @private
|
*/
|
_init(count = 0) {
|
// 500 * 20 毫秒后，仍然未注入，视为不工作
|
if (!this._checkLinking() && count < 20) {
|
setTimeout(() => {
|
this._init(++count);
|
}, 500);
|
} else {
|
this._initReceive();
|
}
|
}
|
|
/**
|
* 发送
|
* @param {object} data
|
* @private
|
*/
|
_send(data) {
|
const platform = this._checkLinking();
|
// 安卓注入
|
if (platform === 'android') {
|
window.iTop.linking(JSON.stringify(data));
|
}
|
// 没有注入
|
else {
|
console.error('没有注入 linking 方法！');
|
}
|
}
|
|
/**
|
* 发起一次发送
|
* @param {string} method
|
* @param {object} param
|
* @param {function} callback - 来自网页业务逻辑的回调
|
* @private
|
*/
|
_sendLinking(method, param, callback) {
|
// 数据检查
|
if (Object.prototype.toString.call(param) !== '[object Object]') {
|
console.error('$bridge.invoking 需要接受 JSON 对象！');
|
return;
|
}
|
// 如果有回调，转存回调
|
const name = 'cb' + this._data.count++ + 'at' + Date.now();
|
this[name] = (res) => {
|
if (callback && Object.prototype.toString.call(callback) === '[object Function]') {
|
if (res) {
|
const data = typeof res === 'string' ? JSON.parse(res) : res;
|
callback(data);
|
} else {
|
callback();
|
}
|
}
|
delete this[name];
|
};
|
// 发送
|
this._send({
|
method,
|
param,
|
callback: 'bridge.' + name,
|
});
|
}
|
|
/**
|
* 向 app 发起通讯
|
* @param {string} method
|
* @param {object|function} [param]
|
* @param {function} [callback]
|
*/
|
invoking(method, param, callback) {
|
const trans = param;
|
if (trans) {
|
if (Object.prototype.toString.call(trans) === '[object Function]') {
|
callback = trans;
|
param = {};
|
}
|
} else {
|
callback = null;
|
param = {};
|
}
|
this._sendLinking(method, param, callback);
|
}
|
|
/**
|
* 初始化接收
|
* @private
|
*/
|
_initReceive() {
|
if (!this._checkLinking()) {
|
return;
|
}
|
window.telling = (res) => {
|
const data = typeof res === 'string' ? JSON.parse(res) : res;
|
const method = data.method;
|
const param = data.param;
|
const marker = data.marker;
|
if (this._receives[method]) {
|
this._receives[method](param, (param2) => {
|
this._sendTelling(method, param2, marker);
|
});
|
}
|
};
|
}
|
|
/**
|
* 发送响应
|
* @param {string} method
|
* @param {object} param
|
* @param {string} marker
|
* @private
|
*/
|
_sendTelling(method, param, marker) {
|
// 数据检查
|
if (Object.prototype.toString.call(param) !== '[object Object]') {
|
console.error('$bridge.register 注册的函数需要接受 JSON 对象！');
|
return;
|
}
|
// 发送
|
this._send({
|
method,
|
param,
|
marker,
|
});
|
}
|
|
/**
|
* 注册接收指令，可供 app 查询
|
* @param method
|
* @param callback
|
*/
|
register(method, callback) {
|
this._receives[method] = callback;
|
}
|
|
/**
|
* 是否有开始工作
|
*/
|
isWorking() {
|
const platform = this._checkLinking();
|
return platform === 'android' || platform === 'iOS';
|
}
|
|
}
|
|
// 全局服务实例
|
export const $bridge = new Bridge();
|
