登录
当前位置： 首页 > 编程笔记 >

微信小程序 密码输入（源码下载）

席烨
2023-03-14
本文向大家介绍微信小程序 密码输入（源码下载），包括了微信小程序 密码输入（源码下载）的使用技巧和注意事项，需要的朋友参考一下

设计支付密码的输入框

效果如下：

实例代码：

<view class="pay">
<view class="title">支付方式</view>
<view catchtap="wx_pay" class="wx_pay">
<i class="icon {{payment_mode==1?'active':''}}" type="String"></i>
<text>微信支付</text>
</view>
<view catchtap="offline_pay" class="offline_pay">
<i class="icon {{payment_mode==0?'active':''}}" type="String"></i>
<text>对公打款</text>
</view>
<block wx:if="{{balance!=0}}">
<view catchtap="wallet_pay" class="wallet_pay">
<i class="icon {{payment_mode==2?'active':''}}" type="String"></i>
<text>钱包支付(余额:{{balance/100}}元)</text>
</view>
</block>
<block wx:if="{{balance==0}}">
<view class="wallet_pay">
<i class="icon" type="String" style="background:#e8e8e8;border:none;"></i>
<text style="color:#999">钱包支付(余额不足)</text>
</view>
</block>
</view>
<view catchtap="pay" class="save">确定</view>
<!--输入钱包密码-->
<view wx:if="{{wallets_password_flag}}" class="wallets-password">
<view class="input-content-wrap">
<view class="top">
<view catchtap="close_wallets_password" class="close">×</view>
<view class="txt">请输入支付密码</view>
<view catchtap="modify_password" class="forget">忘记密码</view>
</view>
<view class="actual_fee">
<span>￥</span>
<text>{{actual_fee/100}}</text>
</view>
<view catchtap="set_Focus" class="input-password-wrap">
<view class="password_dot">
<i wx:if="{{wallets_password.length>=1}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=2}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=3}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=4}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=5}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=6}}"></i>
</view>
</view>
</view>
<input bindinput="set_wallets_password" class="input-content" password type="number" focus="{{isFocus}}" maxlength="6" />
</view>

index.js

Page({
 data: {
  payment_mode: 1,//默认支付方式 微信支付
  isFocus: false,//控制input 聚焦
  balance:100,//余额
  actual_fee:20,//待支付
  wallets_password_flag:false//密码输入遮罩
 },
 //事件处理函数
 
 onLoad: function () {
  
 },
 wx_pay() {//转换为微信支付
  this.setData({
   payment_mode: 1
  })
 },
 offline_pay() {//转换为转账支付
  this.setData({
   payment_mode: 0
  })
 },
 wallet_pay() {
  this.setData({//转换为钱包支付
   payment_mode: 2
  })
 },
 set_wallets_password(e) {//获取钱包密码
  this.setData({
   wallets_password: e.detail.value
  });
  if (this.data.wallets_password.length == 6) {//密码长度6位时，自动验证钱包支付结果
   wallet_pay(this)
  }
 },
 set_Focus() {//聚焦input
  console.log('isFocus', this.data.isFocus)
  this.setData({
   isFocus: true
  })
 },
 set_notFocus() {//失去焦点
  this.setData({
   isFocus: false
  })
 },
 close_wallets_password () {//关闭钱包输入密码遮罩
  this.setData({
   isFocus: false,//失去焦点
   wallets_password_flag: false,
  })
 },
 pay() {//去支付
  pay(this)
 }
})
/*-----------------------------------------------*/
/*支付*/
function pay(_this) {
 let apikey = _this.data.apikey;
 let id = _this.data.id;
 let payment_mode = _this.data.payment_mode
 if (payment_mode == 1) {
 // 微信支付
 // 微信自带密码输入框
  console.log('微信支付')
 } else if (payment_mode == 0) {
 // 转账支付 后续跳转至传转账单照片
  console.log('转账支付')
 } else if (payment_mode == 2) {
  // 钱包支付 输入密码
  console.log('钱包支付')
  _this.setData({
   wallets_password_flag: true,
   isFocus: true
  })
 }

}
// 钱包支付
function wallet_pay(_this) {
 console.log('钱包支付请求函数')
 /*
 1.支付成功
 2.支付失败：提示；清空密码；自动聚焦isFocus:true，拉起键盘再次输入
 */
}

index.wxss

