js-bridge-sdk

H5在线页面、H5离线包与APP端进行交互

代码

/* eslint-disable */

// 为保证SDK轻量，只是用Promise。只需压缩混淆，无需转码。引入端需使用babel-polyfill以支持Promise。
// Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise、Async等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

/**
 * APP使用库
 * IOS: https://github.com/marcuswestin/WebViewJavascriptBridge
 * ANDROID: https://github.com/lzyzsd/JsBridge 
*/
(function(window) {
  // Javascript SDK 初始化模板
  var YT = function() {
    return {
      version: '1.0.0',
      debug: window.YTBridgeDebug || false,
      isAndroid: (function () {
        return navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
      })(),
      isIos: (function () {
        return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      })(),
      trustedApp: (function () {
        var bool = (navigator.userAgent.toLowerCase().match(/HybirdApp ytai/i) == 'hybirdapp ytai') || (navigator.userAgent.toLowerCase().match(/HybirdApp youshitong/i) == 'hybirdapp youshitong')
        console.log('trustedApp: ', bool)
        return bool
      })(),
      appVersion: (function (){
        return navigator.userAgent.match(/\bhybirdapp ytai\/(\S*)/)[1]
        // 其中\b表示以什么开头，(\S)表示匹配一个或者多个空白以及空格字符
        // 常规请从APP获取版本号，此处仅作参考
      })(),
      // APP API LIST
      apiList: [
        /**
         * 获取APP API列表
        */
        "getApiList",
        /**
         * 返回APP
        */
        "backToApp",
        /**
         * 奖励动画
        */
        "rewardAnimation",
        /**
         * 开始录制
         */
        "aiSpokenStart",
        /**
         * 结束录制
         */
        "aiSpokenEnd",
    
      ],
      // WEB API LIST
      jsApiList: [
        /** 
         * APP主动启动课件
        */
        "init",
        /**
         * 物理键返回
         * 仅android
        */
        "appBack",
        /**
         * 有测评分数回调
         */
        "aiSpokenResult"
      ],
      // WEB API OBJECT
      callHandler: {},
      // DEFAULT APP API 
      registerDefaultFunction: function (arr) {
        arr.forEach(function (fn) {
          YT[fn] = function () {
            if (fn === 'getApiList') {
              return Promise.reject();
            } else {
              console.error('未找到api: ', fn)
              return Promise.reject();
            }
          }
        })
      },
      // APP API
      registerFunction: function (arr) {
        return new Promise(function (resolve, reject) {
          arr.forEach(function (fn, index) {
            if (YT.debug) {
              try {
                window.YTBridgeLocalTestFunction && YTBridgeLocalTestFunction(YT, fn)
              } catch (err) {
                console.err('YTBridgeLocalTestFunction: ', err)
              }
            } else {
              if (!YT.trustedApp) {
                // ERROR
                console.error('非法设备：', navigator.userAgent)
                return reject()
              }
              YT[fn] = function (params) {
                return YT.bridgeReady.then(function (bridge) {
                  return new Promise(function (resolve) {
                    console.log('YT[' + fn + ']: ', params)
                    bridge.callHandler(fn, params || {}, function (responseData) {
                      resolve(JSON.parse(responseData));
                    });
                  });
                })
              }
            }
            // 循环结束
            if (index == arr.length - 1) {
              resolve()
            }
          })
        })
      },
      // WEB API
      registerWebFunction: function (arr) {
        YT.bridgeReady.then(function (bridge) {
          if (bridge) {
            arr.forEach(function (fn) {
              YT.callHandler[fn] = function(data, callback) {
                console.log('【Default Function】YT.callHandler[' + fn + ']: ', data)
              }
              bridge.registerHandler(fn, function (data, responseCallback) {
                console.log('YT.callHandler[' + 'fn]: ', data)
                YT.callHandler[fn](data || {}, responseCallback);
              })
            })
          }
          // You can also define a default handler use init method, so that Java can send message to js without assigned handlerName
          // if (YT.isAndroid) {
          //   bridge.init(function(message, responseCallback) {
          //     console.log('JS got a message', message);
          //     var data = {
          //         'Javascript Responds': 'Wee!'
          //     };
          //     console.log('JS responding with', data);
          //     responseCallback(data);
          //   })
          // }
        }).catch(function (err) {
          console.log('YT.bridgeReady Error：' + err)
        }).finally(function() {
    
        })
      }
    }
  }
  // BRIDGE // 桥接
  YT.bridgeReady = new Promise(function (resolve, reject) {
    if (!YT.trustedApp || !(YT.isIos || YT.isAndroid)) {
      if (YT.debug) {
        resolve({
          init: function () { },
          registerHandler: function () { },
          callHandler: function () { }
        })
      } else {
        // ERROR
        console.error('非法设备：', navigator.userAgent)
        reject()
      }
      return
    }
    if (YT.isIos) {
      // IOS BRIDGE
      if (window.WebViewJavascriptBridge) { return resolve(WebViewJavascriptBridge); }
      if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(resolve); }
      window.WVJBCallbacks = [resolve];
      var WVJBIframe = document.createElement('iframe');
      WVJBIframe.style.display = 'none';
      WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
      document.documentElement.appendChild(WVJBIframe);
      setTimeout(function () { document.documentElement.removeChild(WVJBIframe); }, 0)
    } else if (YT.isAndroid) {
      // ANDROID BRIDGE
      if (window.WebViewJavascriptBridge) {
        resolve(WebViewJavascriptBridge)
      } else {
        document.addEventListener(
          'WebViewJavascriptBridgeReady'
          , function () {
            resolve(WebViewJavascriptBridge);
          },
          false
        )
      }
    }
  });
  
  YT.registerDefaultFunction(YT.apiList);
  YT.registerFunction(["getApiList"]);
  YT.registerWebFunction(YT.jsApiList);
  
  // APP API // 客户端接口准备就绪
  YT.ready = new Promise(function (resolve) {
    YT.getApiList().then(function (item) {
      YT.registerFunction(item.list).then(function () {
        resolve(YT);
      })
    })
  });
  
  // WEB API // 客户端方法监听
  YT.on = function(fn, callback) {
    console.log('on', fn)
    YT.callHandler[fn] = callback;
  }
  
  // LOCAL TEST // 浏览器调试
  function YTBridgeLocalTestFunction(YT, fn){
    YT[fn] = function () {
      return new Promise(function (resolve) {
        if (fn == "getApiList") {
          resolve({ list: YT.apiList, varsion: '1.0.0' });
        }
      });
    }
  }

  window.YT = YT
})(window, undefined);

