微信小程序开发- 6 - 开放功能(微信支付)

微信小程序开发- 6 - 开放功能(微信支付)

  • 微信小程序开发- 2 - 生命周期、事件、原生组件

  • 微信小程序开发- 3 - 原生组件

  • 微信小程序开发- 4 - 原生API

  • 微信小程序开发- 5 - 开放功能(登录、购物车)

  • 微信小程序开发- 6 - 开放功能(微信支付)

  • 微信支付

    支付逻辑总结

    登录获取 token

    1. 在点击支付按钮的时候 => 判断
    • 判断是否有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 => 提示

    支付成功 - 收尾

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

    微信支付详细步骤

    1. 在点击支付按钮的时候,=> 判断
      • 判断是否有token
      • 有继续完成支付
      • 没有token => 跳转到"授权登录"页面 => 登录 => token
    2. "授权登录"页面 => 登录 => 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)
    
    1. 封装请求 - 登录 - 获取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)
        }
      }
      
    
    • 小程序项目
      1. 获取收货地址授权处理
      1. 购物车逻辑
      1. 登录授权
      1. 微信支付功能
      1. 自定义封装组件 ( tab组件、goods-item组件、search-header组件 )
      1. 对小程序的重构、封装、优化