首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网络编程 / JavaScript 阅读数： 1599
收藏 0 赞 0 分享

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

先看效果图 ：

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

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

<view class="popup-memu">
 <view class="line" style="background-color: rgb(255, 255, 255)"></view>
 <view class="payMode" bindtap="pay" data-pay_type='weipay'>
  <image src="/images/wechat.png"></image>
  <text style="width:70%">微信</text>
  <image src="/images/arrows-right.png"></image>
 </view>
 <view class="payMode" bindtap="pay" data-pay_type='1'>
  <image src="/images/vip.png"></image>
  <text style="width:70%">会员卡</text>
  <image src="/images/arrows-right.png"></image>
 </view>
 <view class="payMode" bindtap="pay" data-pay_type='2'>
  <image src="/images/payPacket.png"></image>
  <text style="width:70%">零钱</text>
  <image src="/images/arrows-right.png"></image>
 </view>
</view>
 <!-- 密码框带键盘 -->
<action-sheet hidden="{{passwordInputHidden}}" bindchange="passwordInputHidden">
 <view class='password-input'>
  <view>
   <text style="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]?'':'none'}}"></text>
  </view>
 </view>
 <view class='tips'>请输入支付密码(
  <text>-￥100</text>)</view>
 <view class='keyboard'>
  <view class='left number'>
   <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 class='right ctr-btn'>
   <view class='ctr-btn-item' hover-class='active' hover-stay-time='100' bindtap='clear'>
    <label class='iconfont icon-shanchu'></label>
   </view>
   <view class='ctr-btn-item' 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:

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
   });
  }
 },
 
})

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

更多精彩内容其他人还在看

AngularJs IE Compatibility 兼容老版本IE

本文主要介绍AngularJs IE Compatibility 兼容老版本IE的问题及解决办法，有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

AngularJs Modules详解及示例代码

本文主要介绍AngularJs Modules的相关知识，这里整理了详细的资料及简单示例代码，有兴趣的朋友可以参考下
收藏 0 赞 0 分享

AngularJs Scope详解及示例代码

本文主要介绍AngularJs Scope的知识，这里整理了详细资料及示例代码，有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

node.js中module.exports与exports用法上的区别

Node.js 引入了模块（Module）概念，一个模块可以通过module.exports 或 exports 将函数、变量等导出，以使其它 JavaScript 脚本通过require() 函数引入并使用。那么node.js中module.exports与exports有什么
收藏 0 赞 0 分享

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

这篇文章主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
收藏 0 赞 0 分享

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

最近做了一个项目，其中有需求要求实现发送短信验证码后倒计时功能，其中有个难点：要求关闭页面也进行倒计时。好吧，下面小编把jquery 发送验证码倒计时的实现代码分享给大家，大家可以参考下
收藏 0 赞 0 分享

js绘制购物车抛物线动画

这篇文章主要为大家详细介绍了js绘制购物车抛物线动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

vue.js入门教程之绑定class和style样式

小编之前介绍了通过vue.js计算属性，不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式，有需要的朋友们可以参考借鉴。
收藏 0 赞 0 分享

纯JS实现可拖拽表单的简单实例

下面小编就为大家带来一篇纯JS实现可拖拽表单的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js实现StringBuffer的简单实例

下面小编就为大家带来一篇js实现StringBuffer的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22