app与Android以及IOS的交互

估计都有这么一个心累的过程，就是老大给了一个任务，一脸茫然的赶脚，今日份的需求是，你去实现H5与Android以及IOS的交互，对于这个我真的想说不会啊~~只能各种百度加借鉴。
app页面使用的是React+umi+dva开发,一开始想的是怎么怎么的难,后来才发现只有当你明白如何交互的时候才知道如何完成需求的，先进行App调用Android以及IOS,代码如下

先触发点击事件

 this.openGoods(item)}  >  点击购买

2.点击事件如下
// 第一步是先判断一下你所出的是安卓还是IOS的环境
// 第二步根据不同环境进行方法调用(此时的方法名是与安卓,IOS确认过的)

 openGoods(item){  const {limit_id, group_id, join_id, type, activity_id} = this.state  const  env = this.getClient     if (env) { //安卓环境  window.android.+方法名(参数) window.android.openGoods(type, item.goods_id, join_id, limit_id, group_id, activity_id)  } else { //IOS环境  window.webkit.messageHandlers.+方法名+postMessage（参数,以对象形式发出)window.webkit.messageHandlers.openGoods.postMessage({  type: type, goods_id: item.goods_id, join_id: join_id,  limit_id: limit_id, group_id: group_id, activity_id: activity_id      })  }  }  getClient(){  //此方法判断环境const u = navigator.userAgent//android终端const isAndroid = u.indexOf('Android')>-1 || u.indexOf('Adr')>-1 //ios终端 const isIos = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if(isAndroid){ return 1 }else(isIOS){  return 0  }}

以上,实现App调用Android以及IOS,那么作为一个电商App,用户付款完成之后,我们又要来实Android以及IOS给用户的相应,也就是通俗的我们要给Android/IOS一个方法让他们进行调用跳转到我们想去的页面,代码如下

getPay() {  window['joinPayNotice'] = () => { //IOS    //业务逻辑    let token = getToken.sysParams.token    let url = '/joinMerchant/joinIn-contract?token=' + token    window.location.href = url  }    window.joinPayNotice = () => {//安卓    let token = getToken.sysParams.token    let url = '/joinMerchant/joinIn-contract?token=' + token    window.location.href = url  }}

嗯，就这样跳回了我们的合同页面,以上就是第一次实现app与android的交互总结

更多相关文章

随机推荐