php 微信小程序虚拟支付,微信小程序自定义键盘 内部虚拟支付

本文实例为大家分享了微信小程序自定义键盘的具体代码，供大家参考，具体内容如下

先看效果图 ：

微信支付的话，调用微信支付接口是有自己的小键盘的，因为小程序没有内部键盘,所以有时候商城内部需要零钱支付 ,会员卡支付,输入密码就需要自己做一个小键盘了。

css  跟  html不做过多说明 直接照搬就行   页面上面的3个小图片就不提供了 js 部分做了详细注释

微信

会员卡

零钱

请输入支付密码(

-￥100)

1

2

3

4

5

6

7

8

9

X

0

.

取消

CSS:

.popup-memu {

width: 100%;

background-color: white;

border-top: 1px solid #dedbd5;

border-bottom: 1px solid #eee;

display: block;

}

.line {

background-color: #eee;

margin-left: 10px;

height: 1px;

margin-right: 10px;

}

.popup-memu {

height: 50px;

font-size: 15px;

line-height: 50px;

border-bottom: 1px solid #eee;

}

.payMode {

display: flex;

background: #fff;

align-items: center;

border-bottom: 2px solid #eee;

}

.payMode image {

width: 30px;

height: 30px;

margin-left: 18px;

margin-right: 10px;

}

.sheet-content {

background-color: #fff;

padding: 0 15rpx;

}

/* 键盘 */

.password-input {

display: flex;

width: 660rpx;

border: 1px solid #ddd;

margin: 0 auto;

margin-top: 50rpx;

background-color: #fff;

border-radius: 3px;

}

.password-input view {

width: 110rpx;

height: 80rpx;

display: flex;

align-items: center;

justify-content: center;

box-sizing: border-box;

border-right: 1px solid #ccc;

}

.password-input view:nth-child(6) {

border-right: none;

}

.password-input view text {

width: 6px;

height: 6px;

border-radius: 50%;

background-color: #333;

}

.tips {

font-size: 28rpx;

text-align: center;

margin-top: 5px;

}

.tips text {

color: #c30;

}

.keyboard {

width: 100%;

display: flex;

background-color: #fff;

border-top: 1px solid #eee;

margin-top: 50rpx;

}

.keyboard .number {

display: flex;

width: 570rpx;

flex-wrap: wrap;

}

.keyboard .number view {

width: 190rpx;

height: 120rpx;

line-height: 120rpx;

text-align: center;

font-size: 46rpx;

font-weight: bold;

box-sizing: border-box;

border-right: 1px solid #eee;

border-bottom: 1px solid #eee;

}

.keyboard .ctr-btn {

width: 180rpx;

}

.keyboard .ctr-btn view {

height: 240rpx;

line-height: 240rpx;

text-align: center;

box-sizing: border-box;

border-bottom: 1px solid #eee;

}

.keyboard .ctr-btn view .iconfont {

font-size: 44rpx !important;

color: #c30;

}

.keyboard .ctr-btn view:nth-child(2) {

font-size: 46rpx;

color: #c30;

}

.keyboard .active {

background-color: #e4e7ed;

}

.activity {

background-color: #fff;

padding: 25rpx 20rpx;

display: flex;

align-items: center;

justify-content: space-between;

font-size: 24rpx;

border-bottom: 1px solid #f6f6f6;

}

.activity.activity-item {

font-size: 26rpx;

}

.arrows-right {

width: 30rpx;

height: 30rpx;

}

.arrows-right.active {

transform: rotate(270deg);

}

/* 键盘结束 */

js:

Page({

/**

* 页面的初始数据

*/

data: {

inputPassword: '', //输入的密码

passwordInputHidden: true,//hidden是true 默认隐藏

pay_type: '',//支付方式

password: 123456,//设置的密码 这里写死 实际开发中后台专门设置一个表存储用户设置的密码

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

pay(e) {

//你选择的支付方式

var pay_type = e.currentTarget.dataset.pay_type;

var _this = this;

if (pay_type == 'weipay') {

//此处写入微信支付需要执行的代码不做过多介绍

} else {

//内部支付 打开键盘

_this.passwordInputHidden();

}

},

inputPassword(e) {

//键盘输入的密码 赋值给inputPassword

this.data.inputPassword = this.data.inputPassword + e.currentTarget.dataset.key;

this.setData({

inputPassword: this.data.inputPassword

});

//当输入密码正确时

if (this.data.inputPassword.length == 6 && this.data.password == this.data.inputPassword) {

this.passwordInputHidden();//关闭小键盘

}

//当输入密码错误时 给个提示 并且把输入的密码清零

if (this.data.inputPassword.length == 6 && this.data.password != this.data.inputPassword) {

wx.showModal({

title: "提示",

content: "输入密码错误",

})

this.setData({

inputPassword: ''

});

}

},

passwordInputHidden() {

this.setData({

passwordInputHidden: !this.data.passwordInputHidden //取反 打开关闭小键盘

});

this.setData({

inputPassword: ''

});

},

//删除输入错误的密码

clear() {

var index = this.data.inputPassword.length;

if (index > 0) {

var inputPassword = this.data.inputPassword.substr(0, index - 1);

this.setData({

inputPassword: inputPassword

});

}

},

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。