回复 刷新

暂无评论

uniapp实现微信小程序支付功能

我这个项目是一个外卖小程序

首先要做支付功能,需要两个条件

  1. 必须是企业,个人用户不行
  2. 去微信支付平台提交资料审核

首先封装网络请求

api.js

// 引进提示 import {errdata} from 'api/errdata.js' // GET let listing = function(urling){ return new Promise((resolve,reject)=>{ uni.request({ url:urling, method:'GET', }) .then((res)=>{ // console.log(res[1]) uni.showLoading({

errdata.js是一个错误提示

// 提示 const errdata = { errlist(err){ uni.showToast({ icon:'none', title: err, duration: 3000 }); } } export{errdata}

request.js是地址

// 公用地址 let url = 'https://meituan.thexxdd.cn/api/' // 微信支付 let wxpayingurl = `${url}wxpay/wxpaying` export{wxpayingurl}

然后支付的时候也分三步,第一步是统一下单

var {log} = console // 引入提示组件 // post import {publicing} from '../../api/api.js' // 地址 import {wxpayingurl} from '../../api/request.js'

这是支付代码

//微信支付 async wxPay() { // 提示用户正在下单,防止用户多次点击下单按钮 wx.showToast({ title: '正在下单', icon: 'loading', duration: 200000, mask: true }) //搞定必填参数 //客户信息 let peopleobj = { address: this.addressing.detailInfo, name: this.addressing.userName, iphone: this.addressing.telNumber } // 商家标识 let merchantid = this.MerchantId // 截取商家标识字符串 let ide = this.MerchantId.slice(0, 7) // 商家名称 let commod = this.nameshop // 商家logo let logo = this.logo //把要发送到后台到数据以对象形式存储 let Paymentinfor = { type: 'placeOrder', peopleobj, arrinfo: this.allorder, merchantid, ide, commod, logo, useropenid: this.openid, payment: this.payment } log(Paymentinfor) // es6 :async await:异步编程同步化 // 第一步:统一下单 // await:等待 let Placeorder = await this.placeOrder(Paymentinfor) let Payparame = Placeorder.data.datas // 第二步:发起支付 let wxpay = await this.wxPays(Payparame) // 第三步:查询时候支付成功 let paysucc = await this.paySucc(Payparame) },

然后是我们的第一步,统一下单

在这里插入图片描述

placeOrder(Paymentinfor) { return new Promise((resolve, reject) => { publicing(wxpayingurl, Paymentinfor) .then((res) => { log(res) wx.hideToast() resolve(res) }) .catch((err) => { log(err) wx.hideToast() reject('支付错误') }) }) },

第二步就是发起支付

在这里插入图片描述

wxPays(Payparame) { return new Promise((resolve, reject) => { wx.requestPayment({ timeStamp: Payparame.time_stamp, nonceStr: Payparame.nonceStr, package: `prepay_id=${Payparame.prepayId}`, signType: 'MD5', paySign: Payparame.payauto, success: (res) => { // log(res) resolve(res) }, fail: (err) => { log(err) reject(err) let succ = '取消支付' let ico = 'success' this.tIps(succ, ico) } }) }) },

第三步是查询是否支付成功

在这里插入图片描述

paySucc(Payparame) { return new Promise((resolve, reject) => { let data = { type: 'paysucc', out_trade_no: Payparame.out_trade_no, id: Payparame._id, merchantid: this.MerchantId } publicing(wxpayingurl, data) .then((res) => { log(res) let succ = '支付成功' let ico = 'success' this.tIps(succ, ico) }) .catch((err) => { log(err) let succ = '支付失败' let ico = 'success' this.tIps(succ, ico) }) }) },
  • 211
  • 0
  • 0