小程序仿微信支付键盘实现

最新推荐文章于 2023-08-08 10:47:55 发布
最新推荐文章于 2023-08-08 10:47:55 发布
阅读量771 收藏 2
点赞数 1
分类专栏： 微信小程序学习之路 文章标签： html js 小程序 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asa12345asas/article/details/123252301
版权
  1. 先上图
    键盘效果
    2.实现过程

键盘放在了vant-weapp组件的弹窗框popup中，并且默认进入页面自动弹出键盘

index.wxml

<van-popup show="{{ show }}" overlay="{{ false }}" position="bottom" bind:close="onClose">
    <view class="flex-col keyboard">
      <view class="flex-row">
        <view class="flex-row group_5">
          <view class="text-wrapper flex-col items-center justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 1 }}" catchtap="keyInput">
            <text decode="decode">1</text>
          </view>
          <view class="text-wrapper flex-col items-center view_2 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 2 }}" catchtap="keyInput">
            <text decode="decode">2</text>
          </view>
          <view class="text-wrapper flex-col items-center view_2 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 3 }}" catchtap="keyInput">
            <text decode="decode">3</text>
          </view>
        </view>
        <view class="flex-col items-center image-wrapper justify-center" hover-class="down_state" hover-stay-time="{{50}}" catchtap="delInput">
          <image src="http://test2.xjdm100.com/xz-wxapp/0d44f235e7cedbd8c950096e47507eea.png" class="image_4" />
        </view>
      </view>
      <view class="flex-row group_6">
        <view class="flex-col group_7">
          <view class="flex-col group_8">
            <view class="flex-row">
              <view class="left-text-wrapper flex-col items-center view_4 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 4 }}" catchtap="keyInput">
                <text decode="decode">4</text>
              </view>
              <view class="left-text-wrapper flex-col items-center view_5 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 5 }}" catchtap="keyInput">
                <text decode="decode">5</text>
              </view>
              <view class="left-text-wrapper flex-col items-center view_6 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 6 }}" catchtap="keyInput">
                <text decode="decode">6</text>
              </view>
            </view>
            <view class="flex-row group_10">
              <view class="text-wrapper flex-col items-center justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 7 }}" catchtap="keyInput">
                <text decode="decode">7</text>
              </view>
              <view class="text-wrapper flex-col items-center view_8 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 8 }}" catchtap="keyInput">
                <text decode="decode">8</text>
              </view>
              <view class="text-wrapper flex-col items-center view_9 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 9 }}" catchtap="keyInput">
                <text decode="decode">9</text>
              </view>
            </view>
          </view>
          <view class="flex-row group_11">
            <view class="left-text-wrapper flex-col items-center justify-center view_10" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 0 }}" catchtap="keyInput">
              <text decode="decode">0</text>
            </view>
            <view class="flex-col items-center text-wrapper_1 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="." catchtap="keyInput">
              <text decode="decode">.</text>
            </view>
          </view>
        </view>
        <view class="flex-col items-center justify-center text-wrapper_2" hover-class="down_state2" hover-stay-time="{{50}}" bindtap="goRecharge">
          <text decode="decode">充值</text>
        </view>
      </view>
    </view>
  </van-popup>

index.wxss

.group_5 {
  margin-top: 20rpx;
  color: rgb(22, 22, 22);
  font-size: 33rpx;
  line-height: 25rpx;
  white-space: nowrap;
  flex: 1 1 auto;
}

.group_6 {
  margin-top: 10rpx;
}

.text_1 {
  margin-top: 3rpx;
}

.image_1 {
  margin-left: 30rpx;
  width: 350rpx;
  height: 71rpx;
}

.text_2 {
  color: rgb(28, 28, 28);
  font-size: 25rpx;
  line-height: 24rpx;
  white-space: nowrap;
}

.group_4 {
  margin-top: 50rpx;
  padding: 0 3rpx;
  /* display: inline; */
  vertical-align: top;
  /* line-height: 63rpx; */
  /* white-space: nowrap; */
}

