您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
uniapp實現微信小程序支付功能
發表時間:2021-1-4
發布人:葵宇科技
浏覽次數:92
我這個(gè)項目是一個(gè)外賣小程序
首先要做支付功能,需要兩個(gè)條件
1.必須是企業(yè),個(gè)人用戶不行
2.去微信支付平台提交資(zī)料審核
首先封裝網絡請求
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:'加載中(zhōng)'
})
resolve(res[1])
setTimeout(()=>{
uni.hideLoading()
},1000)
})
.catch((err)=>{
let errs = '服務器(qì)錯誤 請稍後再試'
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:'加載中(zhōng)'
})
// console.log(res[1])
resolve(res[1])
setTimeout(()=>{
uni.hideLoading()
},1000)
})
.catch((err)=>{
let errs = '服務器(qì)錯誤 請稍後再試'
errdata.errlist(errs)
reject(err)
})
})
}
export{listing,publicing}
errdata.js是一個(gè)錯誤提示
// 提示
const errdata = http://www.wxapp-union.com/{
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}
然後支付的時候也分三步,第一步是統一下(xià)單
var {log} = console
// 引入提示組件
// post
import {publicing} from '../../api/api.js'
// 地址
import {wxpayingurl} from '../../api/request.js'
這是支付代碼
//微信支付
async wxPay() {
// 提示用戶正在下(xià)單,防止用戶多次點擊下(xià)單按鈕
wx.showToast({
title: '正在下(xià)單',
icon: 'loading',
duration: 200000,
mask: true
})
//搞定必填參數
//客戶信息
let peopleobj = {
address: this.addressing.detailInfo,
name: this.addressing.userName,
iphone: this.addressing.telNumber
}
// 商(shāng)家标識
let merchantid = this.MerchantId
// 截取商(shāng)家标識字符串
let ide = this.MerchantId.slice(0, 7)
// 商(shāng)家名稱
let commod = this.nameshop
// 商(shāng)家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:異步編程同步化
// 第一步:統一下(xià)單
// await:等待
let Placeorder = await this.placeOrder(Paymentinfor)
let Payparame = Placeorder.data.datas
// 第二步:發起支付
let wxpay = await this.wxPays(Payparame)
// 第三步:查詢時候支付成功
let paysucc = await this.paySucc(Payparame)
},
然後是我們的第一步,統一下(xià)單
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 = http://www.wxapp-union.com/{
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