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

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

步骤总览

一、前端发起wx…getUserIdfo()请求获取用户信息，并通过api wx.login()获取用户用户登录凭证code

• 通过调用api ==wx…getUserIdfo()==或者 uni.getUserIdfo()可以调用获取到用户的一些信息，后端所需要的参数通常为以下5个，这五个参数都是需要前端调用微信的接口获取

  //1.调用uni.getUserInfo()获取用户信息
    const [error1, res] = await uni.getUserInfo()
    //接口结果中所需要的参数
    const [encryptedData, rawData, iv, signature] = res
    console.log('error1', error1, res);
  

参数名	必选	类型	参数说明
encryptedData	是	string	执行小程序 获取用户信息后 得到
rawData	是	string	执行小程序 获取用户信息后 得到
iv	是	string	执行小程序 获取用户信息后 得到
signature	是	string	执行小程序 获取用户信息后 得到
code	是	string	执行小程序登录后获取

• 通过api wx.login()获取用户登录凭证code

  //1.1.调用uni.login()获取用户登录凭证，以上两部就可以获取到后端需要的请求获取code的信息
        const [error2, res2] = await uni.login()
        //接口结果中所需要的参数
        const [code] = res2
        console.log('error1', error2, res2);
  

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUMMgi6d-1658755532609)(D:\desktop\马\微信小程序\image\登录\image-20220725195451572.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XGB16yPx-1658755532609)(D:\desktop\马\微信小程序\image\登录\登录2)]

二、获取到用户信息后，调用wx.login()，把用户信息发给后台进行登录并获取token，并把token保存起来

//2.根据前两步获取到的信息向后端发起请求
  const userInfoData = {
    encryptedData: userInfo.encryptedData,
    rawData: userInfo.rawData,
    iv: userInfo.iv,
    signature: userInfo.signature,
    code: this.code
  };
  //发起请求后端获取token
  const [error3, res3] = uni.request({
    method: 'post',
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: userInfoData
  })
  //解构token
  const [token] = res3

三、把订单信息发给后端，让后端发起预支付并生成订单号返回给前端，前端根据订单编号生成支付信息

// 3. 获取自己后台返回的支付相关参数 - 🚨流程较多，按后端接口要求来操作
    //   3.1  创建订单，获取订单编号
    const ordersCreateRes = await ordersCreate({
      order_price: this.selectCartListPrice,
      consignee_addr: this.addressDetail,
      goods: this.selectCartList.map(item => {
        return {
          goods_id: item.goods_id,
          goods_price: item.goods_price,
          goods_number: item.goods_count,
        }
      }),
    })
    // console.log('ordersCreateRes', ordersCreateRes)
    //获取到订单号
    const { order_number } = ordersCreateRes.data.message 
    
    //   3.2  根据订单编号生成支付信息
    const payInfoRes = await ordersPayInfo(order_number)
    // console.log('payInfoRes', payInfoRes)
    const { pay } = payInfoRes.data.message
    console.log('pay', pay)

四、根据生成的订单信息，前端发起微信支付

 // 4. 调用微信接口实现 支付
        const { errMsg } = await wx.requestPayment(pay)
        console.log('errMsg', errMsg)

五、剩下的就是向后端发起询问，订单是否完成支付，如果完成就更新订单状态，提醒用户，后续可以跳转到订单页面等

async handlerPay() {
  // 0. 用户收货地址
  if (!this.address.userName) {
    uni.showToast({ title: '请选择收货地址~', icon: 'none' })
    return
  }
  // 把登录流程封装成 action，再通过 dispatch 调用即可
  await this.$store.dispatch('userWxLogin')
  // 🚨🚨支付流程的步骤较多，工作的时候按流程图和后端接口逐个调用即可。
  // 🚨🚨流程较多的情况，求稳放到第一位，调一个接口就要打印检查，因为后面流程依赖前面流程的参数
  try {
    // 2. 获取自己后台返回的支付相关参数 - 🚨流程较多，按后端接口要求来操作
    //   2.1  创建订单，获取订单编号
    const ordersCreateRes = await ordersCreate({
      order_price: this.selectCartListPrice,
      consignee_addr: this.addressDetail,
      goods: this.selectCartList.map(item => {
        return {
          goods_id: item.goods_id,
          goods_price: item.goods_price,
          goods_number: item.goods_count,
        }
      }),
    })
    // console.log('ordersCreateRes', ordersCreateRes)
    const { order_number } = ordersCreateRes.data.message
    console.log('order_number', order_number)
    //   2.2  根据订单编号生成支付信息
    const payInfoRes = await ordersPayInfo(order_number)
    // console.log('payInfoRes', payInfoRes)
    const { pay } = payInfoRes.data.message
    console.log('pay', pay)
    // 3. 调用微信接口实现 支付
    const { errMsg } = await wx.requestPayment(pay)
    console.log('errMsg', errMsg)
    // 4. 更新订单支付状态
    const ordersCheckRes = await ordersCheck(order_number)
    console.log('ordersCheckRes', ordersCheckRes)
    // 5. 跳转到订单页面
    uni.showToast({ title: '支付成功', icon: 'success' })
  } catch (error) {
    console.log('发送给后端错误', error)
    uni.showToast({ title: '支付失败', icon: 'error' })
  }
},
}

howToast({ title: ‘支付成功’, icon: ‘success’ })
} catch (error) {
console.log(‘发送给后端错误’, error)
uni.showToast({ title: ‘支付失败’, icon: ‘error’ })
}
},
}