微信支付的话，调用微信支付接口是有自己的小键盘的，因为小程序没有内部键盘,所以有时候商城内部需要零钱支付 ,会员卡支付,输入密码就需要自己做一个小键盘了。
css 跟 html不做过多说明 直接照搬就行 页面上面的3个小图片就不提供了 js 部分做了详细注释
<view> <view></view> <view bindtap="pay" data-pay_type='weipay'> <image src="https://www.jb51.net/images/wechat.png"></image> <text>微信</text> <image src="https://www.jb51.net/images/arrows-right.png"></image> </view> <view bindtap="pay" data-pay_type='1'> <image src="https://www.jb51.net/images/vip.png"></image> <text>会员卡</text> <image src="https://www.jb51.net/images/arrows-right.png"></image> </view> <view bindtap="pay" data-pay_type='2'> <image src="https://www.jb51.net/images/payPacket.png"></image> <text>零钱</text> <image src="https://www.jb51.net/images/arrows-right.png"></image> </view> </view> <!-- 密码框带键盘 --> <action-sheet hidden="{{passwordInputHidden}}" bindchange="passwordInputHidden"> <view> <view> <text></text> </view> <view> <text></text> </view> <view> <text></text> </view> <view> <text></text> </view> <view> <text></text> </view> <view> <text></text> </view> </view> <view>请输入支付密码( <text>-￥100</text>)</view> <view> <view> <view data-key="1" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>1</view> <view data-key="2" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>2</view> <view data-key="3" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>3</view> <view data-key="4" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>4</view> <view data-key="5" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>5</view> <view data-key="6" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>6</view> <view data-key="7" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>7</view> <view data-key="8" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>8</view> <view data-key="9" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>9</view> <view data-key="X" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>X</view> <view data-key="0" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>0</view> <view data-key="." hover-class='active' hover-stay-time='100' bindtap='inputPassword'>.</view> </view> <view> <view hover-class='active' hover-stay-time='100' bindtap='clear'> <label></label> </view> <view hover-class='active' hover-stay-time='100' bindtap='passwordInputHidden'>取消</view> </view> </view> </action-sheet>
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: