小程序支付(小程序端+JAVA后端)

转载 _ccj 2020/3/21 4:31:21

最近做了一款简单的电商小程序,目前还没上线,不过支付功能已开发完,所以整理和大家分享下,有什么不对的地方,还请大家提出来,你的纠正是我最大的进步。
内容前提:建议请认真看一遍官方支付文档
先来一张图
图片描述
大体流程分析:
1.小程序:点击支付按钮,请求后台接口,返回5个必要参数(用于之后调wx.requestPayment(OBJECT))。
2.JAVA: 调用统一下单接口,生成微信预支付订单,并返回结果。
3.小程序:接收到5个参数后,调用wx.requestPayment(OBJECT),此时小程序唤起了输入密码的支付弹窗,我们可以选择关闭弹窗和支付,然后根据情况跳转到不同页面。
4.JAVA: 当在小程序内支付完后,此时微信服务器会有规律性给你的支付回调地址发起请求,通知你支付结果。
那么接下来我们详细看一下代码

小程序端代码

//点击支付按钮
async pay() {
        if(!this.address){
          wx.showToast({
            title: "请选择收货地址", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层,防止触摸穿透,
          });
        }
        if(this.listData.length == 0){
          wx.showToast({
            title: "未选择任何商品,请重新选择商品", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层,防止触摸穿透,
          });
        }
        if(this.allprice <= 0){
          wx.showToast({
            title: "付款金额小于或等于0元,请重新选择商品进行支付", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层,防止触摸穿透,
          });
        }

        const data = await post("/api/pay/onPay", {
          openId: this.openId,
          body:this.listData[0].goods_name,
          address: JSON.stringify(this.address),
          allPrice: this.allprice,
          listData: JSON.stringify(this.listData)
        });

        if(data){
          if(data.model.orderId != 0){
            this.payMent = data.model;
            console.log(data);
            //返回成功,小程序端可直接唤起输入密码弹窗
            this.doWxPay(data.model);
          }else{
            wx.showToast({
            title: "系统订单生成异常,请稍后重试或联系管理员", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层,防止触摸穿透,
          });
          }
        }
      },
//唤起输入密码弹窗
doWxPay: function(param){
        var that = this;
        //小程序发起微信支付
        console.log("发起支付")
        wx.requestPayment({
            timeStamp: param.timeStamp,
            nonceStr: param.nonceStr,
            package: param.package,
            signType: 'MD5',
            paySign: param.paySign,
            success: function (event) {
                // success
                console.log(event);
                wx.showToast({
                    title: '支付成功',
                    icon: 'success',
                    duration: 2000
                });

                wx.redirectTo({
                  url: '/pages/orderdetail/main?orderId=' + that.payMent.orderId
                })
            },
            fail: function (error) {
                // fail
                console.log("支付失败")
                console.log(error)
                wx.redirectTo({
                  url: '/pages/orderdetail/main?orderId=' + that.payMent.orderId
                });
            },
            complete: function () {
                // complete
                console.log("pay complete")
            }
        });
      },
点击查看更多内容
随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[小程序支付(小程序端+JAVA后端)]http://www.zyiz.net/tech/detail-120240.html

上一篇:疫情下互联网又遇“荒年”?有人被迫降薪,可仍有人逆势王者!

下一篇:「小程序JAVA实战」小程序的分享和下载功能(69)

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    扫一扫关注最新编程教程