uniapp创建支付密码实现(初始密码，第二次密码)

于 2024-05-31 10:29:00 发布
阅读量621 收藏 6
点赞数 1
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rio_Gaven/article/details/139345477
版权

示例：

插件地址：自定义数字/身份证/密码输入框，键盘密码框可分离使 - DCloud 插件市场

1.下载插件并导入HBuilderX，找到文件夹，copy number-keyboard.vue一份为number-keyboard2.vue（number-keyboard.vue是键盘，password-input.vue是密码输入框）

2.修改插件键盘和密码框样式，已写好，直接copy下面代码

password-input.vue

<template>
  <view class="psdIptBx">
    <block v-for="(item , index) in psdIptNum" :key='index'>
      <view class="psdTtem">
        <text v-if="numLng.length > index" class="psdTtemTxt">
          <text v-if="plaintext">●</text>
          <text v-else>{{numLng[index]}}</text>
        </text>
        <text v-if="numLng.length ==index" class="focus_move">|</text>
      </view>
    </block>
  </view>
</template>

<script>
  export default {
    props: {
      //是否明文 默认密文
      plaintext: {
        type: Boolean,
        default: true
      },
      //键盘输入的val
      numLng: {
        type: [String, Number],
        default: ''
      },
      //密码框的个数
      psdIptNum: {
        type: [String, Number],
        default: 6
      }
    },
    data() {
      return {}
    },
    created() {},
    methods: {
    }
  }
</script>

<style scoped>
  .psdIptBx {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .psdTtem {
    width: 86rpx;
    height: 86rpx;
    background: #F2F2F2;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .psdTtemTxt {
    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
  }

  .focus_move {
    /* color: #E6240F; */
    font-size: 30rpx;
    line-height: 80rpx;
    animation: focus 0.8s infinite;
  }

  @keyframes focus {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }
</style>

number-keyboard.vue

<template>
	<view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid">
		<view @click="close" class="dowmImgBx">
			<view class="dowmImg"></view>
			<view v-if="confirmBtn" class="complete" @click.stop="complete">完成</view>
		</view>
		<view class="KeyboarBx">
			<view v-for="(num , index) in keyboardNum " :key='index' @click="clickBoard(num)" hover-class="hover"
				:hover-stay-time='20' class="keyboar">
				{{num}}
			</view>
			<view @click="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20'
				hover-class="hover">{{otherNum}}</view>
			<view @click="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view>
			<view @click="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
				<view class="keyboarDel"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//限制输入框的长度 空值不限制
			psdLength: {
				type: [Number, String],
				default: ''
			},
			//键盘码
			keyboardNum: {
				type: [Array, Object],
				default: () => {
					return [1, 2, 3, 4, 5, 6, 7, 8, 9]
				}
			},
			//特殊键盘码 .或者X  默空
			otherNum: {
				type: String,
				default: ''
			},
			//是否显示完成按钮
			confirmBtn:{
				type: Boolean,
				default: false
			},
			//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
			tabBar: {
				type: Boolean,
				default: false
			},
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				bodMove: '',
				password: '', //要返回的结果
				iptNum: [], //输入的内容
				KeyboarHid: false, //键盘影藏和显示
			}
		},
		watch: {
			iptNum(newVal, oldVal) {
				this.$emit('input', newVal.join(''))
			},
			value(newVal, oldVal) {
				this.iptNum = newVal.split('')
			}
		},
		created() {

		},
		methods: {
			open() {
				this.KeyboarHid = true;
				if (this.tabBar) {
					uni.hideTabBar()
				}
				this.$nextTick(() => {
					setTimeout(() => {
						this.bodMove = 'moveShow'
					}, 30)
				})
			},
			close() {
				if (this.tabBar) {
					uni.showTabBar()
				}
				this.bodMove = '';
				this.$nextTick(() => {
					setTimeout(() => {
						this.KeyboarHid = false
					}, 300)
				})
			},
			// 密码框
			clickBoard(num) {
				if (num == '') return;
				let iptNum = this.iptNum.filter(item => item != '');
				//判断是否限制长度
				if (this.psdLength != '') {
					if (iptNum.length >= this.psdLength) {
						return
					};
					this.iptNum.push(num);
				} else {
					this.iptNum.push(num);
				}
			},
			//完成
			complete(){
				this.$emit('confirm', this.iptNum.join(''))
			},
			//重置 清空
			reset() {
				this.iptNum = [];
			},
			//删除
			deleteKeyboar() {
				this.iptNum.pop();
			}
		}
	}
