From 664d69fbe574bfaf3862d4804390e4b77df9fc19 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 23 Sep 2021 17:32:27 +0800
Subject: [PATCH] 实现抽屉公共组件，代替TaroUI的抽屉
---
common/Bridge.js | 138 ++++++++++++++++++++++++++--------------------
1 files changed, 78 insertions(+), 60 deletions(-)
diff --git a/common/Bridge.js b/common/Bridge.js
index f1cec46..9729423 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,20 @@
*/
_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 = typeof res === 'string' ? JSON.parse(res) : res;
+ // 转换接收参数键名为驼峰
+ data = this.transKeyName('camel', data);
callback(data);
} else {
callback();
@@ -108,11 +109,11 @@
delete this[name];
};
// 发送
- this._send({
+ window.aisim.linking(JSON.stringify({
method,
param,
callback: 'bridge.' + name,
- });
+ }));
}
/**
@@ -122,17 +123,18 @@
* @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 为函数时
+ 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 +142,29 @@
* @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) => {
+ debugger;
+ this._sendTelling(method, param2 || {}, marker);
+ });
+ }
+ // 无通知回调
+ else {
+ this._receives[method](param2);
+ }
}
};
}
/**
- * 发送响应
+ * 回发App通知的响应
* @param {string} method
* @param {object} param
* @param {string} marker
@@ -165,20 +172,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 +203,15 @@
return platform === 'android' || platform === 'iOS';
}
+ /**
+ * 键名转换
+ * @param type
+ * @param json
+ */
+ transKeyName(type, json) {
+ return Fetcher.prototype.transKeyName(type, json);
+ }
+
}
// 全局服务实例
--
Gitblit v1.9.1