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

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

先看效果图：

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

钢性铸铁跟超文本标记语言不做过多说明直接照搬就行页面上面的3个小图片就不提供了射流研究…部分做了详细注释

view class=' popup-memu ' view class=' line ' style=' background-color : RGB(255，255，255)'/view view class=' payMode ' bind tap=' pay ' data-pay _ type=' weipay ' image src=' http :/images/微信。png '/图像文本样式='宽度336070% '微信/text image src=' http :/images/arrow-right。png '/image/view view class=' payMode ' bind tap=' pay ' data-pay _ type=' 1 ' image src=' http :/images/VIP。png '/图像文本样式='宽度：70% '会员卡/text image src=' http :/images/arrow-right。png '/image/view view class=' payMode ' bind tap=' pay ' data-pay _ type=' 2 ' image src=' http :/images/pay packet。png '/图像文本样式='宽度：70% '零钱/text image src=' http :/images/arrow-right。png '/图像/视图/视图！-密码框带键盘-操作表隐藏=“{ { passworinputhidden } }”绑定更改=“passworinputhidden”视图类='密码输入'视图文本样式=' display : { { inputPassword[0]？': ' none ' } } '/text/view view text style=' display : { { inputPassword[1]？ ' none ' } } '/text/view view text style=' display : { { inputPassword[2]？': ' none ' } } '/text/view view text style=' display : { { inputPassword[3]？ ' none ' } } '/text/view view text style=' display : { { inputPassword[4]？': ' none ' } } '/text/view view text style=' display : { { inputPassword[5]？“无”} } /text/view/view view class=' tips '请输入支付密码(text-100/text)/view view view class=' keyboard ' view class=' left number ' view data-key=' 1 ' hover-class=' active ' hover-stay-time=' 100 ' bind tap=' inputPassword ' 1/view view view view view data-key=' 2 ' hover-class=' active ' hover-stay-time=' 100 ' bind tap=' inputPassword ' 2/view view view data-key=' 3 ' hover-class=' active ' hover-stay-time=' 100 ' /view/view view class=' right ctrl-BTN ' view class=' ctrl-BTN-item ' hover-class=' active ' hover-stay-time=' 100 ' bind tap=' clear ' label class=' icon font icon-shanchu '/label/view class=' ctrl-BTN-item ' hover-class=' active ' hover-stay-time=' 100 ' bind tap=' passwordnputhidden '取消/view/view/view/action-sheet CSS :popup-memu { width : 100%；背景-颜色：白色；边框-top: 1px实心# dedd b5 border-bottom : 1px实心# eeedidisplay :块；} .line {底色： # eee左边距左： 10px h8 : 1 pxmargin-右： 10px} .popup-memu { height : 50px；font-size : 15px线高： 50px边框-底部： 1px实心# eee}。付费模式{ display: flex背景# fffalign-items:居中；边框-底部： 2px实心# eee}。支付模式图像{ width: 30pxheight: 30px左边距左： 18pxmargin-右： 10px} .工作表内容{背景色： # fffpadd : 0 15 rpx }/*键盘*/.密码输入{ display:灵活宽度： 660 rpxborder: 1px固体# dddmargin: 0自动边距-top : 50 rpx；背景-color : # fff；边界半径： 3px} .密码输入视图{ width : 110 rpx h8 : 80 rpx display : flex align-items :居中；正义-内容：中心；盒子尺寸：边框盒子；右边框： 1px实心# ccc}。密码输入视图： th-child(6){ border-right :无；} .密码输入视图文本{宽度： 6px重量： 6px边界半径： 50%;背景色： # 333;} .tips { font-size : 28 rpx文本对齐：中心；边距-top : 5px；} .提示文本{ color: # c30}。键盘{宽度： 100%；显示： flex背景-color : # fff；边框-top: 1px实心# eee边距-top : 50 rpx；} .键盘数字{ display: flex宽度： 570 rpx柔性包装：包装；} .键盘。数字视图{ width : 190 rpx h8 : 120 rpx线高： 120 rpx文本对齐：中心；font-size : 46rpx字体粗细：粗体；盒子尺寸：边框盒子；右边框： 1px实心# eeeborder-bottom: 1px实心# eee}。键盘CTR-BTN {宽度： 180 rpx} .键盘ctrl-BTN视图{高度： 240 rpx线高： 240 rpx文本对齐：中心；盒子尺寸：边框盒子；边框-底部： 1px实心# eee}。键盘ctrl-BTN视图iconfont { font-size: 44rpx！重要；color: # c30}。键盘ctrl-BTN视图： th-child(2){ font-size : 46rpx；color: # c30}。键盘。活动{底色： # e4e 7 ed} .活动{底色： # fffpadd : 25 rpx 20 rpx display : flex align-items :居中；正义-内容：空格；font-size : 24 rpx边框-底部： 1px实心# f6f 6；} .活动。活动项{ font-size : 26rpx} .箭头-右侧{ width : 30 rpx h8 : 30 rpx }。箭头-右侧。活动{ transform:旋转(270度);}/* 键盘结束*/js:

页面({ /** *页面的初始数据*/data: { inputPassword: ' '，//输入的密码passwordInputHidden: true，//隐藏是真实的默认隐藏pay_type: ' '，//支付方式password: 123456，//设置的密码这里写死实际开发中后台专门设置一个表存储用户设置的密码}, /** * 生命周期函数-监听页面加载*/onLoad:函数（选项){ }，支付(e) { //你选择的支付方式var pay _ type=e . CurrentTarget。数据集。pay _ typevar _ this=this if(pay _ type==' weipay '){//此处写入微信支付需要执行的代码不做过多介绍} else { //内部支付打开键盘_这个。passworinput thidden()；} }，inputPassword(e) { //键盘输入的密码赋值给输入密码。数据。inputPassword=this。数据。输入当前目标。数据集。钥匙；这个。setdata({ inputpassword : this。数据。inputpassword })；//当输入密码正确时如果(这个。数据。输入密码。长度==6这个。数据。密码==这个。数据。inputpassword){ this。密码input hidden()；//关闭小键盘} //当输入密码错误时给个提示并且把输入的密码清零如果(这个。数据。输入密码。长度==6这个。数据。密码！=这个。数据。inputpassword){ wx。显示模式({ title : '提示，content: '输入密码错误，})这个。setdata({ inputpassword : ' ' })；} }，passworinputhidden(){ this。setdata({ passworinputhidden :这个。数据。passworinputhidden//取反打开关闭小键盘});这个。setdata({ inputpassword : ' ' })；}, //删除输入错误的密码clear(){ var index=this。数据。输入密码。长度；if(索引0){ var inputPassword=this。数据。输入密码。substr(0，索引-1)；这个。setdata({ inputPassword : inputPassword })；} }, })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。