/*********************************
 *          callHandler          *
 *********************************/

/**
* 获取客户端API列表，此方法为基础方法，每个版本必须存在
* @name getApiList
* @param {}
* @return { list : ['backToApp'...], version:'1.0.0', 其他字段: '待扩充' }
* @version 1.0.0
*/

/**
* 返回APP
* @name backToApp
* @param {}
* @return {}
* @version 1.0.0
*/

/**
* 奖励动画
* @name rewardAnimation
* @param { type: 'star', score: 1 || 2 || 3 }  
* - type: 奖励动画类型，方便扩充
* - score: 得分
* @return {}
* @version 1.0.0
*/

/** 
 * 开始录音评测
* @name aiSpokenStart
* @param { api:tencent/iflytek, language: cn/en, content:xxx, type:word/sentence }  
* - api: tencent腾讯  iflytek科大讯飞
* - language: cn中文 en英文
* - content: 识别内容
* - type: 识别类型 word单词 sentence句子
* @return {}
* @version 1.0.0
*/

/** 
 * 结束录音评测
* @name aiSpokenEnd
* @param {}  
* @return { score:75 }
* - score: 评测得分
* @version 1.0.0
*/



/*********************************
 *        registerHandler        *
 *********************************/

/**
* APP(android)监听返回按钮并调用appBack方法
* @name appBack
* @param {}
* @return {data: data, callback: callback}
* @version 1.0.0
  使用方法：
  // 开启物理返回键监听
  YT.backPermission({type:1})
  // 设置回调
  YT.callHandler.appBack = yourFunction;
  // 等同于
  YT.on('appBack', yourFunction)
*/

/**
* APP调用aiSpokenResult方法
* @name aiSpokenResult
* @param {}
* @return { score: 75, callback: callback}
* - score: 评测得分
* @version 1.0.0
  使用方法：
  // 设置回调
  YT.callHandler.aiSpokenResult = yourFunction;
  // 等同于
  YT.on('aiSpokenResult', callback)
*/