微信小程序支付流程

Posted 2021-05-18 郭郭郭牧鑫

 

微信小程序支付功能的简单介绍

关于微信小程序的支付功能来讲，我们遇见这个大部分都是在购物是会接触到的功能之一，也算微信小程序功能中的一个小难点，也很常见，我们今天来了解一下

我们来用购物车举例子，在结算中会牵扯到我们的支付功能，那么我们今天来说一下

首先我们应该有一个这样的布局，流程大致就是当我们点击结算的时候，我们应该用一些判断，满足那些判断后，我们才可进入支付的界面，那么我们就先来看看要满足那些条件

1.我们点击结算时应该有用户的地址

2.我们应该够物品被选中

当我们的这两个条件满足时，我们就可以进入支付的页面了

那么我们就先来进行条件的判断

//结算按钮的点击事件
reckon(){
    //我们进行判断有没有获取到地址
    const address=wx.getStorageSync('address')

    if(!address){
        wx.showToast({
             title: '没有选择收货地址',
             icon: 'success',
             duration: 1000
        })
        return
    }
    
    var that = this;
    let carts = that.data.cart;

    let cart= [];

    var qqq = 0

    for (var i = 0; i < carts.length; i++) {
      if (carts[i].checked) {
        cart[qqq] = carts[i];
        qqq++;
      }
    }

    if (cart.length <= 0) {
      wx.showToast({
        title: '未选择商品',
        icon: 'success',
        duration: 1000
      })
      return;
    }
    wx.setStorageSync('cart', cart);//存入缓存的数据
    //当条件都满足时，我们进行跳转
    wx.navigateTo({
      url: '/pages/pay/index'
    });
}

当我们的判断通过时，我们就可以跳转到支付的页面了

进入到支付页面大致是这个效果，在支付页面，我们进行的判断就是用户的token，当然结算的时候我们也可以请求进行判断，然后就是支付的订单，订单编号，和支付口等

为了更好的书写，我们封装两个函数

//封装一个showToast
export const showToast=({title})=>{
  return new Promise((resolve,reject)=>{
    wx.showToast({
      title: title,
      icon: 'none',
      success :(res) =>{
        resolve(res);
      },
      fail:(err)=>{
        reject(err);
      }
    })
  })
}

微信接口请求封装

  //promise 形式的 小程序的微信支付
  //@param {object} pay 支付所必要的参数
 
export const requestPayment=(pay)=>{
  return new Promise((resolve,reject)=>{
   wx.requestPayment({
      ...pay,
     success: (result) => {
      resolve(result)
     },
     fail: (err) => {
       reject(err);
     }
   });
  })
}

 

这个是我们封装的request

// 同时发送异步代码的次数
let ajaxTimes=0;
export const request=(params)=>{
  let header={...params.header};
  if(params.url.includes("/my/")){
    // header+token拼接
    header["Authorization"]=wx.getStorageSync("token");
  }

  ajaxTimes++;
  // 加载中效果
  wx.showLoading({
    title: "加载中",
    mask: true
  });
    
  // 定义公共的url
  const baseUrl="https://api-hmugo-web.itheima.net/api/public/v1";
  
  //加载效果
  return new Promise((resolve,reject)=>{
    wx.request({
     ...params,
     header:header,
     url:baseUrl+params.url,
     success:(result)=>{
       resolve(result.data.message);
     },
     fail:(err)=>{
       reject(err);
     },
     complete:()=>{
      ajaxTimes--;
      if(ajaxTimes===0){
        //  关闭正在等待的图标
        wx.hideLoading();
      }
     }
    });
  })
}

 支付按钮的代码

import {showToast,requestPayment} from "../../utils/asyncWx.js";
import { request } from "../../request/index.js";
Page({
/**
   * 页面的初始数据
   */
  data: {
      jscart:{},
      totalPrice:0,
      totalNum: 0,
      address:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   let jscart=wx.getStorageSync('jscart')||[]
   let address=wx.getStorageSync('address')||[]
   this.setData({
    jscart:jscart,
    address:address
   })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let jscart=wx.getStorageSync('jscart')||[]
    let totalPrice = 0;
    let totalNum = 0;
    for (let i = 0; i < jscart.length; i++) {     
      if (jscart[i].checked) {                
        totalPrice += jscart[i].num * jscart[i].goods_price;   
        totalNum += jscart[i].num;
      }
    }
    this.setData({
      jscart:jscart,
      totalPrice:totalPrice,
      totalNum:totalNum
    });
    console.log(totalPrice);
  },
   handleOrderPay(){
    try {

      // 判断缓存中有没有token 
      const token = wx.getStorageSync("token");
      if (!token) {
        wx.navigateTo({
          url: '/pages/auth/index'
        });
        return;
      }
      // 创建订单
      const order_price = this.data.totalPrice;
      const consignee_addr = this.data.address.all;
      const cart = this.data.jscart;
      let goods = [];
      if(!cart){
        return;
      }
      cart.forEach(v => goods.push({
        goods_id: v.goods_id,
        goods_number: v.num,
        goods_price: v.goods_price
      }))
      const orderParams = { order_price, consignee_addr, goods };


      //创建订单获取订单编号
      const { order_number } = request({ url: "/my/orders/create", method: "POST", data: orderParams });
      // 发起预支付接口
      const { pay } = request({ url: "/my/orders/req_unifiedorder", method: "POST", data: { order_number } });

      // 发起微信支付 
       requestPayment(pay);

      // 查询订单状态
      const res = request({ url: "/my/orders/chkOrder", method: "POST", data: { order_number } });
       showToast({ title: "支付成功" });


      // 删除缓存中已经支付了的商品
      let newCart=wx.getStorageSync("jscart");
      newCart=newCart.filter(v=>!v.checked);
      wx.setStorageSync("cart", newCart);
  
      //跳转到订单页面
      wx.navigateTo({
        url: '/pages/order/index'
      });
        
    } 
      //支付失败
      catch (error) {
       showToast({ title: "支付失败" })
      console.log(error);
    }
  },
})