小程序支付流程详解

一、小程序需要是企业级开发，并且将开发者加入开发者白名单
二、支付实现
1、获取用户信息

<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" >
  获取授权
</button>
`handleGetUserInfo(e) {
	 // 1 获取用户信息
    const { encryptedData, rawData, iv, signature } = e.detail;
}

2、调用wx.login(）获取小程序登录成功后的code

export const login=()=>{
  return new Promise((resolve,reject)=>{
    wx.login({
      timeout:10000,
      success: (result) => {
        resolve(result);
      },
      fail: (err) => {
        reject(err);
      }
    });
  })
}
const { code } = await login();

3、给后台发送请求，获取用户token，并存入到本地存储

// 定义公共的url
  const baseUrl="https://api.zbztb.cn/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();
      }
     }
    });
  })
  const {token}=await request({url:"/users/wxlogin",data:loginParams,method:"post"});
  wx.setStorageSync("token", token);

4、创建订单，并将token值绑定到请求头中，交互后获取订单编号

 // 3.1 准备 请求头参数
      // const header = { Authorization: token };
      // 3.2 准备 请求体参数
      const order_price = this.data.totalPrice;
      const consignee_addr = this.data.address.all;
      const cart = this.data.cart;
      let goods = [];
      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 };
      // 4 准备发送请求 创建订单 获取订单编号
      const { order_number } = await request({ url: "/my/orders/create", method: "POST", data: orderParams ，header:header});

5、使用订单编号发起预支付接口，拿到pay

const { pay } = await request({ url: "/my/orders/req_unifiedorder", method: "POST", data: { order_number }，header:header });

6、 发起微信支付

export const requestPayment=(pay)=>{
  return new Promise((resolve,reject)=>{
   wx.requestPayment({
      ...pay,
     success: (result) => {
      resolve(result)
     },
     fail: (err) => {
       reject(err);
     }
   });
     
  })
     await requestPayment(pay);

7、查询后台 订单状态

 const res = await request({ url: "/my/orders/chkOrder", method: "POST", data: { order_number } ,header:header});