原生和web交互jsbridge交互总结

时间:2021-05-01 21:38:08
 技术点: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);
}