前端和Android(安卓)/ IOS 对接问题

16lz 2021-12-04

和 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写的话,会出现轮播左右滚动的问题)

更多相关文章

随机推荐