判斷是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
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/1302.html
標籤：其他
下一篇：Android的三大影片