From ffc440f78182ba4949291b081e4949e9a0ca65a9 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 11 May 2021 15:42:52 +0800
Subject: [PATCH] 优化跨端通讯容错
---
common/Bridge.js | 197 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 197 insertions(+), 0 deletions(-)
diff --git a/common/Bridge.js b/common/Bridge.js
index e69de29..4bbb318 100644
--- a/common/Bridge.js
+++ b/common/Bridge.js
@@ -0,0 +1,197 @@
+/**
+ * 跨端双向通讯桥
+ * @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();
--
Gitblit v1.9.1