</script>

<style scoped>
	.bodMove {
		transition: all .3s
	}

	.bottomMove {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.moveShow {
		transform: translateY(0)
	}

	.KeyboarBody {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}

	.KeyboarBx {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		background-color: rgba(3, 3, 3, 0.1);
		padding: 10rpx 6rpx 0rpx 6rpx;
		margin-left: -12rpx;
	}


	.keyboar {
		width: 20%;
		flex-grow: 1;
		padding: 3%;
		font-size: 40rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 12rpx;
		margin-bottom: 10rpx;
	}

	.dian {
		margin-top: -10rpx;
	}

	.keyboarBtn {
		background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
		color: #fff;
	}

	.hover {
		background: #ebedf0;
	}


	.bot {
		bottom: 0;
	}

	.empty {
		background-color: #EEEEEE;
	}

	.dowmImgBx {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: relative;
	}

	.complete {
		position: absolute;
		right: 0rpx;
		bottom: 5rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
		padding-left: 20rpx;
	}

	.dowmImg {
		width: 35rpx;
		height: 35rpx;
		margin-bottom: 10rpx;
		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}

	.keyboarDel {
		width: 50rpx;
		height: 36rpx;
		margin-bottom: 10rpx;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
		margin-top: 11rpx;

	}

	.keyboarflex {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

number-keyboard2.vue

<template>
	<view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid">
		<view class="KeyboarBx">
			<view v-for="(num , index) in keyboardNum " :key='index' @click="clickBoard(num)" hover-class="hover"
				:hover-stay-time='20' class="keyboar">
				{{num}}
			</view>
			<view @click="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20'
				hover-class="hover">{{otherNum}}</view>
			<view @click="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view>
			<view @click="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
				<view class="keyboarDel"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//限制输入框的长度 空值不限制
			psdLength: {
				type: [Number, String],
				default: ''
			},
			//键盘码
			keyboardNum: {
				type: [Array, Object],
				default: () => {
					return [1, 2, 3, 4, 5, 6, 7, 8, 9]
				}
			},
			//特殊键盘码 .或者X  默空
			otherNum: {
				type: String,
				default: ''
			},
			//是否显示完成按钮
			confirmBtn:{
				type: Boolean,
				default: false
			},
			//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
			tabBar: {
				type: Boolean,
				default: false
			},
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				bodMove: '',
				password: '', //要返回的结果
				iptNum: [], //输入的内容
				KeyboarHid: false, //键盘影藏和显示
			}
		},
		watch: {
			iptNum(newVal, oldVal) {
				this.$emit('input', newVal.join(''))
			},
			value(newVal, oldVal) {
				this.iptNum = newVal.split('')
			}
		},
		created() {

		},
		methods: {
			open() {
				this.KeyboarHid = true;
				if (this.tabBar) {
					uni.hideTabBar()
				}
				this.$nextTick(() => {
					setTimeout(() => {
						this.bodMove = 'moveShow'
					}, 30)
				})
			},
			close() {
				if (this.tabBar) {
					uni.showTabBar()
				}
				this.bodMove = '';
				this.$nextTick(() => {
					setTimeout(() => {
						this.KeyboarHid = false
					}, 300)
				})
			},
			// 密码框
			clickBoard(num) {
				if (num == '') return;
				let iptNum = this.iptNum.filter(item => item != '');
				//判断是否限制长度
				if (this.psdLength != '') {
					if (iptNum.length >= this.psdLength) {
						return
					};
					this.iptNum.push(num);
				} else {
					this.iptNum.push(num);
				}
			},
			//完成
			complete(){
				this.$emit('confirm', this.iptNum.join(''))
			},
			//重置 清空
			reset() {
				this.iptNum = [];
			},
			//删除
			deleteKeyboar() {
				this.iptNum.pop();
			}
		}
	}
