From dcf664aa949c57b1fa6f7e1f2157d2b8e76f9dbe Mon Sep 17 00:00:00 2001 From: Tevin <tingquanren@163.com> Date: Tue, 23 Nov 2021 16:27:51 +0800 Subject: [PATCH] 页面筛选器,加大字体大小 --- common/Bridge.js | 146 ++++++++++++++++++++++++++++-------------------- 1 files changed, 85 insertions(+), 61 deletions(-) diff --git a/common/Bridge.js b/common/Bridge.js index f1cec46..1f644ea 100644 --- a/common/Bridge.js +++ b/common/Bridge.js @@ -2,26 +2,28 @@ * 跨端双向通讯桥 * @author Tevin * @tutorial - * 网页对 app 发起通讯 - * 1. app 注册接收机制 - * app 在网页打开之前,注入方法 linking - * 2. js 发起 - * bridge.invoking('methodName', {key1:'value1'}, function(res){console.log(res)}); - * 3. Bridge 转换为发送 + * 网页对 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 处理完后直接调用网页上的回调,并传递结果 + * 4. 【App端】App 处理完后直接调用网页上的全局回调,并传递结果完成通讯 * bridge.cb101at1541994536008('{key2:\'value2\'}'); - * app 对网页发起通讯 - * 1. 网页注册接收器,用于接收 app - * window.telling = function(dataStr) {}; - * 2. 网页注册业务 - * bridge.register('methodName', function(data, callback){}); - * 3. app 调用(至少需要在页面完成再延迟至少1秒之后) + * 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. 网页完成业务逻辑处理,并回调 + * 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 { @@ -30,7 +32,10 @@ count: 100, }; this._receives = {}; + this._earlyInvok = []; this._init(); + // 挂载到全局 + window.bridge = this; } /** @@ -40,7 +45,7 @@ */ _checkLinking() { // 安卓注入 - if (window.iTop && window.iTop.linking) { + if (window.aisim && window.aisim.linking) { return 'android'; } // 没有注入 @@ -59,25 +64,17 @@ 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 方法!'); + this._initReceive(); + // 补发 + if (this._earlyInvok.length > 0) { + this._earlyInvok.forEach(invok => { + const { method, param, callback } = invok; + this._sendLinking(method, param, callback); + }); + } } } @@ -90,16 +87,27 @@ */ _sendLinking(method, param, callback) { // 数据检查 - if (Object.prototype.toString.call(param) !== '[object Object]') { + 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 && Object.prototype.toString.call(callback) === '[object Function]') { + if (callback && Tools.isFunction(callback)) { if (res) { - const data = typeof res === 'string' ? JSON.parse(res) : 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(); @@ -108,11 +116,11 @@ delete this[name]; }; // 发送 - this._send({ + window.aisim.linking(JSON.stringify({ method, param, callback: 'bridge.' + name, - }); + })); } /** @@ -121,18 +129,19 @@ * @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; + invoking(method, param = {}, callback) { + // param 为函数时 + if (param && Tools.isFunction(param)) { + callback = param; param = {}; } - this._sendLinking(method, param, callback); + if (this._checkLinking()) { + this._sendLinking(method, param, callback); + } + // 尚未准备好,挂起 + else { + this._earlyInvok.push({ method, param, callback }); + } } /** @@ -140,24 +149,28 @@ * @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; + const { method, param, marker } = data; + // 转换接收参数键名为驼峰 + const param2 = this.transKeyName('camel', param); if (this._receives[method]) { - this._receives[method](param, (param2) => { - this._sendTelling(method, param2, marker); - }); + // 有通知回调 + 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 @@ -165,20 +178,22 @@ */ _sendTelling(method, param, marker) { // 数据检查 - if (Object.prototype.toString.call(param) !== '[object Object]') { + if (!Tools.isObject(param)) { console.error('$bridge.register 注册的函数需要接受 JSON 对象!'); return; } + // 转换发送参数键名为下划线 + param = this.transKeyName('underline', param); // 发送 - this._send({ + window.aisim.linking(JSON.stringify({ method, param, marker, - }); + })); } /** - * 注册接收指令,可供 app 查询 + * 注册接收指令,可接收 app 通知 * @param method * @param callback */ @@ -194,6 +209,15 @@ return platform === 'android' || platform === 'iOS'; } + /** + * 键名转换 + * @param type + * @param json + */ + transKeyName(type, json) { + return Fetcher.prototype.transKeyName(type, json); + } + } // 全局服务实例 -- Gitblit v1.9.1