uni-app中微信支付之扫码支付的实现【中】

最新推荐文章于 2024-08-01 13:21:42 发布

谁动了我的bug

最新推荐文章于 2024-08-01 13:21:42 发布

阅读量2.4k

点赞数

分类专栏：支付 Uni-app 文章标签：后端

本文为whhtjl原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_35393693/article/details/107423433

版权

本文介绍了在uni-app中实现微信扫码支付的详细步骤，包括登录、个人中心、会员续费等操作，并展示了关键代码。后端使用SpringBoot，涉及微信支付配置、证书管理和控制层处理。

摘要由CSDN通过智能技术生成

海豚精灵：https://www.whhtjl.com；优课GO：https://mgo.whhtjl.com

相信大家已在网上找了各种资料，也看过了各种文档，对于整个流程我就不再重复啦，有疑惑的小伙伴可以移步微信开放平台查看详情，网页地址：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_2

废话不多说，直接上效果图：

打开链接：https://mgo.whhtjl.com/#/pages/login/login，进入登录页面，如下图所示：

输入用户名：12345678910，密码：123456，登录成功后进入个人中心页，如下图所示：

点击“会员中心”，进入会员页，如下图所示：

点击“立即续费”，如下图所示：

点击“微信支付”，如下图所示：

打开微信“扫一扫”，如下图所示：

重点代码如下所示：

uni-app前端代码：

<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap">
			<view style="background:#FFF; padding:50rpx 0;">
				<view class="uni-hello-text uni-center font-lg text-danger">{
  { vipName }}</view>
				<view class="uni-h1 uni-center uni-common-mt">
					<span class="price">￥{
  { price }}</span>
				</view>
			</view>
			<view class="uni-btn-v uni-common-mt">
				<!-- #ifdef H5 -->
				<button type="primary" @click="scanCodePay" :loading="loading" class="flex align-center justify-center">
					<image :src="getImgUrl('/files/static/common/wx.png')" style="width: 60rpx;height: 60rpx;"></image>
					<span class="pl-1">微信扫码支付</span>
				</button>
				<!-- #endif -->
			</view>
		</view>
		<uni-popup id="popup" ref="popup" type="center" :animation="false" @change="change1">
			<view class="flex flex-column bg-white py-2">
				<view class="flex align-center justify-center"><image :src="codeUrl"></image></view>
				<view class="flex align-center justify-center" style="color: #7B7B7B;">请使用微信扫描二维码以完成支付</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: { uniPopup },
	data() {
		return {
			title: 'request-payment',
			loading: false,
			typeId: 0,
			vipName: '',
			price: 1,
			providerList: [],