最新公司要开发一个带微信支付功能的小程序，本文将详细记录开发一个带微信支付功能的小程序的前台实现代码流程，以供开发者参考和复用。
在开始编码之前，确保已经具备以下条件：ThinkPHP依赖以下环境Nginx+PHP，建议提前装好Composer。PHP、Composer需要设置好系统环境变量。注册并登录微信公众平台，获取小程序的AppID和秘钥。注册并登录微信支付平台，获取微信支付商户号（MchID）和支付秘钥。具体操作流程可以参考我的上一篇文章：ThinkPHP6+EasyWeChat实现 小程序获取用户openid，手机号，支付功能 小白图文教程
1.通过 HBuilder X 编辑器新建一个 uni-app 项目
输入项目名称，选择项目位置，默认模板创建即可
2.修改pages/index/index.vue文件代码
具体代码如下：
<template>
<view class="uni-container">
<view class="uni-flex uni-row">
<view class="uni-text uni-flex justify-center align-center" style="width: 200rpx;height: 220rpx;">
<text>openid：</text>
</view>
<view class="uni-flex uni-column justify-between uni-flex-item">
<input type="text" class="uni-input" :value="openid" placeholder="用户openid" />
<button class="uni-button" @click="wxLogin">获取用户openid</button>
</view>
</view>
<view class="uni-flex uni-row">
<view class="uni-text uni-flex justify-center align-center" style="width: 200rpx;height: 220rpx;">
<text>手机号：</text>
</view>
<view class="uni-flex uni-column justify-between uni-flex-item">
<input type="text" class="uni-input" :value="phone" placeholder="用户用户手机号" />
<button class="uni-button" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber">获取用户手机号</button>
</view>
</view>
<view class="uni-flex uni-row">
<view class="uni-text uni-flex justify-center align-center" style="width: 200rpx;">
<text>昵称：</text>
</view>
<view class="uni-flex uni-column justify-between uni-flex-item">
<input type="nickname" class="uni-input" :value="nickname" @blur="userNameInput" placeholder="请输入昵称" />
</view>
</view>
<view class="uni-flex uni-row">
<view class="uni-text uni-flex justify-center align-center" style="width: 200rpx;height: 150rpx;">
<text>头像：</text>
</view>
<view>
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
<image class="avatar" :src="avatar"></image>
</button>
</view>
</view>
<view class="uni-flex uni-row">
<view class="uni-text uni-flex justify-center align-center" style="width: 200rpx;height: 150rpx;">
<text>支付：</text>
</view>
<view>
<button class="uni-button" @click="pay">测试支付1分钱</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
url: 'http://www.wechat.com/index.php', //本地后台请求域名
openid: '',
phone: '',
avatar: '',
nickname: ''
};
},
onLoad(options) {
//console.log(123);
},
onShow() {
//console.log(456);
},
methods: {
wxLogin() {
uni.login({
provider: 'weixin',
success: (res) => {
//console.log('登录成功，code为：' + res.code);
// 获取临时登录凭证code
uni.request({
url: this.url + '/wechat/getOpenid',
method: 'POST',
data: {
code: res.code
},
header: {},
success: (res) => {
//console.log(res.data);
this.openid = res.data.data;
}
});
},
fail: (err) => {
console.error('登录失败：', err);
}
});
},
onGetPhoneNumber(e) {
//console.log("用户信息：", e.detail);
if (e.detail.code) {
uni.request({
url: this.url + '/wechat/getPhoneNumber',
method: 'POST',
data: {
phone_code: e.detail.code
},
header: {},
success: (res) => {
//console.log(res.data);
this.phone = res.data.data;
}
});
} else {
console.log("用户信息：", e.detail);
}
},
onChooseAvatar(e) {
this.avatar = e.detail.avatarUrl;
},
//获取昵称输入内容
userNameInput(e) {
this.nickname = e.detail.value
},
pay() {
if (!this.openid) {
uni.showToast({
title: '请先获取用户openid',
icon: 'none'
});
return false;
}
uni.request({
url: this.url + '/wechat/pay',
method: 'POST',
data: {
open_id: this.openid
},
header: {},
success: (res) => {
//console.log(res.data);
if (res.data.code) {
const payment = res.data.data;
// 调起微信支付
uni.requestPayment({
provider: 'wxpay',
nonceStr: payment.nonceStr,
package: payment.package,
paySign: payment.paySign,
signType: payment.signType,
timeStamp: payment.timeStamp,
success: (res) => {
console.log('success:' + JSON.stringify(res));
},
fail: (err) => {
console.log('fail:' + JSON.stringify(err));
}
});
} else {
console.log('获取支付参数失败');
}
}
});
},
}
};
</script>
<style lang="scss">
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.justify-start {
display: flex;
justify-content: flex-start;
}
.justify-center {
display: flex;
justify-content: center;
-webkit-justify-content: center;
}
.justify-end {
display: flex;
justify-content: flex-end;
}
.justify-evenly {
display: flex;
justify-content: space-evenly;
}
.justify-around {
display: flex;
justify-content: space-around;
}
.justify-between {
display: flex;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.align-start {
display: flex;
align-items: flex-start;
}
.align-center {
display: flex;
align-items: center;
-webkit-align-items: center;
}
.align-end {
display: flex;
align-items: flex-end;
}
.uni-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding-top: 50rpx;
}
.uni-flex {
display: flex;
flex-direction: row;
}
.uni-flex-item {
flex: 1;
-webkit-flex: 1;
}
.uni-row {
flex-direction: row;
margin: 20rpx 0;
border-radius: 4px;
width: 650rpx;
}
.uni-header-title {
padding: 60rpx;
}
.uni-text {
width: 150rpx;
height: 60rpx;
line-height: 60rpx;
}
.uni-input {
height: 60rpx;
line-height: 60rpx;
font-size: 24rpx;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
}
.uni-button {
margin: 30rpx 0;
width: 300rpx;
font-size: 28rpx;
}
.uni-column {
flex-direction: column;
}
.avatar {
width: 100rpx;
height: 100rpx;
padding-top: 15px;
}
</style>其中：url: 'http://www.wechat.com/index.php' 要替换为自己本地的访问路径
大家也可以根据自己的需求编写代码。
3.运行到小程序模拟器测试一下
注意：测试前需要修改为自己的小程序的AppID
4.有问题在小程序编辑器中进行调试
大家也可以根据自己的需求编写代码。
我的demo代码地址：微信小程序前后台完整demo示例。喜欢的给一个Star，有帮助的给一个Fork。
创作不易，如果您觉得这篇文章对您有帮助，欢迎点赞、收藏、转发，有不同的见解可以评论区留言。感谢支持！
