微信小程序登录流程及支付流程

1.准备登录相关的参数 - 获取用户信息

简述：**登录微信小程序需要五个相关参数 可以通过微信开发的接口 
wx.login()以及open-type="getUserInfo" bindgetuserinfo="getInfo"方
法获取到五个参数**

A.在登录按钮中，添加相关信息 open-type 及bindgetuserinfo='getUserInfo' 如下：

<button open-type="getUserInfo" bindgetuserinfo="getInfo">
        登录后下单
      </button>

B.定义事件函数

methods = {
    // 获取用户信息
    async getUserInfo(userInfo) {
      // 判断是否获取用户信息失败
      if (userInfo.detail.errMsg !== 'getUserInfo:ok') {
        return wepy.baseToast('获取用户信息失败！')
      }

      console.log(userInfo)
    }
}

C.通过wx.login()获取code参数，并且将参数包装好准备发送给服务器请求token信息

 // 获取用户登录的凭证 Code
  const loginRes = await wepy.login()
  console.log(loginRes)
  if (loginRes.errMsg !== 'login:ok') {
    return wepy.baseToast('微信登录失败！')
  }

  // 登录的参数
  const loginParams = {
    code: loginRes.code,
    encryptedData: userInfo.detail.encryptedData,
    iv: userInfo.detail.iv,
    rawData: userInfo.detail.rawData,
    signature: userInfo.detail.signature
  }
   // 发起登录的请求，换取登录成功之后的 Token 值
  const { data: res } = await wepy.post('/users/wxlogin', loginParams)

  console.log(res)
  if (res.meta.status !== 200) {
    return wepy.baseToast('微信登录失败！')
  }

  // 把登录成功之后的 Token 字符串，保存到 Storage 中
  wepy.setStorageSync('token', res.message.token)
  // 控制登陆按钮以及支付订单的显示与隐藏 默认为false
  this.islogin = true
  this.$apply()

2.登陆成功获取token后，进行订单支付功能

A.按需渲染订单支付

<!-- 登录后下单 -->
<van-button type="primary" size="large" class="btnLogin" open-type="getUserInfo" bindgetuserinfo="getUserInfo" wx:if="{{islogin === false}}">登录后下单</van-button>

<!-- 订单支付区域 -->
<van-submit-bar price="{{amount}}" button-text="支付订单" bind:submit="onSubmit" wx:else></van-submit-bar>

B.将token信息在发送请求前加入到请求头中  需要在请求拦截器中添加

constructor() {
    // ...
    
    // 拦截器
    this.intercept('request', {
          // 发出请求时的回调函数
      config(p) {
        // 显示loading效果
        wepy.showLoading({
          title: '数据加载中...'
        })
          
        // 自定义请求头
        p.header = {
          Authorization: wepy.getStorageSync('token')
        }

        // console.log(p)
        // 必须返回OBJECT参数对象，否则无法发送请求到服务端
        return p
      },
      
      // ...
    }
}

C.通过 bind:submit 为支付订单按钮，绑定事件处理函数：

<van-submit-bar price="{{amount}}" button-text="支付订单" bind:submit="onSubmit" wx:else></van-submit-bar>

D.定义事件处理函数 onSubmit，并实现下单及支付功能：

async onSubmit() {
  if (this.amount <= 0) {
    return wepy.baseToast('订单金额不能为0！')
  }
  if (this.addressStr.length <= 0) {
    return wepy.baseToast('请选择收货地址！')
  }

  // 1. 创建订单
  const { data: createResult } = await wepy.post('/my/orders/create', {
    // 订单金额 单位 元
    order_price: '0.01',
    consignee_addr: this.addressStr,
    order_detail: JSON.stringify(this.cart),
    goods: this.cart.map(x => {
      return {
        goods_id: x.id,
        goods_number: x.count,
        goods_price: x.price
      }
    })
  })

  // 创建订单失败
  if (createResult.meta.status !== 200) {
    return wepy.baseToast('创建订单失败！')
  }

  // 创建订单成功了
  const orderInfo = createResult.message
  console.log(orderInfo)

  // 2. 生成预支付订单
  const { data: orderResult } = await wepy.post(
    '/my/orders/req_unifiedorder',
    {
      order_number: orderInfo.order_number
    }
  )

  // 生成预支付订单失败
  if (orderResult.meta.status !== 200) {
    return wepy.baseToast('生成预支付订单失败！')
  }

  // 走支付的流程
  // 3. 调用微信支付的API
  // console.log(orderResult)
  const payResult = await wepy
    .requestPayment(orderResult.message.pay)
    .catch(err => err)

  // 用户取消了支付
  if (payResult.errMsg === 'requestPayment:fail cancel') {
    return wepy.baseToast('您已取消了支付！')
  }

  // 用户完成了支付的过程
  // 4. 检查用户支付的结果
  const { data: payCheckResult } = await wepy.post('/my/orders/chkOrder', {
    order_number: orderInfo.order_number
  })

  if (payCheckResult.meta.status !== 200) {
    return wepy.baseToast('订单支付失败！')
  }

  // 5. 提示用户支付成功
  wepy.showToast({
    title: '支付成功！'
  })

  // 6. 跳转到订单列表页面
  wepy.navigateTo({
    url: '/pages/orderlist'
  })
}

这还有更多关于源码的实现请查阅手撕vue3源码觉得有用的小伙伴给个start吧