第Html5同時支持多端sdk的小技巧在實際項目中，我們通常會需要做一些跨多平臺的頁面。比如說一個活動頁面，需要在微信小程序里展示，也需要在自家公司的app里面展示，還需要在支付寶等平臺里面展示。這時候一個h5就是很符合你的需要了。如果這個時候需求再復雜一些，比如說在這個活動頁面需要調(diào)些掃碼功能，或者需要調(diào)起支付功能，等原生方法調(diào)用的需求，那么這個時候你需要一個中間件，來處理不同端的原生方法。

中間件實現(xiàn)原理

原理很簡單，我們在抽象出來一個類，在這類里面，我們將需要用到原生的方法進行實現(xiàn)，其他終端對這個類進行繼承并重寫所有的方法。

偷懶的話，可以不要pc調(diào)試類，直接在父類實現(xiàn)pc調(diào)試類里的所有方法。

實現(xiàn)完了，接下來就是調(diào)用了，如果在每個頁面都判斷終端是哪端就太麻煩了，并且也沒有必要把每端的中間件代碼都加載進來（可以使用require進行異步加載）。在頁面加載的過程中，根據(jù)判斷創(chuàng)建對應終端的中間件對象addon，并將這個中間件對象掛載到window上面，在使用時候就可以直接使用window.addon.scan()

微信、支付寶都有其對應的判斷方法，但自家app的判斷,需要原生開發(fā)在userAgent里面添加標識（這個不復雜，原生都知道怎么加，不知道的請問度娘）

另外ioswebview不再支持同步方法，建議所有的方法采用異步調(diào)用方式,參考示例。

下面上一段我的判斷各端的代碼

classAddon{

constructor(){

letua=window.navigator.userAgent.toLowerCase()

if(/MPBank/.test(window.navigator.userAgent)){

//招商行小程序

}elseif(ua.match(/MicroMessenger/i)==micromessenger){

//大部分手機可采用此判斷，是否是小程序，但有小部分華為等手機因為加載慢，這里會出現(xiàn)誤判

if(window.__wxjs_environment===miniprogram||ua.match(/miniprogram/i)==miniprogram){

}else{

}elseif(/AlipayClient/.test(window.navigator.userAgent)){

//此處用ua和miniprogram判斷，先查看兼容性，使用my.getEnv為異步，不適合此處

if(ua.match(/miniprogram/i)==miniprogram||ua.match(/webview/i)==webview){

//支付寶小程序

}else{

//支付寶

}elseif(/xxxx-app/.test(window.navigator.userAgent)){

//app

}else{

//其他處理（web和第三方渠道進入）兜底

exportletaddon=newAddon()

下面是一個簡單的方法示例

ParentAddon.js

exportdefaultclassParentAddon{

scan(data){

data.success(xxx)

IosAppAddon.js

exportdefaultclassIosAppAddonextendsParentAddon{

scan(data){

window.scanCallback=data.