/** * 跨端双向通讯桥 * @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\'}'); */ import { Fetcher } from '@components/bases/Fetcher'; import { Tools } from '@components/common/Tools'; export class Bridge { constructor() { this._data = { count: 100, }; this._receives = {}; this._earlyInvok = []; this._init(); // 挂载到全局 window.bridge = this; } /** * 检查 linking 方法 * @return {string} * @private */ _checkLinking() { // 安卓注入 if (window.aisim && window.aisim.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 (!Tools.isObject(param)) { console.error('$bridge.invoking 需要接受 JSON 对象!'); return; } // 转换发送参数键名为下划线 param = this.transKeyName('underline', param); // 如果有回调,转存回调 const name = 'cb' + this._data.count++ + 'at' + Date.now(); this[name] = (res) => { if (callback && Tools.isFunction(callback)) { if (res) { let data; try { // 转对象 data = typeof res === 'string' ? JSON.parse(res) : res; // 转换接收参数键名为驼峰 data = this.transKeyName('camel', data); } catch (e) { Tools.toast('跨端通讯异常:解析数据失败!'); return; } callback(data); } else { callback(); } } delete this[name]; }; // 发送 window.aisim.linking(JSON.stringify({ method, param, callback: 'bridge.' + name, })); } /** * 向 app 发起通讯 * @param {string} method * @param {object|function} [param] * @param {function} [callback] */ invoking(method, param = {}, callback) { // param 为函数时 if (param && Tools.isFunction(param)) { callback = param; param = {}; } 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; // 转换接收参数键名为驼峰 const param2 = this.transKeyName('camel', param); if (this._receives[method]) { // 有通知回调 if (marker) { this._receives[method](param2, (param2) => { this._sendTelling(method, param2 || {}, marker); }); } // 无通知回调 else { this._receives[method](param2); } } }; } /** * 回发App通知的响应 * @param {string} method * @param {object} param * @param {string} marker * @private */ _sendTelling(method, param, marker) { // 数据检查 if (!Tools.isObject(param)) { console.error('$bridge.register 注册的函数需要接受 JSON 对象!'); return; } // 转换发送参数键名为下划线 param = this.transKeyName('underline', param); // 发送 window.aisim.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'; } /** * 键名转换 * @param type * @param json */ transKeyName(type, json) { return Fetcher.prototype.transKeyName(type, json); } } // 全局服务实例 export const $bridge = new Bridge();