.divider {
  margin-top: 32rpx;
  background-color: rgb(228, 228, 228);
  height: 2rpx;
}

.balance-area {
  margin-top: 12rpx;
  color: rgb(28, 28, 28, .6);
  font-size: 25rpx;
}

.view_2 {
  margin-left: 10rpx;
}

.view_3 {
  margin-left: 12rpx;
}

.image-wrapper {
  margin-left: 10rpx;
  margin-top: 20rpx;
  padding: 26rpx 0 27rpx;
  width: 160rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 10rpx;
  height: 90rpx;
}

.group_7 {
  flex: 1 1 auto;
}

.text-wrapper_2 {
  margin-left: 10rpx;
  padding: 118rpx 0;
  color: rgb(255, 255, 255);
  font-size: 29rpx;
  line-height: 28rpx;
  white-space: nowrap;
  background-color: rgb(7, 193, 96);
  border-radius: 10rpx;
  width: 160rpx;
  height: 290rpx;
}

.image_3 {
  width: 36rpx;
  height: 50rpx;
}

.text_3 {
  margin-left: 27rpx;
  height: 70rpx;
  flex: 1;
  color: rgb(28, 28, 28);
  font-size: 84rpx;
  font-weight: 600;
  caret-color: rgb(7, 193, 96);
}

.image_4 {
  width: 33rpx;
  height: 27rpx;
}

.group_8 {
  color: rgb(22, 22, 22);
  font-size: 33rpx;
  line-height: 25rpx;
  white-space: nowrap;
}

.group_11 {
  margin-top: 10rpx;
}

.group_10 {
  margin-top: 10rpx;
}

.view_10 {
  flex: 1 1 auto;
  color: rgb(22, 22, 22);
  font-size: 33rpx;
  line-height: 25rpx;
  white-space: nowrap;
}

.text-wrapper_1 {
  margin-left: 10rpx;
  padding: 45rpx 0 29rpx;
  color: rgb(22, 22, 22);
  font-size: 33rpx;
  line-height: 6rpx;
  white-space: nowrap;
  background-color: rgb(255, 255, 255);
  border-radius: 10rpx;
  width: 180rpx;
  height: 90rpx;
}

.view_4 {
  flex: 1 1 160rpx;
}

.view_5 {
  margin-left: 10rpx;
  flex: 1 1 160rpx;
}

.view_6 {
  margin-left: 10rpx;
  flex: 1 1 160rpx;
}

.view_8 {
  margin-left: 10rpx;
}

.view_9 {
  margin-left: 10rpx;
}

.keyboard {
  background-color: rgb(235 243 255);
  box-sizing: border-box;
  padding: 10rpx;
  font-size: 46rpx;
  font-weight: 500;
}

.down_state {
  background-color: #f5f5f5;
}

.down_state2 {
  background-color: rgba(7, 193, 96, .6);
}

.text-wrapper {
  flex: 1 1 160rpx;
  padding: 27rpx 0 29rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 10rpx;
  height: 90rpx;
}
// 公共部分
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

