全网最详细实现微信小程序支付功能【前端部分】

文章目录

• • 功能描述：
  • 准备工作
  • • 申请微信支付接口权限
    • 微信支付api需要的参数说明
    • • • 示例代码
        • 需要传入后端接口的参数说明：
        • 接口返回的参数说明：
        • 支付逻辑代码（只包含支付功能）
        • 以下是功能完整代码
        • • 确认订单页面
          • • 结构部分
            • 逻辑部分（内涵详细注释）
            • 样式部分
            • 优惠券页面
            • 待支付页面
            • • 结构部分
              • 逻辑部分（内含详细注释）
              • 样式部分

                功能描述：

                用户点击立即购买后进入确认订单页面，在此页面可选择商品数量，是否使用优惠券，以及一些简单的个人信息填写，点击支付输入密码则支付成功，如果点击支付后没有付款关闭了页面会跳转到待支付页面并开始倒计时（待支付页面显示该商品适用的店铺信息及个人信息订单信息等），倒计时结束后未支付则订单失效如需购买需要重新下单

                准备工作

                申请微信支付接口权限

                微信小程序管理后台 -> 微信支付->接入微信支付 及关联(设置)商户信息

                如果是第一次接入, 直接申请接入,然后选择弹出窗口的"我还没有商户号"选项接入即可

                微信支付api需要的参数说明

                示例代码

                wx.requestPayment({  timeStamp: '',  nonceStr: '',  package: '',  signType: 'MD5',  paySign: '',  success (res) { },  fail (res) { }})

                需要传入后端接口的参数说明：

                接口返回的参数说明：

                支付逻辑代码（只包含支付功能）

                goPay () {//在控制台输出'goPay'console.log('goPay');//检查使用人姓名是否填写，如果未填写则弹出提示并返回falseif(!this.reserved_name){ uni.showToast({title:"使用人姓名未填写",icon:"none"}); return false;}//检查使用人手机号是否填写，如果未填写则弹出提示并返回falseif(!this.reserved_phone){ uni.showToast({title:"使用人手机号未填写",icon:"none"}); return false;}//定义一个正则表达式，用于验证手机号格式const reg = /^1[3|4|5|7|8|6|9][0-9]\d{8}$/;//检查手机号格式是否正确，如果不正确则弹出提示并返回falseif(!reg.test(this.reserved_phone)){ uni.showToast({title:"手机格式错误",icon:"none"}); return false;}//检查是否同意协议，如果未同意则弹出提示并返回falseif(!this.isChecked){ uni.showToast({title:"请同意协议后购买",icon:"none"}); return false;}//向服务器发送下单请求uni.request({url: app.globalData.URL + "localLive/createStoreGoodsOrder",method: 'POST',data: {version:'251',client:'wxmp',count: this.spnumber,reserved_name: this.reserved_name,reserved_phone: this.reserved_phone,reserved_remark: this.reserved_remark,spec_id: this.specId,store_discount_code: this.store_discount_code,store_goods_id: this.goodsId,token:this.token.token, //openid:''},success(res) {//如果下单失败，则弹出提示并返回falseif(res.data.status=='no'){uni.showToast({title:res.data.msg,icon:"none"});return false;}//如果不需要支付，则跳转到订单详情页面并返回falseif(res.data.data.is_need_pay==0){uni.redirectTo({url:'./localLifeOrderDetail?store_order_id='+res.data.data.goods_order_id})return false ;}else{//如果需要支付，则调用微信支付接口uni.requestPayment({    provider: 'wxpay',    timeStamp: res.data.data.pay_data.timeStamp,    nonceStr:  res.data.data.pay_data.nonceStr,    package:  res.data.data.pay_data.package,    signType: 'MD5',    paySign:  res.data.data.pay_data.paySign,appId:app.globalData.appid,    success: function (ress) {//支付成功后弹出提示，并在2秒后跳转到订单详情页面uni.showToast({    title: '支付成功',    duration: 2000});setTimeout(function() {uni.redirectTo({url:'./localLifeOrderDetail?store_order_id='+res.data.data.store_order_id}) }, 2000)    },    fail: function (err) {//支付失败后直接跳转到订单详情页面      uni.redirectTo({      url:'./localLifeOrderDetail?store_order_id='+res.data.data.store_order_id      })     }});}//在控制台输出服务器返回的数据和请求的接口名称console.log(res.data,'createStoreGoodsOrder');}})/* uni.navigateTo({url:'./localLifeOrderDetail?store_order_id='+}) */},

                以下是功能完整代码

                确认订单页面

                结构部分