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({
				title:'加载中'
			})
			resolve(res[1])
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
		})
		.catch((err)=>{
			let errs = '服务器错误 请稍后再试'
			errdata.errlist(errs)
			reject(err)
		})
	})
}

// POST请求
let publicing = function(urling,shopdata){
	return new Promise((resolve,reject)=>{
		uni.request({
			url:urling,
			method:'POST',
			data:shopdata,
		})
		.then((res)=>{
			uni.showLoading({
				title:'加载中'
			})
			// console.log(res[1])
			resolve(res[1])
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
		})
		.catch((err)=>{
			let errs = '服务器错误 请稍后再试'
			errdata.errlist(errs)
			reject(err)
		})
	})
}

export{listing,publicing}

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)
					})
			})
		},

github上有项目地址:

github项目地址:https://github.com/lsh555/meituanwaimai