page {
 height: 100%;
 width: 100%;
 background: #e8e8e8;
}

page .pay {
 display: flex;
 flex-direction: column;
 background: #fff;
}

page .pay .title {
 height: 90rpx;
 line-height: 90rpx;
 font-size: 28rpx;
 color: #353535;
 padding: 0 23rpx;
 border-bottom: 1rpx solid #ddd;
 box-sizing: border-box;
}

page .pay .wx_pay, page .pay .offline_pay, page .pay .wallet_pay {
 margin: 0 26rpx;
 height: 90rpx;
 line-height: 90rpx;
 border-bottom: 2rpx solid #ddd;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: flex-start;
}

page .pay .wx_pay .icon, page .pay .offline_pay .icon,
page .pay .wallet_pay .icon {
 width: 34rpx;
 height: 34rpx;
 border: 2rpx solid #ddd;
 box-sizing: border-box;
 border-radius: 50%;
}

page .pay .wx_pay .icon.active, page .pay .offline_pay .icon.active,
page .pay .wallet_pay .icon.active {
 border: 10rpx solid #00a2ff;
}

page .pay .wx_pay text, page .pay .offline_pay text, page .pay .wallet_pay text {
 margin-left: 20rpx;
 color: #353535;
 font-size: 26rpx;
}

page .pay .wallet_pay {
 border: 0;
 border-top: 2rpx solid #ddd;
}

page .pay .offline_pay {
 border: 0 none;
}

page .save {
 margin: 80rpx 23rpx;
 color: #fff;
 background: #00a2ff;
 height: 88rpx;
 line-height: 88rpx;
 text-align: center;
 font-size: 30rpx;
 border-radius: 10rpx;
}

page .wallets-password {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.6);
}

page .wallets-password .input-content-wrap {
 position: absolute;
 top: 200rpx;
 left: 50%;
 display: flex;
 flex-direction: column;
 width: 600rpx;
 margin-left: -300rpx;
 background: #fff;
 border-radius: 20rpx;
}

page .wallets-password .input-content-wrap .top {
 display: flex;
 align-items: center;
 height: 90rpx;
 border-bottom: 2rpx solid #ddd;
 justify-content: space-around;
}

page .wallets-password .input-content-wrap .top .close {
 font-size: 44rpx;
 color: #999;
 font-weight: 100;
}

page .wallets-password .input-content-wrap .top .forget {
 color: #00a2ff;
 font-size: 22rpx;
}

page .wallets-password .input-content-wrap .actual_fee {
 display: flex;
 align-items: center;
 justify-content: center;
 color: #000;
 height: 100rpx;
 margin: 0 23rpx;
 border-bottom: 2rpx solid #ddd;
}

page .wallets-password .input-content-wrap .actual_fee span {
 font-size: 24rpx;
}

page .wallets-password .input-content-wrap .actual_fee text {
 font-size: 36rpx;
}

page .wallets-password .input-content-wrap .input-password-wrap {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 150rpx;
}

page .wallets-password .input-content-wrap .input-password-wrap .password_dot {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: #000;
 box-sizing: border-box;
 width: 90rpx;
 height: 90rpx;
 border: 2rpx solid #ddd;
 border-left: none 0;
}

page .wallets-password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {
 border-left: 2rpx solid #ddd;
}

page .wallets-password .input-content-wrap .input-password-wrap .password_dot i {
 background: #000;
 border-radius: 50%;
 width: 20rpx;
 height: 20rpx;
}

page .wallets-password .input-content {
 position: absolute;
 opacity: 0;
 left: -100%;
 top: 600rpx;
 background: #f56;
 z-index: -999;
}

page .wallets-password .input-content.active {
 z-index: -99;
}

github地址：https://github.com/fiveTree/-_-

