判断是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中获取方法。
/**
* ios壳中方法全部放在webkit.messageHandlers对象中
* funcName 为原生方法名
* postMessage(null) 跨源传递数据,没有数据,一定要写null
*/
webkit.messageHandlers.funcName.postMessage(null)
/**
* android 为原生对象名
* funcName 为android对象中的方法
*/
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;
...
}
/**
* 原生调用后, H5做的事情...
* 注意, 如果这里用了this, 那么一定要注意这里的this,可能不是你想要的this
*/
funcitonName = (args) => {
... // something
}