uni-js-bridge.es5.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. if (window.UniJsBridge) {
  2. throw new Error('UniJsBridge已经存在了');
  3. }
  4. var uniqueId = 1; // 全局唯一标识,主要用来生产callbackId
  5. var responseCallbacks = {}; // 给客户端发送消息后的回调函数集合
  6. var messageHandlers = {}; // 在H5中注册的函数(就是等待客户端调用的函数)的集合
  7. var receiveMessageQueue = []; // 消息队列,Native给H5发消息的队列,所有的消息都集中在此,依次调用
  8. if (!uni) {
  9. throw new Error('uni未定义,需要先引入uni-sdk,地址为:https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js');
  10. }
  11. var UniJsBridge = {
  12. init: init,
  13. send: send,
  14. callHandler: callHandler,
  15. registerHandler: registerHandler,
  16. uni: uni,
  17. _handleMessageFromNative: _handleMessageFromNative,
  18. };
  19. // Native调用H5函数必须是要挂载到window下
  20. window.UniJsBridge = UniJsBridge;
  21. function init(messageHandler) {
  22. if (UniJsBridge._messageHandler) {
  23. throw new Error('UniJSBridge._messageHandler 被调用了两次');
  24. }
  25. UniJsBridge._messageHandler = messageHandler;
  26. var receiveMessage = receiveMessageQueue;
  27. receiveMessageQueue = null;
  28. for (var i = 0; i < receiveMessage.length; i++) {
  29. _dispatchMessageFromNative(receiveMessage[i]);
  30. }
  31. }
  32. /**
  33. * 发送消息给客户端
  34. * PS:主动发送
  35. * @param data 给客户端的数据
  36. * @param responseCallback 回调函数
  37. */
  38. function send(data, responseCallback) {
  39. _doSend('send', data, responseCallback);
  40. }
  41. // 调用线程
  42. function callHandler(handlerName, data, responseCallback) {
  43. _doSend(handlerName, data, responseCallback);
  44. }
  45. /**
  46. * 注册一个函数,待客户端调用
  47. * PS:被动等待调用
  48. * @param handlerName
  49. * @param handler: 接收两个参数,data(客户端回复给H5的数据),responseCallback(一个回调函数:调用该函数,客户端才可以执行回调,且可以传参数给客户端)
  50. */
  51. function registerHandler(handlerName, handler) {
  52. messageHandlers[handlerName] = handler;
  53. }
  54. /**
  55. * 发送给客户端的核心函数,依赖uni-app SDk
  56. * PS:主动发送
  57. * @param handlerName
  58. * @param message
  59. * @param responseCallback: 可接收String和Function,如果为String的话就是给客户端的一个回调ID,这个ID其实本来就是由客户端自己传过来的
  60. * 如果为Function的话就是H5的回调函数
  61. * @private
  62. */
  63. function _doSend(handlerName, message, responseCallback) {
  64. var callbackId;
  65. if (typeof responseCallback === 'string') {
  66. callbackId = responseCallback;
  67. }
  68. else if (responseCallback) {
  69. /**
  70. * 把回调函数塞进集合中去,待客户端代码执行完毕就去找到对应的函数开始执行
  71. */
  72. callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
  73. responseCallbacks[callbackId] = responseCallback;
  74. }
  75. else {
  76. callbackId = '';
  77. }
  78. if (!uni.postMessage) {
  79. return console.error('此接口依赖uni.webview,具体参考:https://uniapp.dcloud.io/component/web-view');
  80. }
  81. // 给客户端发送消息
  82. uni.postMessage({
  83. data: {
  84. data: message,
  85. callbackId: callbackId,
  86. handlerName: handlerName,
  87. },
  88. });
  89. }
  90. function _dispatchMessageFromNative(messageJSON) {
  91. if (!messageJSON) {
  92. return console.warn('客户端没有回复任何消息');
  93. }
  94. try {
  95. /**
  96. * responseId: 客户端回复前端的回调函数的ID
  97. * callbackId: 给客户端自己用的回调ID
  98. * handlerName: 前后端统一约定的一个名字[约定不同的名字对应不同的功能,需要后期加,这里只是封装的一个方法]
  99. * responseData: 客户端给前端的参数
  100. */
  101. var callbackId = messageJSON.callbackId, responseId = messageJSON.responseId, handlerName = messageJSON.handlerName, responseData = messageJSON.responseData;
  102. var responseCallback = void 0;
  103. if (responseId) {
  104. responseCallbacks[responseId] && responseCallbacks[responseId](responseData);
  105. delete responseCallbacks[responseId];
  106. }
  107. else {
  108. if (callbackId) {
  109. var callbackResponseId_1 = callbackId;
  110. responseCallback = function (responseData) {
  111. _doSend('response', responseData, callbackResponseId_1);
  112. };
  113. }
  114. var handler = UniJsBridge._messageHandler;
  115. if (handlerName) {
  116. handler = messageHandlers[handlerName];
  117. }
  118. handler(responseData, responseCallback);
  119. }
  120. }
  121. catch (e) {
  122. console.log(e);
  123. }
  124. }
  125. /**
  126. * 提供给客户端调用的函数,
  127. * 约定客户端只能通过此函数发消息给H5
  128. * @param messageJSON
  129. * @private
  130. */
  131. function _handleMessageFromNative(messageJSON) {
  132. if (receiveMessageQueue) {
  133. receiveMessageQueue.push(messageJSON);
  134. }
  135. _dispatchMessageFromNative(messageJSON);
  136. }
  137. //# sourceMappingURL=uni-js-bridge.es5.js.map