原生和web交互jsbridge交互总结
技术点:jsbridge。 一: 参数及其意义(代码意义结合支付项目) 二:主动请求原生参数与方法(sendapi) 参数1 判断接口类型 参数2 传递给原生的数据 参数3 回调函数,responseData 接受原生传递的数据 (1)获取原生的支付方法 (项目:点击支付去调用原生,弹出原生支付框) jsBridge.sendApi.choiceAppPay(jsBridge.sendType.choiceAppPayDefault, senData, function(responseData) { console.log(responseData) }) jsBridge.sendType.choiceAppPayDefault 判断接口类型 支付 sedData 调用方法的同时传递给原生的数据 responseData 调用方法的同时接受原生的数据 (2) 获取原生userid的方法 (进入首页获取用户userid 方法) jsBridge.sendApi.choiceWebGainAppData(jsBridge.sendType.userInfo, null,(responseData)=>{ jsBridge.sendType.userInfo 判断接口的类型 获取useid null 没有传递数据 responseData 获取原生的数据 let data = getJson(responseData); this.setUniqueIDMutations(data.userID); this.parameterObj.uniqueID = data.userID; this.listDate = []; this.renderOrderList(); }); 三: 提供给原生调用的方法及参数(recieveapi) 参1:jsBridge.recieveType.paystatus 判断原生需要调用的类型 参2: jsonData是接收的数据 参数3:respponsecallback 给原生的数据 (如:在原生调用方法之后会传递来状态码 8000.... 前端根据状态码来进行下一步的操作) 参数说明 : window[jsBridge.recieveType.paystatus] 判断给原生调用的是哪一个接口 window[jsBridge.recieveType.paystatus] = (jsonData,responseCallback)=> { //收到状态 console.log(jsonData); //判断状态码 let payStatusMessage =''; switch(jsonData.payStatusCode){ case "9000": payStatusMessage = '支付宝支付订单支付成功'; break; case "8000": payStatusMessage = '支付宝支付正在处理中,支付结果未知(有可能已经支付成功),请查询商户订单列表中订单的支付状态'; break; case "4000": payStatusMessage = '支付宝支付重复请求'; break; case "5000": payStatusMessage = '支付宝支付订单支付失败'; break; case "6001": payStatusMessage = '支付宝支付支付宝支付用户中途取消'; break; case "6002": payStatusMessage = '支付宝支付网络连接出错'; break; case "6004": payStatusMessage = '支付宝支付支付结果未知(有可能已经支付成功),请查询商户订单列表中订单的支付状态'; break; case "0": payStatusMessage = '微信支付成功'; break; case "-1": payStatusMessage = '微信支付错误:可能的原因:签名错误、未注册APPID、项目设置APPID不正确、注册的APPID与设置的不匹配、其他异常等。'; break; case "-2": payStatusMessage = '微信支付取消'; break; case "4001": payStatusMessage = '用户取消支付'; break; default: payStatusMessage = '其它支付错误'; break; } // let payLogSendInfo = { // SESSIONID:"123", // UNIQUEID:jsonData.userID, // TEMAIL:'', // PHONE:'', // ORDERID:jsonData.orderId, // LOGTYPE:2, // MESSAGE:`代码:${jsonData.payStatusCode},信息:${payStatusMessage}` // } // alert(JSON.stringify(payLogSendInfo)) //发送信息给后台 //请求成功 if(jsonData.payStatusCode === "9000" || jsonData.payStatusCode === "0" ) { // alert('支付成功') payLog("123",jsonData.userID,'','',jsonData.orderId,2,`代码:${jsonData.payStatusCode},信息:${payStatusMessage}`).then(res =>{ console.log(res); //跳转订单详情页 router.push({name: 'myOrderDetail', query: {orderID:jsonData.orderId }}) }).catch(err =>{ console.log(err); }) }else { //请求失败 // alert('支付失败') payLog("123",jsonData.userID,'','',jsonData.orderId,2,`代码:${jsonData.payStatusCode},信息:${payStatusMessage}`).then(res =>{ console.log(res); //跳转订单列表 router.push({name:'myOrder', params:{ orderListActive:1, }}) }).catch(err =>{ console.log(err); }) } //跳转订单详情页 //判断状态并处理 // if(jsonData.payStatusCode === 1){ // console.log('支付成功'); // getOrderDetail(jsonData.orderId).then(res =>{ // console.log(res.data.Data); // if(res.data.Data.STATUS === 0 || res.data.Data.STATUS === 2){ // //支付成功但显示待支付跳路由 // router.push({ // name:'myOrderDetail', // params:{ // } // }) // }else if(res.data.Data.STATUS === 1){ // //服务器也返回成功 // }else { // //其他错误 // console.log(res.data.Message); // } // }) // }else{ // console.log('支付失败'); // } const responseData = jsonData; responseCallback && responseCallback(responseData); }