前端和Android / IOS 对接问题
16lz
2021-01-23
和 Android | IOS 对接问题
用js和 Android 和 IOS 对接交互,Android和Ios监听我每次点击的内容
(每次点击图片,向Android发送用户点击的信息,比如图片的地址,图片的id)
在js中写一个点击事件,和 Android 要取相应的字段
MKEngine.reportClickEvent(String(index), String(trm), String(trm2))
reportClickEvent是Android和个人指定交易的调取方法,String(index)是需要给Android传输的字段(我用的是字符串类型)
(每次点击图片,向IOS发送用户点击的信息,比如图片的地址,图片的id)
在js中写一个点击事件,和 IOS 要取相应的字段
window.webkit.messageHandlers.Share.postMessage({index: index,url: String(trm),tracker: String(trm2)})
Share 是 IOS 调取的方法,postMessage是发送给的数据,{index:’’,url:’’}是给 IOS 传输的数据内容。
如果js代码中写 Android 和 IOS 两个方法会浪费资源,(比如在 IOS 中 点击会发送 MKEngine.reportClickEvent和 window.webkit.messageHandlers,那么为了不必要的浪费建议写个判断(如下)
const juDge = navigator.userAgent;
const isAndroid = gejuD.indexOf('Android') > -1 || gejuD.indexOf('Adr') > -1;
(Android判断手机机型)
const isiOS = !!gejuD.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
(IOS手机判断手机机型)代码如下做判断
if (isAndroid) { MKEngine.reportClickEvent(String(index), String(trm), String(trm2)) } else if (isiOS) { window.webkit.messageHandlers.Share.postMessage({ index: index, url: String(trm), tracker: String(trm2) }) }
原生js封装好的代码如下
function shareClick(index) { const trm = lunbos[index].img; //获取数据中的图片 const trm2 = lunbos[index].tracker; //获取后台传输的tracker const u = navigator.userAgent; //获取手机类型 const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isAndroid) { MKEngine.reportClickEvent(String(index), String(trm), String(trm2)) } else if (isiOS) { window.webkit.messageHandlers.Share.postMessage({ index: index, url: String(trm), tracker: String(trm2) }) } };
注意以上在浏览器中是点击是无法看到返回的内容,只能在真机或手机模拟器中看到,在浏览器中 console.log(MKEngine.reportClickEvent)
或 console.log(window.webkit.messageHandlers)
会出现undefined
;
(代码不要在微信上直接复制发送,微信会产生转译,使代码无法使用,建议以文件形式发送)
(谨慎给后台的html模版,压缩后,无法直接使用,压缩后其中的空格和封号都会缩进到一起,注意:点击事件前需要手动给予空格分开,模版中的标签全部以全写使用)
(原生js,交互的写法在(原生js模版.html)可以看到,用swiper写的话,会出现轮播左右滚动的问题)
更多相关文章
- Android Jni代码示例讲解
- Android 多线程之synchronized锁住的是代码还是对象(二)
- android拍照获取图片
- 图片自适应imageView属性
- Android 用网络图片做帧动画
- Android有用代码片断(五)
- Android: 上传图片到服务器
- android系统本身的图片资源
- Android 给TextView 添加图片(左右等)