/**
|
* 跨端双向通讯桥
|
* @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\'}');
|
*/
|
|
import { Fetcher } from '@components/bases/Fetcher';
|
import { Tools } from '@components/common/Tools';
|
import { $fileTrans } from '@components/common/FileTransform';
|
|
export class Bridge {
|
|
constructor() {
|
this._data = {
|
count: 100,
|
fileSaved: {}, // 已保存图片名称列表 { 'blob:***' : 'bridge:***' }
|
fileLoaded: {}, // 已读取图片名称列表 { 'bridge:***' : 'blob:***' }
|
};
|
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);
|
}
|
|
/* ----- 文件系统 ----- */
|
|
/**
|
* 保存文件到 java 端，并返回文件名
|
* @param objUrl
|
* @param callback
|
*/
|
fileSave(objUrl = '', callback) {
|
// 非 ObjectURL 跳过
|
if (objUrl.indexOf('blob:') < 0) {
|
callback(objUrl);
|
return;
|
}
|
if (this._data.fileSaved[objUrl]) {
|
callback(this._data.fileSaved[objUrl]);
|
return;
|
}
|
// 分段存储
|
const saveFileChunk = (baseData, index) => {
|
const writeData = {
|
fileName: baseData.fileName,
|
currentIdx: index,
|
totalIdx: baseData.total,
|
data: baseData.baseArr[index],
|
};
|
this.invoking('img_write', writeData, res => {
|
if (res.result === false) {
|
Tools.toast(res.msg);
|
return;
|
}
|
// 按分段递归保存
|
if (index < baseData.total - 1) {
|
setTimeout(() => {
|
saveFileChunk(baseData, index + 1);
|
}, 10);
|
}
|
// 已完成
|
else {
|
callback && callback('bridge:' + baseData.fileName);
|
}
|
});
|
};
|
$fileTrans.transObjUrlToBaseData(objUrl, baseData => {
|
this._data.fileSaved[objUrl] = 'bridge:' + baseData.fileName;
|
saveFileChunk(baseData, 0);
|
});
|
}
|
|
/**
|
* 从 java 读取文件 base64
|
* @param bridgeName
|
* @param callback
|
*/
|
fileLoad(bridgeName = '', callback) {
|
// 非存储地址，跳过
|
if (bridgeName.indexOf('bridge:') < 0) {
|
callback(bridgeName);
|
return;
|
}
|
if (this._data.fileLoaded[bridgeName]) {
|
callback(this._data.fileLoaded[bridgeName]);
|
return;
|
}
|
const fileName = bridgeName.split(':')[1];
|
const chunkSize = $fileTrans.getChunkSize();
|
const baseArr = [];
|
let totalSize = 0;
|
let totalCount = 0;
|
const loadFileChunk = (index) => {
|
const loadData = {
|
fileName,
|
offset: chunkSize * index,
|
length: chunkSize,
|
};
|
this.invoking('img_read', loadData, res => {
|
if (res.result === false) {
|
Tools.toast(res.msg);
|
return;
|
}
|
if (totalSize === 0) {
|
totalSize = res.totalSize;
|
totalCount = Math.ceil(res.totalSize / chunkSize);
|
}
|
baseArr.push(res.data);
|
// 按分段递归读取
|
if (totalCount > 1 && totalCount - 1 > index) {
|
loadFileChunk(index + 1);
|
}
|
// 读取完成
|
else {
|
const baseData = {
|
baseArr,
|
fileName,
|
};
|
$fileTrans.transBaseDataToObjUrl(baseData, objUrl => {
|
this._data.fileLoaded[bridgeName] = objUrl;
|
callback && callback(objUrl);
|
});
|
}
|
});
|
};
|
loadFileChunk(0);
|
}
|
|
/**
|
* 从 java 端移除文件
|
* @param bridgeName
|
*/
|
fileRemove(bridgeName = '') {
|
if (bridgeName.indexOf('bridge:') < 0) {
|
return;
|
}
|
const fileName = bridgeName.split(':')[1];
|
this.invoking('img_del', { fileName });
|
// 移除
|
Object.keys(this._data.fileSaved).forEach(objUrl => {
|
if (bridgeName === this._data.fileSaved[objUrl]) {
|
delete this._data.fileSaved[objUrl];
|
}
|
});
|
}
|
|
/**
|
* 文件存储批量操作服务
|
* @param type
|
* @param names
|
* @param callback
|
*/
|
fileStore(type, names = [], callback) {
|
if (!names || names.length === 0) {
|
callback && callback([]);
|
}
|
// 保存
|
if (type === 'save') {
|
const list = [];
|
const save = index => {
|
this.fileSave(names[index], bridgeName => {
|
list.push(bridgeName);
|
// 递归下一个
|
if (index < names.length - 1) {
|
setTimeout(() => {
|
save(index + 1);
|
}, 10);
|
}
|
// 完成
|
else {
|
callback && callback(list);
|
}
|
});
|
};
|
save(0);
|
}
|
// 读取
|
else if (type === 'load') {
|
const list = [];
|
const load = index => {
|
this.fileLoad(names[index], objUrl => {
|
list.push(objUrl);
|
// 递归下一个
|
if (index < names.length - 1) {
|
setTimeout(() => {
|
load(index + 1);
|
}, 10);
|
}
|
// 完成
|
else {
|
callback && callback(list);
|
}
|
});
|
};
|
load(0);
|
}
|
// 移除
|
else if (type === 'remove') {
|
names.forEach((name, index) => {
|
setTimeout(() => {
|
this.fileRemove(name);
|
}, 10 * index);
|
});
|
}
|
}
|
|
}
|
|
// 全局服务实例
|
export const $bridge = new Bridge();
|
