Android、ios和H5交互 |
您所在的位置：网站首页 › 如何用vue和h5开发app › Android、ios和H5交互 |
Android、ios和H5交互
|
需求描述: 在App中点击icon通过iframe打开H5子页面。 遇到的问题: 1. 工程将App和H5子页面没有部署在同一个端口下，造成跨域问题(如下图)。 2. H5向Android和ios发送消息时, 需要父系窗口发送消息。 3. H5注册回调信息时,也需要注册在父系窗口上。
H5向Android和ios发送消息, 方法名称都是和Android、ios协商定义。 if (window.nativeObject) { // Android window?.nativeObject?.nativeMethodChannel(JSON.stringify({ method: mediaType, data: {} })) } else if (window?.WebViewJavascriptBridge) { //iOS单层网页 window?.WebViewJavascriptBridge?.callHandler(mediaType, null, () => { // const result = response.result }) } else if (window?.parent?.WebViewJavascriptBridge) { //iOS网页嵌入模式 window?.parent?.WebViewJavascriptBridge?.callHandler(mediaType, null, () => { // const result = response.result }) }H5接收Android和ios回调消息, Android和ios返回给H5的是base64。 let recordStr = function(base64Str) { console.info('回调:', base64Str) const bstr = window.atob(base64Str) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } const blob = new Blob([u8arr], { type: 'audio/wav' }) } // 判断是否有父窗口, 安卓是直接接收 if (window.parent !== window.self) { window.parent.onRecordResult = recordStr } else { window.onRecordResult = recordStr } // ios接收的回调 if (window?.WebViewJavascriptBridge) { window?.WebViewJavascriptBridge?.registerHandler('onRecordResult', window.onRecordResult) } else if (window?.parent?.WebViewJavascriptBridge) { window?.parent?.WebViewJavascriptBridge?.registerHandler('onRecordResult', window.parent.onRecordResult) } |
【本文地址】
今日新闻 |
推荐新闻 |