</script>

<style scoped>
	.bodMove {
		transition: all .3s
	}

	.bottomMove {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.moveShow {
		transform: translateY(0)
	}

	.KeyboarBody {
		background-color: #FFFFFF;
	}

	.KeyboarBx {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		background-color: rgba(3, 3, 3, 0.1);
		padding: 10rpx 6rpx 0rpx 6rpx;
		margin-left: -12rpx;
	}


	.keyboar {
		width: 20%;
		flex-grow: 1;
		padding: 3%;
		font-size: 40rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 12rpx;
		margin-bottom: 10rpx;
	}

	.dian {
		margin-top: -10rpx;
	}

	.keyboarBtn {
		background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
		color: #fff;
	}

	.hover {
		background: #ebedf0;
	}


	.bot {
		bottom: 0;
	}

	.empty {
		background-color: #EEEEEE;
	}

	.dowmImgBx {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: relative;
	}

	.complete {
		position: absolute;
		right: 0rpx;
		bottom: 5rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
		padding-left: 20rpx;
	}

	.dowmImg {
		width: 35rpx;
		height: 35rpx;
		margin-bottom: 10rpx;
		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}

	.keyboarDel {
		width: 50rpx;
		height: 36rpx;
		margin-bottom: 10rpx;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
		margin-top: 11rpx;

	}

	.keyboarflex {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

editPayPassword.vue

<template>
  <view class="editPayPassword">
    <view class="topApp">
        <image class="return" src="https://res.qyjpay.cn/static/res/jiangcunyinxiang-return.png" @click="leftClick"/>
      <view class="title">{{!flag ? '身份认证' : '设置支付密码'}}</view>
    </view>
    <view class="content">{{!flag ? '输入支付密码' : '再次输入支付密码'}}</view>
    <view class="item" @tap='KeyboarOpen' v-if="!flag">
      <password-input :numLng='password'></password-input>
    </view>
    <view class="item" @tap='KeyboarOpen2' v-else>
      <password-input2 :numLng='changePassword'></password-input2>
    </view>
    <view class="errMsg" v-if="errMsg">{{errMsg}}</view>
    <number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6' v-if="!flag"></number-keyboard>
    <number-keyboard2 tabBar ref='KeyboarHid' @input='onInput2' psdLength='6' v-else></number-keyboard2>
  </view>
</template>

<script>
import numberKeyboard from '@/components/number-keyboard/number-keyboard.vue'
import numberKeyboard2 from '@/components/number-keyboard/number-keyboard.vue'
import passwordInput from '@/components/password-input/password-input.vue'
import passwordInput2 from '@/components/password-input/password-input.vue'
export default {
  data () {
    return {
        flag: false,
        password: "",
        changePassword: '',
        errMsg: '',      
    }
  },
  components: {
    numberKeyboard,
    numberKeyboard2,
    passwordInput,
    passwordInput2
  },
  watch:{
    errMsg(newVal,oldVal){
      if(newVal){
        setTimeout(()=>{
          this.errMsg = ''
        },2000)
      }
    }
  },
  onLoad(option) {
    console.log('接收到的数据',option);
    //因为此时实例没有挂载完成，需要延迟操作
    setTimeout(() => {
      this.$refs.KeyboarHid.open()
    }, 50)
  },
  methods:{
    leftClick(){
        uni.navigateBack({})
    },
    //打开键盘
    KeyboarOpen(e) {
      this.$refs.KeyboarHid.open();
    },
    KeyboarOpen2(e) {
      this.$refs.KeyboarHid.open();
    },
    //输入的值
    onInput(val) {
        this.password = val;
        if(this.password.length == 6){
            this.flag = true
            setTimeout(()=>{
                this.KeyboarOpen2()
            },100)
        }
    },
    async onInput2(val){
        this.changePassword = val;
        if(this.changePassword.length == 6){
            console.log('第一次输入的密码是',this.password);
            console.log('第二次输入的密码是',this.changePassword);
            if(this.password != this.changePassword){
                this.errMsg = '两次输入密码不一致'
            }else{
                this.errMsg = ''
                try{
                  //调接口处理
                }catch(err){
                  // uni.showToast({
                  //   title: err.msg,
                  //   icon: 'none'
                  // })
                  this.errMsg = err.msg
                  return
                }
            }
        }
    }
  }
}
</script>

<style lang='scss' scoped>
.editPayPassword{
    min-height: 100vh;
    background-color: #fff;
    .topApp{
      display: flex;
      align-items: center;
      // justify-content: flex-start;
      background-color: #fff;
      padding: 60rpx 0 30rpx 26rpx;
      // #ifdef APP-PLUS
      padding: 110rpx 0 30rpx 26rpx;
      // #endif
      box-sizing: border-box;
      width: 100%;
      .return{
          width: 36rpx;
          height: 36rpx;  
          margin-right: 20rpx;
      }
      .title{
          position: absolute;
          // top: 100rpx;
          left: 50%;
          transform: translate(-50%,0);
          font-weight: 500;
          font-size: 32rpx;
          color: #111111;
      }
    }
    .content{
        margin: 140rpx 0 40rpx 0;
        font-weight: 500;
        font-size: 46rpx;
        color: #111111;
        text-align: center;
    }
    .errMsg{
        font-weight: normal;
        font-size: 22rpx;
        color: #F72323;
        margin-top: 20rpx;
        text-align: center;
    }
}
.main {
  padding: 0rpx 40rpx;
}
.ipt {
  border-bottom: 1rpx solid #CCCCCC;
}
.item {
  padding: 10rpx 87rpx;
}
.title {
  margin: 30rpx 0;
}
</style>

Rio_Gaven
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp - [微信小程序平台] 实现输入支付密码键盘弹框，uniapp小程序端底部弹起密码输入键盘组件效果，类似电商平台支付密码、弹出支付密码输入框、交易密码（详细示例源码，一键复制开箱即用！）
高级前端工程师
12-07 6089
uniapp，微信小程序，自定义数字键盘，输入支付密码的键盘组件，uniapp小程序如何实现从底部弹出输入支付密码自定义键盘功能，uniapp小程序密码支付键盘组件插件，自定义数字键盘输入页面，怎么封装底部弹窗自定义数字键盘用于输入支付密码，uniapp小程序仿类似电商支付密码输入模态框，uniapp小程序自定义支付键盘，实现1-9数字键盘，vue,uni-app密码支付键盘，模仿微信支付密码弹窗，实现数字密码键盘，输入支付密码调起键盘功能，uniapp实现密码支付功能组件示例代码，实现6位数字密码键盘页面
uniapp源码WIFI密码连接破解小程序源码.zip
07-07
同时，由于是源码，这表明它适合开发者进行二次开发或学习uniapp和小程序开发技术。 【压缩包子文件的文件结构】 尽管未提供具体的压缩包内容列表，但通常这类压缩包会包含以下部分： 1. `uniapp`项目文件夹：包含...
uniapp使用uni-popup组件实现密码支付功能
m0_62217360的博客
11-28 893
uniapp使用uni-popup组件实现密码支付功能
vue实现密码的表单验证~（旧密码，新密码，重复新密码）
热门推荐
weixin_33672400的博客
05-09 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
uniapp余额银行卡支付密码界面实现(直接复制)
最新发布
Rio_Gaven的博客
05-31 641
4.写一个弹出层，按钮demo。
uniapp密码输入框
Smile_ping的博客
05-26 4642
uniapp自定义密码输入框 可用于短信验证码输入框、密码数字框… 文章目录uniapp自定义密码输入框效果图定义组件templatejsscss使用templatejs 效果图 定义组件 提示： 这里把输入框定义为组件，其他可根据需求调整 template <template> <view> <view class="password-input-warp fcc"> <view class="password-input_item fcc"
uni-app输入密码
杨葱儿
11-18 744
<template> <view> <view class="u-padding-40"> <u-button type="success" @click="showPop(true)"> <u-icon name="red-packet"></u-icon> <text class="u-padding-l...
uniapp APP端支付宝登录+人脸认证
05-16
uniapp提供了丰富的插件市场，其中包含了各种第三方服务的SDK集成，如支付宝SDK。通过引入这些插件，开发者可以在uniapp项目中调用原生的API，实现与支付宝的交互。 1. **uniapp与支付宝登录的集成**： - **配置...
仿微信支付密码输入框
12-21
"仿微信支付密码输入框"的实现主要涉及到自定义View的知识，特别是EditText的扩展和定制。接下来，我们将深入探讨这个话题。 首先，创建一个自定义的EditText子类是实现这个功能的关键步骤。这个自定义View需要覆盖...
uniapp 开发一个密码管理app
02-15
uniapp 开发一个密码管理app
仿支付密码输入框
10-28
在支付宝、微信等App应用中的支付页面里，有一些样式不同而功能相同的支付密码页面。 本代码模仿该功能，通过自定义输入框样式，实现支付密码输入页面。
仿支付宝密码输入框
06-01
仿支付宝密码输入框
手机号码，密码正则验证
09-04
神奇的正则表达式可以帮助我们搞定所需的格式验证，常用的有手机号码，密码等，另附上做项目经常用到的一些正则，记录一下
uniapp 自定义多框输入验证码/支付密码
ke_sin的博客
05-23 2822
样式很简单，大家主要看功能哈哈哈 效果图 需求 手动输入验证码，监听数据变化，输入后自动跳转页面 代码实现 <template> <view class="wrap"> <view class="wrap-header"> <view class="wrap-header-item">请输入验证码</view> </view> <view> <view class="input-wrap"
uni-app自定义交易密码弹框
weixin_47551643的博客
04-12 728
自定义交易密码弹框
uniapp自定义输入框，实现验证码输入框、密码输入框、兼容微信小程序
m0_67584973的博客
04-10 7140
在移动端或者小程序项目中，验证码输入框、密码输入框也是很常见的，uniapp实现验证码输入框、兼容微信小程序。
uniapp自定义密码输入键盘-数字键盘效果demoUI方法一（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-09 2050
uniapp自定义密码输入键盘-数字键盘效果demoUI方法一
uni-app 实现6位数字密码键盘页面
weixin_42028153的博客
04-21 893
【代码】uni-app 实现6位数字密码键盘页面。
uniapp 登入记住密码 怎么实现
10-21
在uniapp中实现登入记住密码的功能，可以通过以下步骤实现： 1. 在登入页面添加一个“记住密码”的选项，使用uniapp提供的checkbox组件实现。 2. 在用户勾选“记住密码”选项时，将用户名和密码保存到本地存储中，可以使用uniapp提供的uni.setStorageSync方法实现。 3. 在用户下次打开应用时，检查本地存储中是否有保存的用户名和密码，如果有，则自动填充到登入表单中。 4. 在用户点击登入按钮时，判断是否勾选了“记住密码”选项，如果勾选了，则将用户名和密码保存到本地存储中，否则清空本地存储中的用户名和密码。 下面是一个简单的示例代码： ``` <template> <view> <input v-model="username" placeholder="用户名"></input> <input v-model="password" placeholder="密码" type="password"></input> <checkbox v-model="remember">记住密码</checkbox> <button @click="login">登入</button> </view> </template> <script> export default { data() { return { username: '', password: '', remember: false } }, onLoad() { // 检查本地存储中是否有保存的用户名和密码 const username = uni.getStorageSync('username') const password = uni.getStorageSync('password') if (username && password) { this.username = username this.password = password this.remember = true } }, methods: { login() { // 登入操作 // ... if (this.remember) { // 如果勾选了“记住密码”选项，则保存用户名和密码到本地存储中 uni.setStorageSync('username', this.username) uni.setStorageSync('password', this.password) } else { // 否则清空本地存储中的用户名和密码 uni.removeStorageSync('username') uni.removeStorageSync('password') } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值