/** * 跨端双向通讯桥 * @author Tevin * @tutorial * 网页对 App 发起通讯 * 1. 【App端】App 注册接收器,用于接收网页通知 * 在页面打开之前,App 注入方法 linking = function(paramStr) { } * 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();