Html5同时支持多端sdk的小技巧

需求

在现实项目中，我们通常会需要做一些跨多平台的页面。比如说一个运动页面，需要在微信小程序里展示，也需要在自家公司的app内里展示，还需要在支付宝等平台内里展示。这时间一个h5就是很符合你的需要了。假如这个时间需求再复杂一些，比如说在这个运动页面需要调些扫码功能，或者需要调起支付功能，等原生方法调用的需求，那么这个时间你需要一个中心件，来处置处罚差异端的原生方法。

中心件实现原理

原理很简单，我们在抽象出来一个类，在这类内里，我们将需要用到原生的方法进行实现，其他终端对这个类进行继续并重写所有的方法。

偷懒的话，可以不要pc调试类，直接在父类实现pc调试类里的所有方法。
实现完了，接下来就是调用了，假如在每个页面都判定终端是哪端就太麻烦了，而且也没有须要把每端的中心件代码都加载进来（可以利用require进行异步加载）。在页面加载的过程中，根据判定创建对应终端的中心件对象addon，并将这个中心件对象挂载到window上面，在利用时间就可以直接利用window.addon.scan()

注意点

微信、支付宝都有其对应的判定方法，但自家app的判定, 需要原生开发在userAgent内里添加标识（这个不复杂，原生都知道怎么加，不知道的叨教度娘）
另外ios webview不再支持同步方法，发起所有的方法接纳异步调用方式, 参考示例。

上代码

下面上一段我的判定各端的代码

下面是一个简单的方法示例
ParentAddon.js

IosAppAddon.js

到此这篇关于Html5同时支持多端sdk的小技巧的文章就介绍到这了,更多相关Html5多端sdk内容请搜索脚本之家从前的文章或继续欣赏下面的相关文章，渴望大家以后多多支持脚本之家！