.justify-around {
  display: flex;
  justify-content: space-around;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.items-start {
  display: flex;
  align-items: flex-start;
}

.items-center {
  display: flex;
  align-items: center;
}

.items-end {
  display: flex;
  align-items: flex-end;
}

index.js

data: {
    amount: '',
    show: false,
},
keyInput(e) {
    let key = e.currentTarget.dataset.key
    let now = this.data.amount + key.toString()
    let inputVal = this.money(now)
    this.setData({
      amount: inputVal
    })
  },
goRecharge() {
    wx.showLoading({
      title: '充值中',
    })
    setTimeout(() =>{
		wx.hideLoading()
    },2000)
},
delInput() {
    let now = this.data.amount
    this.setData({
      amount: now.substr(0, now.length - 1)
    })
},
机智的奎哥
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
uniapp(全端兼容) - 最新详细实现支付键盘功能组件，从底部弹出数字键盘输入支付密码进行付款交互效果，自定义支付密码键盘仿微信、支付宝支付键盘，1~9密码数字键盘，电商支付（详细示例代码复制运行
高级前端工程师
07-11 2003
uniapp，微信小程序，自定义数字键盘，输入支付密码的键盘组件，uniapp小程序如何实现从底部弹出输入支付密码自定义键盘功能，uniapp小程序密码支付键盘组件插件，自定义数字键盘输入页面，怎么封装底部弹窗自定义数字键盘用于输入支付密码，uniapp小程序仿类似电商支付密码输入模态框，uniapp微信小程序平台实现自定义支付密码键盘，uniapp 密码支付，数字键盘,安全键盘,交易键盘,交易密码,交易密码输入框，uniapp自定义支付键盘: uniapp自定义支付键盘，uniapp小程序端实现键盘输入支
微信小程序模拟支付界面
xy19950125的博客
10-12 6525
有些时候 遇到一些类似于银行卡输入密码或者微信支付输入密码的类似需求 刚刚开始的时候 我第一反应就是放几个input 但是呢 每次输入的时候 都会重新调用软键盘 用户体验极其不好 下面先看下类似的原型 代码 以小程序为例 html <view catchtap='showInputLayer' class="btn_pay">立即支付</view> <!-- 密码输入框 --> <view wx:if='{{showPayPwdInput}}'&g...
微信小程序自定义键盘 内部虚拟支付
10-17
主要为大家详细介绍了微信小程序自定义键盘，内部虚拟支付，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序自定义键盘|仿微信支付数字键盘
Luo的博客
02-24 4386
实现效果 简介 点击金额模块区域，获取焦点。 点击非金额模块区域，失去焦点且隐藏支付键盘。 支持小数点两位数字。 付款金额默认置灰，点击付款按钮无效。当输入付款金额后，付款按钮还原正常状态。 删除按钮可以通过icon图标或者图片来替换，达到和微信数字支付键盘一样的效果。 有更合适的实现方式或者代码不合理的地方，欢迎留言交流 实现代码 // index.wxml <view class="pay-container" catchtap="handleHiddenKey"> <
小程序自定义数字键盘|仿微信支付、支付宝支付密码键盘
weixin_34209851的博客
12-12 2877
微信小程序自定义键盘插件wcKeyboard|仿微信数字软键盘|仿支付宝自定义数字键盘|小程序自定义模拟系统键盘 前段时间有开发过一个html5仿支付宝、微信支付数字键盘，在某些情况下自定义数字键盘应用还是蛮多的，比如 购物商城系统 零钱付款 ,会员卡支付，恰好微信小程序没有内部数字键盘组件，这样输入密码就需要自己做一个自定义软键盘了。于是就在之前插件...
仿微信支付页面html
01-17
请填写资源的Tag
微信小程序 实现微信支付界面效果
weixin_45527865的博客
03-23 3586
效果图 代码片段 .setMoney-wrap-top { padding: 68rpx 60rpx; box-sizing: border-box; background-color: #ffffff; } .collection-title { color: #333333; font-size: 28rpx; padding-bottom: 30rpx; } .money-danwie { font-size: 80rpx; font-weight: bo.
微信小程序自定义数字键盘|仿支付宝、微信支付数字软键盘
03-29
前几天有开发过一个html5仿支付宝、微信支付数字键盘，在某些特定场景下自定义数字键盘应用还是蛮广泛的，比如 小程序商城系统 需要零钱支付 ,会员卡支付，心想着微信小程序没有内部数字键盘组件，这样输入密码就...
仿微信支付页面键盘输入金额
06-04
【标题】"仿微信支付页面键盘输入金额"指的是在网页设计中实现一个与微信支付页面相似的键盘输入框，让用户可以方便地输入支付金额。这种功能常见于电子商务网站或者在线支付应用，提供用户友好的支付体验。 【描述...
JS实现仿微信支付弹窗功能
10-18
【JS实现仿微信支付弹窗功能】是一种在网页中模拟微信支付流程的用户体验设计，它通常包括一个可弹出的窗口，展示支付相关信息，并提供数字输入键盘供用户输入支付密码。这种功能对于在线购物网站或者应用程序来说，...
微信小程序车牌键盘
03-29
公司要做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，决定自己写一个键盘。 效果图如下 省份简写键盘如下: (此图片来源于网络，如有...
Android实现仿支付宝账单，按月组合，只需要传给List_T_即可，可以自己按规则组装
11-07
Android实现仿支付宝账单，按月组合，只需要传给List_T_即可，可以自己按规则组装 基于Eclipse的android工程源码demo
自定义键盘支付：u-keyboard、u-message-input
sunluyi的博客
03-18 1855
<!-- 余额支付输入密码 --> <u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false" v-model="paypasswordShow" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @bac
微信小程序自定义键盘|仿支付宝、微信支付数字键盘
weixin_34216036的博客
12-15 4290
小程序自定义数字键盘插件wckeyboard|仿微信支付密码键盘|仿支付宝数字键盘小程序由于没有键盘组件，只能是使用<input type="number">来唤起系统键盘了，在某些场景下，自定义数字键盘还是有需要的，如：商城系统零钱支付、会员卡支付等，需要输入密码的时候，如果能使用自定义数字键盘的话，会有比较好的用户体验。...
小程序自己定义键盘
weixin_34124651的博客
04-02 5724
自定义键盘功能 这个键盘的样式可以自己随便定义，功能只能实现简单的数字字母或指定汉字的输入。不能输入拼音拼出汉字。 适用场景 这个键盘的适用场景就是一些特定的需要输入指定字母或汉字的地方，比如输入用户手机号，再比如输入各个省的车牌号首位，再比如输入飞机航班号。写这个键盘的原因就是在支付宝小程序里调用键盘会出现很多问题。而且不好控制。自己写键盘不仅避免了很多坑，而且样式可以随便自己定义，方便。 实现...
微信小程序仿微信、支付宝数字密码软键盘wcKeyboard
chourenchan4303的博客
12-14 1906
微信小程序自定义数字键盘|仿微信支付数字密码键盘|仿支付宝数字键盘 之前有开发过html5+js仿支付宝、微信支付自定义数字键盘，今天就在之前的插件基础上，重新开发出了小程序版本的仿微信、支付宝数字键盘插件。 ...
微信小程序数字键盘（仿微信转账键盘）
ZionHH的博客
07-26 3253
微信小程序数字键盘（仿微信转账键盘）
微信小程序支付流程（前端）
weixin_55639808的博客
05-10 564
前端开发微信支付功能流程
基于vant的密码输入框，数字键盘，及金额输入
最新发布
coldriversnow的专栏
08-08 1584
【代码】基于vant的密码输入框，数字键盘，及金额输入。
微信小程序实现微信支付
04-28
要实现微信支付，你需要先在微信商户平台注册账号，并且完成商家认证流程。然后，你需要在小程序中使用微信支付的API进行调用。 具体步骤如下： 1. 在小程序中引入微信提供的JSAPI文件，如下： ```javascript <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> ``` 2. 调用微信支付API，如下： ```javascript wx.requestPayment({ timeStamp: '', nonceStr: '', package: '', signType: 'MD5', paySign: '', success: function (res) { }, fail: function (res) { } }) ``` 其中，timeStamp、nonceStr、package、paySign四个参数需要在服务端签名后返回给前端。具体签名流程可以参考微信支付开发文档。 3. 处理支付结果，如下： ```javascript wx.request({ url: 'https://api.weixin.qq.com/pay/orderquery', data: { appid: '', mch_id: '', out_trade_no: '' }, success: function (res) { }, fail: function (res) { } }) ``` 其中，out_trade_no参数为商户订单号，用于查询订单支付状态。 以上就是实现微信支付的基本流程，具体还需要根据自己的业务需求进行调整。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值