| | |
| | | /** |
| | | * 跨端双向通讯桥 |
| | | * @author Tevin |
| | | * @version 1.3.0 |
| | | * @tutorial |
| | | * 网页对 App 发起通讯 |
| | | * 通讯策略 |
| | | * 1. App 对网页一般为单向通知,无资源管理要求 |
| | | * 2. 网页对 App 发起单向通知时,也无资源管理要求 |
| | | * 3. 网页对 App 发起单次通讯时,如诺 App 未执行回调,前端将在5分钟后字段释放资源 |
| | | * 4. 网页对 App 发起持续性通讯时,应转换为 App 对网页发起通知,通知无资源管理要求(而不是使用轮询或监听,需要手动停止释放资源) |
| | | * 5. 网页对 App 发起通讯,两端具体处理方式如下: |
| | | * - 如果 callback 有值,App 端在各种情况下,都尽量执行回调,以便于前端更快释放资源 |
| | | * - 如果 callback 无值,即为单向通知,此时 App 无需处理回调(消息提示由 App 端执行) |
| | | * - 如果 App 出现报错或异常,执行 callback 回调时不传任何内容(不能传空对象或空字符串,直接为空)(错误提醒由 App 执行) |
| | | * - 如果通讯正常,但是业务为支线流程,例如取消操作,则返回标识表明取消操作(消息提示由网页端执行) |
| | | * 网页对 App 发起通讯操作步骤 |
| | | * 1. 【App端】App 注册接收器,用于接收网页通知 |
| | | * 在页面打开之前,App 注入方法 linking = function(paramStr) { <Native Code> } |
| | | * 2. 网页业务中 js 发起通讯 |
| | |
| | | * window.linking('{method:\'methodName\', param:{key1:\'value1\'}, callback:\'bridge.cb111at1541994536008\'}'); |
| | | * 4. 【App端】App 处理完后直接调用网页上的全局回调,并传递结果完成通讯 |
| | | * bridge.cb101at1541994536008('{key2:\'value2\'}'); |
| | | * App 对网页发起通讯 |
| | | * App 对网页发起通讯操作步骤 |
| | | * 1. 网页注册接收器,用于接收 App 通知 |
| | | * window.telling = function(dataStr) { someJs }; |
| | | * 2. 网页业务中注册接收通讯 |
| | |
| | | import { $fileTrans } from '@components/common/FileTransform'; |
| | | |
| | | export class Bridge { |
| | | |
| | | constructor() { |
| | | this._data = { |
| | | count: 100, |
| | | fileSaved: {}, // 已保存图片名称列表 { 'blob:***' : 'bridge:***' } |
| | | fileLoaded: {}, // 已读取图片名称列表 { 'bridge:***' : 'blob:***' } |
| | | fileSaved: {}, // 已保存图片名称列表 { 'blob:***' : 'bridge:***' } |
| | | fileLoaded: {}, // 已读取图片名称列表 { 'bridge:***' : 'blob:***' } |
| | | }; |
| | | this._receives = {}; |
| | | this._earlyInvok = []; |
| | |
| | | |
| | | /** |
| | | * 发起一次发送 |
| | | * @param {string} method |
| | | * @param {object} param |
| | | * @param {function} callback - 来自网页业务逻辑的回调 |
| | | * @param {String} method |
| | | * @param {Object} [param] |
| | | * @param {Function} [callback] - 来自网页业务逻辑的回调 |
| | | * @private |
| | | */ |
| | | _sendLinking(method, param, callback) { |
| | |
| | | } |
| | | // 转换发送参数键名为下划线 |
| | | 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 cbName = ''; |
| | | if (callback && Tools.isFunction(callback)) { |
| | | cbName = 'cb' + this._data.count++ + 'at' + Date.now(); |
| | | // 5分钟后超时,自动清除资源 |
| | | const timer = setTimeout(() => { |
| | | // 释放资源 |
| | | callback = null; |
| | | this[cbName] = () => { |
| | | delete this[cbName]; |
| | | Tools.toast('跨端通讯超时,请关掉页面重试!'); |
| | | }; |
| | | }, 5 * 60 * 1000); |
| | | // 挂载到全局 |
| | | this[cbName] = res => { |
| | | // res有值,正常通讯 |
| | | if (typeof res !== 'undefined') { |
| | | let data; |
| | | try { |
| | | // 转对象 |
| | |
| | | Tools.toast('跨端通讯异常:解析数据失败!'); |
| | | return; |
| | | } |
| | | // 回传业务层,忽略来自业务层的报错 |
| | | callback(data); |
| | | } else { |
| | | callback(); |
| | | } |
| | | } |
| | | delete this[name]; |
| | | }; |
| | | // res 无值,视为 java 层异常,由 java 层进行异常提醒 |
| | | else { |
| | | // do nothing |
| | | } |
| | | // 执行一次后释放资源 |
| | | callback = null; |
| | | delete this[cbName]; |
| | | clearTimeout(timer); |
| | | }; |
| | | } |
| | | // 发送 |
| | | window.aisim.linking(JSON.stringify({ |
| | | method, |
| | | param, |
| | | callback: 'bridge.' + name, |
| | | })); |
| | | window.aisim.linking( |
| | | JSON.stringify({ |
| | | method, |
| | | param, |
| | | callback: cbName ? 'bridge.' + cbName : '', |
| | | }), |
| | | ); |
| | | } |
| | | |
| | | /** |
| | | * 向 app 发起通讯 |
| | | * @param {string} method |
| | | * @param {object|function} [param] |
| | | * @param {function} [callback] |
| | | * @param {String} method |
| | | * @param {Object|Function} [param] |
| | | * @param {Function} [callback] |
| | | */ |
| | | invoking(method, param = {}, callback) { |
| | | // param 无值时 |
| | | if (!param) { |
| | | param = {}; |
| | | } |
| | | // param 为函数时 |
| | | if (param && Tools.isFunction(param)) { |
| | | else if (param && Tools.isFunction(param)) { |
| | | callback = param; |
| | | param = {}; |
| | | } |
| | |
| | | * @private |
| | | */ |
| | | _initReceive() { |
| | | window.telling = (res) => { |
| | | 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._receives[method](param2, param2 => { |
| | | this._sendTelling(method, param2 || {}, marker); |
| | | }); |
| | | } |
| | |
| | | else { |
| | | this._receives[method](param2); |
| | | } |
| | | } |
| | | // 未注册的协议 |
| | | else { |
| | | console.warn('BridgeTelling:通讯协议【' + method + '】尚未注册!'); |
| | | } |
| | | }; |
| | | } |
| | |
| | | // 转换发送参数键名为下划线 |
| | | param = this.transKeyName('underline', param); |
| | | // 发送 |
| | | window.aisim.linking(JSON.stringify({ |
| | | method, |
| | | param, |
| | | marker, |
| | | })); |
| | | window.aisim.linking( |
| | | JSON.stringify({ |
| | | method, |
| | | param, |
| | | marker, |
| | | }), |
| | | ); |
| | | } |
| | | |
| | | /** |
| | |
| | | fileName: writeData.fileName, |
| | | currentIdx: writeData.currentIdx, |
| | | totalIdx: writeData.total, |
| | | data: '(' + writeData.data.length + '个base64字符...)', |
| | | data: |
| | | (writeData.data || '').substr(0, 10) + |
| | | '...(共' + |
| | | (writeData.data || '').length + |
| | | '个base64字符)', |
| | | }, |
| | | response: res, |
| | | }); |
| | |
| | | const baseArr = []; |
| | | let totalSize = 0; |
| | | let totalCount = 0; |
| | | const loadFileChunk = (index) => { |
| | | const loadFileChunk = index => { |
| | | const loadData = { |
| | | fileName, |
| | | offset: chunkSize * index, |
| | |
| | | Tools.toast('离线图片读取:' + res.msg); |
| | | onError({ |
| | | method: 'img_read', |
| | | request: loadData, |
| | | request: { |
| | | ...loadData, |
| | | totalCount, |
| | | }, |
| | | response: { |
| | | result: res.result, |
| | | msg: res.msg, |
| | | 'total_size': res.totalSize, |
| | | data: '(' + (res.data || '').length + '个base64字符...)', |
| | | total_size: res.totalSize, |
| | | data: |
| | | (res.data || '').substr(0, 10) + |
| | | '...(共' + |
| | | (res.data || '').length + |
| | | '个base64字符)', |
| | | }, |
| | | }); |
| | | return; |
| | |
| | | response: { |
| | | result: res.result, |
| | | msg: res.msg, |
| | | 'total_size': res.totalSize, |
| | | data: '(' + (res.data || '').length + '个base64字符...)', |
| | | total_size: res.totalSize, |
| | | data: |
| | | (res.data || '').substr(0, 10) + |
| | | '...(共' + |
| | | (res.data || '').length + |
| | | '个base64字符)', |
| | | }, |
| | | base64Arr: baseData.baseArr.map( |
| | | baseItem => |
| | | (baseItem || []).substr(0, 10) + |
| | | '...(共' + |
| | | (res.data || '').length + |
| | | '个base64字符)', |
| | | ), |
| | | message: 'Base64合并解析异常!', |
| | | }); |
| | | } |
| | |
| | | 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); |
| | | } |
| | | }, err => { |
| | | callback && callback(null, err); |
| | | }); |
| | | this.fileSave( |
| | | names[index], |
| | | bridgeName => { |
| | | list.push(bridgeName); |
| | | // 递归下一个 |
| | | if (index < names.length - 1) { |
| | | setTimeout(() => { |
| | | save(index + 1); |
| | | }, 10); |
| | | } |
| | | // 完成 |
| | | else { |
| | | callback && callback(list); |
| | | } |
| | | }, |
| | | err => { |
| | | callback && callback(null, err); |
| | | }, |
| | | ); |
| | | }; |
| | | 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); |
| | | } |
| | | }, err => { |
| | | callback && callback(null, err); |
| | | }); |
| | | this.fileLoad( |
| | | names[index], |
| | | objUrl => { |
| | | list.push(objUrl); |
| | | // 递归下一个 |
| | | if (index < names.length - 1) { |
| | | setTimeout(() => { |
| | | load(index + 1); |
| | | }, 10); |
| | | } |
| | | // 完成 |
| | | else { |
| | | callback && callback(list); |
| | | } |
| | | }, |
| | | err => { |
| | | callback && callback(null, err); |
| | | }, |
| | | ); |
| | | }; |
| | | load(0); |
| | | } |
| | |
| | | }); |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | // 全局服务实例 |