判断是Android还是ios
isIos() {
// 判断是否是Ios
return /(iPhone|iPad|iPod|iOS|Mac|Mac)/i.test(navigator.userAgent)
}
isAndroid() {
// 判断是否是Android
return /(Android)/i.test(navigator.userAgent)
}
H5调用原生方法的方式
原生需要写方法来让H5调用,H5在window中获取方法。
webkit.messageHandlers.funcName.postMessage(null)
window.android.funcName ('')
封装H5调用原生方法的方式
//不带参数的方法
proceed(params) {
// 继续下载
if (this.isIos()) {
window.webkit.messageHandlers.proceed.postMessage({
params
})
} else if (this.isAndroid()) {
window.android.proceed(JSON.stringify(params))
}
}
//带参数
giveOrgId(params) {
// 传输数据
if (this.isIos()) {
window.webkit.messageHandlers.giveOrgId.postMessage({
params
})
} else if (this.isAndroid()) {
const { orgId, orgName } = params
window.android.giveOrgId(orgId, orgName)
}
}
原生调用H5的方法
H5把方法挂载到window给原生调用就可以了
componentDidMount() {
// funcitonName 是原生回调使用的方法名
window.funcitonName = this.funcitonName;
...
}
funcitonName = (args) => {
... // something
}