微信小程序支付功能

647 阅读1分钟

前置

使用支付功能前,先填写收获地址,由于小程序是运行在微信上的一个程序,因此获取用户的收货地址只需要调用小程序API的wx.chooseAddress,即可很方便的获取到了

const [errAddress, resAddress] = await uni.chooseAddress();

image.png

微信支付功能

完整的微信支付过程是比较繁琐的。包括前后端对接,当然我这个切图仔只需要负责前端,看一下后端的接口文档要求。把需要的参数先准备好发请求即可

image.png

第一步 -->获取用户信息和微信临时凭证换取token

image.png

这里的获取用户信息是根据原生小程序接口文档的参数要求,通过 wx.getUserProfile 来获取用户的信息,该api的使用必须在点击的事件回调中调用才行。
      // 执行小程序开放接口拿到用户信息
        const [errFile, resFile] = await uni.getUserProfile({
          desc: "为您提供更好的服务",
        });

image.png

获取临时登录凭证code,这里的临时登录凭据指的是执行wx.login 获取到的返回值,该数据用于向后台生成对应的token
        // 执行小程序开放接口拿到微信临时验证的code
        const [errCode, resCode] = await uni.login();

image.png

第二步 -->调用后台的获取用户token接口,获取到token
       // 调用后台接口获取token
        const { message: resToken } = await this.$u.post("/users/wxlogin", {
          encryptedData: resFile.encryptedData,
          rawData: resFile.rawData,
          iv: resFile.iv,
          signature: resFile.signature,
          code: resCode.code,
        });
        let token = resToken.token;

image.png

第三步-->获取到token以后,还需要订单编号用来获取支付参数
       // 创建订单获取订单编号
        const { message: resOrder } = await this.$u.post(
          "/my/orders/create",
          {
            order_price: this.totalPrice,
            consignee_addr: this.address,
            goods: this.goodsChecked.map((item) => {
              return {
                goods_id: item.goods_id,
                goods_number: item.number,
                goods_price: item.goods_price,
              };
            }),
          },
          { Authorization: token }
        );
        let order_number = resOrder.order_number;

image.png

第四步-->根据订单编号获取到支付参数
        const { message: resPay } = await this.$u.post(
          "/my/orders/req_unifiedorder",
          { order_number },
          { Authorization: token }
        );
        const payment = resPay.pay;

image.png

最后一步-->然后执行小程序开放接口(wx.requestPayment),调用微信支付功能
        // 调用微信支付功能--> 执行小程序开放接口
        const res = await uni.requestPayment(payment);