前置
使用支付功能前,先填写收获地址,由于小程序是运行在微信上的一个程序,因此获取用户的收货地址只需要调用小程序API的wx.chooseAddress,即可很方便的获取到了
const [errAddress, resAddress] = await uni.chooseAddress();
微信支付功能
完整的微信支付过程是比较繁琐的。包括前后端对接,当然我这个切图仔只需要负责前端,看一下后端的接口文档要求。把需要的参数先准备好发请求即可
第一步 -->获取用户信息和微信临时凭证换取token
这里的获取用户信息是根据原生小程序接口文档的参数要求,通过 wx.getUserProfile 来获取用户的信息,该api的使用必须在点击的事件回调中调用才行。
// 执行小程序开放接口拿到用户信息
const [errFile, resFile] = await uni.getUserProfile({
desc: "为您提供更好的服务",
});
获取临时登录凭证code,这里的临时登录凭据指的是执行wx.login 获取到的返回值,该数据用于向后台生成对应的token
// 执行小程序开放接口拿到微信临时验证的code
const [errCode, resCode] = await uni.login();
第二步 -->调用后台的获取用户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;
第三步-->获取到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;
第四步-->根据订单编号获取到支付参数
const { message: resPay } = await this.$u.post(
"/my/orders/req_unifiedorder",
{ order_number },
{ Authorization: token }
);
const payment = resPay.pay;
最后一步-->然后执行小程序开放接口(wx.requestPayment),调用微信支付功能
// 调用微信支付功能--> 执行小程序开放接口
const res = await uni.requestPayment(payment);