原生和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);
}

  

 

posted on 2018-11-06 10:10  田庚的博客园  阅读(2283)  评论(0编辑  收藏  举报

导航