源码下载地址：http://xiazai.jb51.net/201706/yuanma/master(jb51.net).rar

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

 类似资料：
  • 微信小程序 自动登陆PHP源码实例（源码下载）

    本文向大家介绍微信小程序 自动登陆PHP源码实例（源码下载），包括了微信小程序 自动登陆PHP源码实例（源码下载）的使用技巧和注意事项，需要的朋友参考一下 微信小程序 自动登陆PHP源码实例 app.js     初始化APP自动登陆     您也可以在任何地方进行用户登陆验证      用法：首先在js文件中定义 var app = getApp(); app.getUserDataToken(

  • 微信小程序 MD5加密登录密码详解及实例代码

    本文向大家介绍微信小程序 MD5加密登录密码详解及实例代码，包括了微信小程序 MD5加密登录密码详解及实例代码的使用技巧和注意事项，需要的朋友参考一下 微信小程序 MD5加密      在小程序中，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。zepto/jquery 也无法使用，因为zepto/jquery

  • 微信小程序 sha1 实现密码加密实例详解

    本文向大家介绍微信小程序 sha1 实现密码加密实例详解，包括了微信小程序 sha1 实现密码加密实例详解的使用技巧和注意事项，需要的朋友参考一下 微信小程序 sha1 实现密码加密实例详解 在utils中的util.js 文件中增加 函数 实现 字符串转换为16进制加密后的字符串 导出函数 这样就可以在其他页面中调用了  以 密码为  123456 作为示例，在线加密结果 小程序中调用结果 加密

  • Android仿微信/支付宝密码输入框

    本文向大家介绍Android仿微信/支付宝密码输入框，包括了Android仿微信/支付宝密码输入框的使用技巧和注意事项，需要的朋友参考一下 在用到支付类app时，都有一个简密的输入框。。开始实现的时候思路有点问题，后来到github上搜了下，找到了一个开源的库看起来相当的牛逼，，来个地址先： https://github.com/Jungerr/GridPasswordView 效果图： 这个开源

  • 微信小程序获取手机系统信息的方法【附源码下载】

    本文向大家介绍微信小程序获取手机系统信息的方法【附源码下载】，包括了微信小程序获取手机系统信息的方法【附源码下载】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了微信小程序获取手机系统信息的方法。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 index.wxml布局文件代码 index.js逻辑文件代码 这里通过wx.getSystemInfo函数来获取手机系统信息。具体参

  • PHP：微信小程序 微信支付服务端集成实例详解及源码下载

    本文向大家介绍PHP：微信小程序 微信支付服务端集成实例详解及源码下载，包括了PHP：微信小程序 微信支付服务端集成实例详解及源码下载的使用技巧和注意事项，需要的朋友参考一下 微信小程序 微信支付服务端集 理论上集成微信支付的全部工作可以在小程序端完成，因为小程序js有访问网络的能力，但是为了安全，不暴露敏感key，而且可以使用官方提供的现成php demo更省力，于是在服务端完成签名与发起请求，

  • 微信小程序使用车牌号输入法的示例代码

    本文向大家介绍微信小程序使用车牌号输入法的示例代码，包括了微信小程序使用车牌号输入法的示例代码的使用技巧和注意事项，需要的朋友参考一下 在做小程序时，做了一个关于车的项目，然后需要添加车辆信息、添加车牌号，使用车牌键盘输入，当时我把这个需求给砍了，然后在添加车辆信息时，老大看到数据库里我乱填的车牌号，又让我把他加上了^o^ 1.效果图 2.相关代码使用组件形式实现键盘输入 组件代码index.wx

  • 微信小程序前端源码逻辑和工作流

    本文向大家介绍微信小程序前端源码逻辑和工作流，包括了微信小程序前端源码逻辑和工作流的使用技巧和注意事项，需要的朋友参考一下 废话不多说，直接分析前端代码。 文件基本结构： 先看入口app.js，app(obj)注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。其他文件可以通过全局方法getApp()获取app实例，进而直接调用它的属性或方法，例如（getApp().glo

相关阅读

PHP：微信小程序 微信支付服务端集成实例详解及源码下载微信小程序使用车牌号输入法的示例代码微信小程序前端源码逻辑和工作流微信小程序实现打开内置地图功能【附源码下载】微信小程序获取手机网络状态的方法【附源码下载】

相关文章

JavaFX密码字段Hadoop源码编译MySQL修改root密码Struts2 <s:password>密码示例Linux源码包升级

相关问答

前端 - 微信小程序生成微信支付二维码失败是什么原因？微信小程序中转问题？java - JAVA 如何生成带参数的微信小程序二维码？微信小程序 - Taro开发微信小测试,配置tabBar 无效?前端 - 微信小程序微信wx:If/else外层包裹block?

相关工具

WordPress 微信小程序小说精品屋-微信小程序九宫格方式输入密码“小镇故事”官网微信小程序微慕小程序

相关文档

Java 密码学教程Python 密码学教程Mybatis 源码学习过程阅读 express 源码Laravel 源码详解
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.