Html5は、同時に複数のsdkのヒントをサポートする

class Addon {
  constructor () {
    let ua = window.navigator.userAgent.toLowerCase()
    if (/MPBank/.test(window.navigator.userAgent)) {
      // China Merchants Bank applet
      
    } else if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      // Most phones can use this to determine if it's an applet, but a small number of phones like Huawei are slow to load, so there will be a miscalculation here
      if (window.__wxjs_environment === 'miniprogram' || ua.match(/miniprogram/i) == 'miniprogram') {
        
      } else {
        
      }
    } else if (/AlipayClient/.test(window.navigator.userAgent)) {
      // here use ua and miniprogram judgment, check compatibility first, use my.getEnv for asynchronous, not suitable here
      if (ua.match(/miniprogram/i) == 'miniprogram' || ua.match(/webview/i) == 'webview') {
        // Alipay applet
        
      } else {
        // Alipay
        
      }
    } else if (/xxxx-app/.test(window.navigator.userAgent)) {
      // app
      
    } else {
      // Other processing (web and third-party channel access) touting
      
    }
}

export let addon = new Addon()

export default class ParentAddon {
     scan (data) {
         data.success('xxx')
     }
}

export default class IosAppAddon extends ParentAddon {
    scan (data) {
        window.scanCallback = data.success
        window.webkit.messageHandlers.scan.postMessage({
          callBack: 'scanCallback'
        })
     }
}