Html5同时支持多端sdk的小技巧
发布时间：2021-11-15 17:07:18 作者：盗道 
我要评论
我要评论在实际项目中，我们通常会需要做一些跨多平台的页面。本文主要介绍了Html5同时支持多端sdk的小技巧，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
需求
在实际项目中，我们通常会需要做一些跨多平台的页面。比如说一个活动页面，需要在微信小程序里展示，也需要在自家公司的app里面展示，还需要在支付宝等平台里面展示。这时候一个h5就是很符合你的需要了。如果这个时候需求再复杂一些，比如说在这个活动页面需要调些扫码功能，或者需要调起支付功能，等原生方法调用的需求，那么这个时候你需要一个中间件，来处理不同端的原生方法。
中间件实现原理
原理很简单，我们在抽象出来一个类，在这类里面，我们将需要用到原生的方法进行实现，其他终端对这个类进行继承并重写所有的方法。
偷懒的话，可以不要pc调试类，直接在父类实现pc调试类里的所有方法。
实现完了，接下来就是调用了，如果在每个页面都判断终端是哪端就太麻烦了，并且也没有必要把每端的中间件代码都加载进来（可以使用require进行异步加载）。在页面加载的过程中，根据判断创建对应终端的中间件对象addon，并将这个中间件对象挂载到window上面，在使用时候就可以直接使用window.addon.scan()
注意点
微信、支付宝都有其对应的判断方法，但自家app的判断, 需要原生开发在userAgent里面添加标识（这个不复杂，原生都知道怎么加，不知道的请问度娘）
另外ios webview不再支持同步方法，建议所有的方法采用异步调用方式, 参考示例。
上代码
下面上一段我的判断各端的代码
class Addon {
constructor () {
let ua = window.navigator.userAgent.toLowerCase()
if (/MPBank/.test(window.navigator.userAgent)) {
// 招商行小程序
} else if (ua.match(/MicroMessenger/i) == 'micromessenger') {
// 大部分手机可采用此判断，是否是小程序，但有小部分华为等手机因为加载慢，这里会出现误判
if (window.__wxjs_environment === 'miniprogram' || ua.match(/miniprogram/i) == 'miniprogram') {
} else {
}
} else if (/AlipayClient/.test(window.navigator.userAgent)) {
// 此处用ua和miniprogram判断，先查看兼容性，使用my.getEnv为异步，不适合此处
if (ua.match(/miniprogram/i) == 'miniprogram' || ua.match(/webview/i) == 'webview') {
// 支付宝小程序
} else {
// 支付宝
}
} else if (/xxxx-app/.test(window.navigator.userAgent)) {
// app
} else {
// 其他处理（web和第三方渠道进入） 兜底
}
}
export let addon = new Addon()
下面是一个简单的方法示例
ParentAddon.js
export default class ParentAddon {
scan (data) {
data.success('xxx')
}
}
IosAppAddon.js
export default class IosAppAddon extends ParentAddon {
scan (data) {
window.scanCallback = data.success
window.webkit.messageHandlers.scan.postMessage({
callBack: 'scanCallback'
})
}
}
到此这篇关于Html5同时支持多端sdk的小技巧的文章就介绍到这了,更多相关Html5多端sdk内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
在 HTML5 中，文档对象（即 document 对象）具有一个 visibilityState 属性，该属性表示当前文档对象的可见性状态，这篇文章主要介绍了HTML5中的DOCUMENT.VISIBILITYSTATE2023-05-05
表格是常见的数据统计的一种形式，合并单元格及合并表头经常在复杂表格中遇到，本文主要介绍了html原生table实现合并单元格以及合并表头的示例代码，感兴趣的可以了解一下2023-04-28
分时大盘回顾功能是一种用于分析股票行情的工具，本文就介绍一下HTML5 Canvas 绘制股市走势图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习2023-04-25
开发uni-app的编辑器HBuilderX可以将H5项目打包成APP，相信很多小伙伴还不知道这个功能，下面将介绍下如何将H5打包成APP，感兴趣的朋友一起看看吧2023-04-03- 本文将介绍移动端H5实现拍照功能的两种方法：使用HTML5的input标签和使用第三方插件，帮助读者更好地理解和掌握移动端H5拍照功能的实现，感兴趣的可以了解一下2023-03-30
普通的显示数据的时候，ul就是项目列表，li就是列表项，可以用来显示数据，如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景2023-02-20- 本文主要介绍了Html5播放器实现倍速播放的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2023-01-12
在HTML5中，可以使用Web Worker创建一个后台线程执行一个耗时任务，本文主要介绍了HTML5 Web Worker(多线程处理)，感兴趣的可以了解一下2023-01-12
短视频已经无数不在了，但是主体还是使用 app 来承载的，本文讲述 H5 如何实现 app 的视频滑动体验，本文对实现过程中踩到的坑做一个总结，结合示例代码给大家介绍的非常详2023-01-05
这篇文章主要介绍了HTML5页面打开微信小程序功能，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-20
最新评论