uniapp實現微信小程序支付功能 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

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

相關(guān)案例查看更多