微信小程序基础到进阶(共6节)

微信支付

支付逻辑总结

登录获取 token

在点击支付按钮的时候 => 判断

判断是否有token
如果有token 继续完成支付功能
如果没有token => 跳转到 授权登录页面 => 登录 => token

支付

1. 创建订单

参考接口 : 订单 => 创建订单
需要参数
请求头 = : token
请求参数 : 总价格、收货地址、goods(goods_id goods_number goods_price)
返回的结果 => 订单号 order_number

2. 预支付

参考接口 : 支付 => 获取支付参数
需要参数 :
- 请求头 : token
- 请求体 : order_number
返回的结果 => pay 对象

3. 开始支付

参考api : 微信小程序官网 => api => 开方接口 => 支付
wx.requestPayment(pay)
需要的参数 : pay对象

4. 查看支付状态

参考接口 : 订单 => 查看订单支付状态
需要参数
请求头 : token
请求体 : order_number
返回 => 200 => 提示

支付成功 - 收尾

支付成功了把支付的商品从购物车里面移除去
支付成功跳转到订单页面查看订单

微信支付详细步骤

在点击支付按钮的时候，=> 判断
- 判断是否有token
- 有继续完成支付
- 没有token => 跳转到"授权登录"页面 => 登录 => token
"授权登录"页面 => 登录 => token

分别获取5个参数
2.1 获取用户信息(4个)

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">
获取授权
</button>

const { encryptedData, iv, rawData, signature  }
= e.detail

2.2 获取code(1个)

 let { code } = await ml_wxlogin()
    console.log('获取code的', code)

封装请求 - 登录 - 获取token => appid == xxxx => 微信号 => 添加开发人员

3.1 封装fetch函数 => request_login

// fetch

const BASE_URL = 'https://xxxx/v1'

function fetch(options) {
  // 如果 options.url 是以  /my 开头的, 添加 token
  if (options.url.startsWith('/my')) {
    options.header = {
      Authorization: wx.getStorageSync('token')
    }
  }

  //1. 创建 promise 实例
  let p = new Promise((resolve, reject) => {
    wx.request({
      // 接口
      url: BASE_URL + options.url,
      // 参数
      data: options.data || {},
      // 请求头
      header: options.header || {},
      // 请求方式
      method: options.method || 'POST', 
      // 请求成功
      success: res => {
        resolve(res)
      },
      // 失败
      fail: err => {
        reject(err)
      }
    })
  })
  //2. 返回promise实例
  return p
}

/**
 *  登录 - 获取用户token
 */
export const ml_requestToken = options   => {}

/**
 *  创建订单
 */
export const ml_requestCreateOrder = options  => {}

/**
 * 预支付
 */
export const ml_request_req_unifiedorder = options => {}

/**
 * 开始支付
 */
export const ml_requestPayMent = pay => {}

/**
 * 查看支付状态
 */
export const ml_requestCheckOrder = options   => {}

支付逻辑

async startPay() {
    //1. 尝试着从本地获取token
    let token = wx.getStorageSync('token')

    //2. 判断
    if (!token) {
      await ml_showToast('没有token!!')

      setTimeout(() => {
        wx.navigateTo({
          url: '/pages/auth/auth'
        })
      }, 2000)

      return
    }

    //3. 创建订单
    // 3.1 准备参数
    let order_price = this.data.totalPrice
    let consignee_addr = this.data.addrObj.addrStr
    let goods = this.data.carts.map(v => {
      return {
        goods_id: v.goods_id,
        goods_number: v.goods_num,
        goods_price: v.goods_price
      }
    })

    //3.2 创建订单发送请求
    let res1 = await ml_requestCreateOrder({
      data: {
        order_price,
        consignee_addr,
        goods
      }
      // header: {
      //   Authorization: wx.getStorageSync('token')
      // }
    })

    console.log('创建订单', res1)
    const { order_number } = res1.data.message

    // 4. 预支付
    let res2 = await ml_request_req_unifiedorder({
      data: {
        order_number
      }
      // header: {
      //   Authorization: wx.getStorageSync('token')
      // }
    })

    console.log('预支付', res2)
    const { pay } = res2.data.message

    // 5. 开始支付
    await ml_requestPayMent(pay)

    // 6. 查看订单支付状态
    let res3 = await ml_requestCheckOrder({
      data: {
        order_number
      }
      // header: {
      //   Authorization: wx.getStorageSync('token')
      // }
    })

    // 7. 判断
    if (res3.data.meta.status === 200) {
      // 提示
      await ml_showSuccessToast('支付成功')
      // 7.1 从购物车里面移除支付过的商品
      let carts = wx.getStorageSync('cart')
      carts = carts.filter(v => !v.isChecked)
      wx.setStorageSync('cart', carts)

      setTimeout(() => {
        // 7.2 跳转到订单页面
        wx.navigateTo({
          url: '/pages/order/order'
        })
      }, 2000)
    }
  }