微信小程序自定义支付功能实现(前端)

主要包括①自定义金额的逻辑样式②微信支付的功能实现

效果图：

金额选择框，选中颜色更改，输入框更多金额也对应显示数值，当然也可以自定义金额。

点击下方按钮，调用微信支付，对应所填/选金额进行支付

页面代码

        <view class="content">
			<p>金额</p>
			<view class="box">
				<view v-for="(item, index) in account" :key="index"
					:class="{ 'account': true, 'account2': activeIndex === index }"
					@click="select(item,index)">{{item}}元</view>
			</view>
		</view>
		<view class="input_">
			更多金额
			<u-input class="input" v-model="data_m.amount" type="digit" @input="checkAmount" @focus="handleFocus"
				@blur="handleBlur" :border="false" placeholder="请输入金额" :clearable="false" />元
		</view>

		<button class="button" :disabled="isDisabled" @click="pay">立即支付</button>

data() {
			return {
				data_m: {
					amount: ''
				},
				account: ['100', '200', '300'],
				activeIndex: null,
				isDisabled: false, // 初始时按钮不禁用
			}
   },

输入框绑定代码

            select(item, index) {
				this.activeIndex = index;
				this.data_m.amount = item
			},

			handleFocus() {
				this.activeIndex = null
			},

			handleBlur() {
				if (this.data_m.amount) {
					this.data_m.amount = (this.data_m.amount.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				}
			},

			// 小数点后2位
			checkAmount(e) {
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.data_m.amount = e
			},

样式代码 

    .content {
		height: auto;
		padding: 30rpx 10rpx 10rpx 10rpx;
		color: #877d77;
	}

	.box {
		display: flex;
		text-align: center;
		padding-left: 30rpx;
	}

	.account {
		color: #000;
		width: 180rpx;
		height: 100rpx;
		line-height: 100rpx;
		border: 1px solid #ddd;
		border-radius: 5px;
		margin: 10px 10px;
	}

	.account2 {
		color: #fd0100;
		width: 180rpx;
		height: 100rpx;
		line-height: 100rpx;
		border: 1px solid #fd0100;
		border-radius: 5px;
		margin: 10px 10px;
	}

	.input_ {
		height: 100rpx;
		padding: 10rpx 10rpx;
		color: #877d7d;
		line-height: 70rpx;
		display: flex;
	}

	.input {
		display: inline-block;
		margin: 0px 10px;
		background-color: #f2f2f4;
		border-radius: 5px;
		width: 500rpx;
		height: 70rpx;
		padding: 0px 10px;
	}

	.button {
		width: 240px;
		height: 36px;
		line-height: 36px;
		margin-top: 20px;
		background-color: #fd0100;
		color: #fff;
		font-size: 18px;
	}

支付功能代码

pay() { // 去支付
      var that = this
      uni.request({ // 发起网络请求
          url: "XXX你的地址", // 请求地址
          method: 'POST', // 请求方法
          data: { 
                  //前后端xxx约定的参数                     
               },
          success(res) { // 请求成功回调函数
                //需要后端把很多微信返回的参数传过来，这里也可以用wx.requestPayment
				uni.requestPayment({ // 调用微信支付API
						provider: 'wxpay',
						timeStamp: res.timeStamp, //时间戳
						nonceStr: res.nonceStr, //微信返回的随机字符串
						package: res.package, //预支付id
						signType: res.signType, //签名算法
						paySign: res.paySign, //微信返回的签名值
						success: function(res) { // 支付成功回调函数
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
						},
						fail: function(err) { // 支付失败回调函数
							console.log('fail:' + JSON.stringify(err));

						}
					});
				
                    }
                })
            }

重要的在于，wx/uni.requestPayment所传的参数值是否正确。在支付成功之后，可以进行一些操作。在支付失败的时候，需要关闭订单或取消订单。

还有一点，调用微信支付，必须先申请微信支付接口权限。

微信公众平台(小程序) --微信支付 --申请接入微信支付

按照申请流程操作，关联商户信息等等