/**
|
* 跨端双向通讯桥
|
* @author Tevin
|
* @tutorial
|
* 网页对 App 发起通讯
|
* 1. 【App端】App 注册接收器,用于接收网页通知
|
* 在页面打开之前,App 注入方法 linking = function(paramStr) { <Native Code> }
|
* 2. 网页业务中 js 发起通讯
|
* $bridge.invoking('methodName', {key1:'value1'}, function(res) {console.log(res)});
|
* 3. 由 Bridge 转换为调用注入的方法(含callback)
|
* window.linking('{method:\'methodName\', param:{key1:\'value1\'}, callback:\'bridge.cb111at1541994536008\'}');
|
* 4. 【App端】App 处理完后直接调用网页上的全局回调,并传递结果完成通讯
|
* bridge.cb101at1541994536008('{key2:\'value2\'}');
|
* App 对网页发起通讯
|
* 1. 网页注册接收器,用于接收 App 通知
|
* window.telling = function(dataStr) { someJs };
|
* 2. 网页业务中注册接收通讯
|
* $bridge.register('methodName', function(res, callback) {});
|
* 3. 【App端】App 调用网页中的全局方法(至少需要在页面完成并延迟至少1秒之后再调用)
|
* telling('{method:\'methodName\', param:{key1:\'value1\'}, marker:\'mk222at1541994536008\'}');
|
* 4. 网页完成业务逻辑处理后调用注入的方法,并传递结果完成通讯(含marker、不含callback)
|
* window.linking('{method:\'methodName\', param:{key2:\'value2\'}, marker:\'mk222at1541994536008\'}');
|
*/
|
|
export class Bridge {
|
|
constructor() {
|
this._data = {
|
count: 100,
|
};
|
this._receives = {};
|
this._earlyInvok = [];
|
this._init();
|
// 挂载到全局
|
window.bridge = this;
|
}
|
|
/**
|
* 检查 linking 方法
|
* @return {string}
|
* @private
|
*/
|
_checkLinking() {
|
// 安卓注入
|
if (window.linking) {
|
return 'android';
|
}
|
// 没有注入
|
else {
|
return '';
|
}
|
}
|
|
/**
|
* 初始化
|
* @private
|
*/
|
_init(count = 0) {
|
// 500 * 20 毫秒后,仍然未注入,视为不工作
|
if (!this._checkLinking() && count < 20) {
|
setTimeout(() => {
|
this._init(++count);
|
}, 500);
|
}
|
// 开始工作
|
else {
|
this._initReceive();
|
// 补发
|
if (this._earlyInvok.length > 0) {
|
this._earlyInvok.forEach(invok => {
|
const { method, param, callback } = invok;
|
this._sendLinking(method, param, callback);
|
});
|
}
|
}
|
}
|
|
/**
|
* 发起一次发送
|
* @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];
|
};
|
// 发送
|
window.linking(JSON.stringify({
|
method,
|
param,
|
callback: 'bridge.' + name,
|
}));
|
}
|
|
/**
|
* 向 app 发起通讯
|
* @param {string} method
|
* @param {object|function} [param]
|
* @param {function} [callback]
|
*/
|
invoking(method, param, callback) {
|
// param 为函数时
|
const trans = param;
|
if (trans && Object.prototype.toString.call(trans) === '[object Function]') {
|
callback = trans;
|
param = {};
|
} else {
|
callback = null;
|
}
|
if (this._checkLinking()) {
|
this._sendLinking(method, param, callback);
|
}
|
// 尚未准备好,挂起
|
else {
|
this._earlyInvok.push({ method, param, callback });
|
}
|
}
|
|
/**
|
* 初始化接收
|
* @private
|
*/
|
_initReceive() {
|
window.telling = (res) => {
|
const data = typeof res === 'string' ? JSON.parse(res) : res;
|
const { method, param, marker } = data;
|
if (this._receives[method]) {
|
if (marker) {
|
this._receives[method](param, (param2) => {
|
this._sendTelling(method, param2, marker);
|
});
|
} else {
|
this._receives[method](param);
|
}
|
}
|
};
|
}
|
|
/**
|
* 发送响应
|
* @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;
|
}
|
// 发送
|
window.linking(JSON.stringify({
|
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();
|