uniapp,小程序实现微信支付

前端uniapp,小程序实现微信支付

在下小白,只是记录一下自己已完成的项目功能,以便于以后巩固,以及再遇到是使用。

个人理解:
其实实现微信支付很简单,只需要调用小程序给我们封装好的方法uni.requestPayment()即可。而调用这个方法所需要的参数都是由后端处理好返回给我们的,

步骤
1:首先我们要向自己的服务器发起一次请求,传递我们需要消费或购买物品的信息,包括单价,数量,等。具体信息有项目需求决定。

2:然后我们就会收到我们自己服务器返回给我们的调用uni.requestPayment所需要的参数其中包括timeStamp,nonceStr,package,paySign。

3:收到服务器返回的参数以后,我们就可以在请求成功的回调函数中调用uni.requestPayment的方法了。

4:最后就是支付结果了,uni.requestPayment会有支付成功和支付失败的回调。分别在这两个回调函数中告诉自己的服务器支付结果即可。

代码如下:

home.OrderSave(param, (res) => { //param为购买物品的信息
	uni.requestPayment({
		provider: 'wxpay',
		timeStamp: res.data.timeStamp,
		nonceStr: res.data.nonceStr,
		package: res.data.package,
		signType: 'MD5',
		paySign: res.data.paySign,
		success: (_res) => {
			home.PayGetOrder({
				transaction_id: res.data.out_trade_no
			}, (res) => {})
		},
		fail: (err) => {
			home.PayGetOrder({
				transaction_id: res.data.out_trade_no
			}, (res) => {
				console.log(that.select_item)
			})
		}
	});
})
  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
对于在UniApp中开发微信小程序实现微信支付的问题,你可以按照以下步骤进行操作: 1. 在UniApp项目中,打开 `manifest.json` 文件,确保已经添加了微信小程序的配置信息,包括 `appid` 和 `wechatid`。 2. 在UniApp项目根目录下,找到 `manifest.json` 文件所在的目录,并新建一个名为 `uni.scss` 的文件。 3. 在 `uni.scss` 文件中添加以下代码,用于引入微信小程序的支付功能: ```scss @import "uniapp://scss/uni.scss"; $uni-ww-common: "/common"; @import "$uni-ww-common/uni-variables"; .uni-wxpay { @import "$uni-ww-common/wxpay"; } ``` 4. 在需要使用微信支付的页面中,使用 `uni-wxpay` 类来引入支付相关的样式和功能: ```vue <template> <view> <!-- 支付按钮 --> <button @click="handlePayment">立即支付</button> </view> </template> <script> export default { methods: { handlePayment() { uni.requestPayment({ provider: 'wxpay', timeStamp: '生成的时间戳', nonceStr: '生成的随机字符串', package: '统一下单接口返回的 prepay_id', signType: '签名算法,默认为 'MD5'', paySign: '签名', success(res) { // 支付成功回调 console.log('支付成功', res); }, fail(res) { // 支付失败回调 console.log('支付失败', res); } }); } } } </script> ``` 5. 在后端服务器端,调用微信支付统一下单接口,获取到 `timeStamp`、`nonceStr`、`prepay_id`、`signType` 和 `paySign` 等参数,并返回给前端。 6. 将服务器返回的参数填充到上述代码中的相应字段,并在支付成功和支付失败的回调中处理相关逻辑。 请注意,以上仅为大致的步骤和代码示例,具体实现还需要根据你的项目需求和后端接口进行调整。同时,确保已经在微信开发者工具中配置好了支付相关的参数和权限。另外,如果需要使用其他支付方式或第三方支付,需要根据相应的文档进行操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值