因为按照产品的要求，不要图案。所以就没做了。就是按键的，后期有时间把图案也做出来

view class="wx_unlocking"  view class='password-box'    view class='password-n'{{hint}}/view    view class='password-i'      block wx:for="{{Length}}" wx:key="item"        input class='i-i' value="{{password.length=index+1?password[index]:''}}" disabled password='{{ispassword}}' /input      /block    /view    !--keyword  --    view class='keyword'      view class='k-i' data-id="1" bindtap='keyword'1/view      view class='k-i' data-id="2" bindtap='keyword'2/view      view class='k-i' data-id="3" bindtap='keyword'3/view      view class='k-i' data-id="4" bindtap='keyword'4/view      view class='k-i' data-id="5" bindtap='keyword'5/view      view class='k-i' data-id="6" bindtap='keyword'6/view      view class='k-i' data-id="7" bindtap='keyword'7/view      view class='k-i' data-id="8" bindtap='keyword'8/view      view class='k-i' data-id="9" bindtap='keyword'9/view      view class='key-cancel' bindtap='cancel'取消/view      view class='k-i' data-id="0" bindtap='keyword'0/view      view class='key-delete' bindtap='delete'删除/view    /view  /view/view

太忙了

.wx_unlocking{  background-color: #f0f0f0;  position: absolute;  width: 100%;  height: 100%;  top: 0;  left: 0;}.unlocking_wang{  color: #6699ff;  text-align: right;  padding: 30rpx;  font-size: 26rpx;}.password-box{  margin-top: 30%;}/*  */.password-n{  text-align: center;  font-size: 28rpx;  font-weight: 500;}.password-i{  display: flex;  align-items: center;  justify-content: center;  margin-top:20rpx;}.i-i{  width: 80rpx;  height: 80rpx;  line-height: 80rpx;  border-bottom: solid 5rpx #000;  text-align: center;  margin: 0 20rpx;}/*keyword  */.keyword{  display: flex;  width: 80%;  margin: auto;  justify-content: center;  flex-flow:row wrap;  margin-top: 50rpx;  align-items: center;}.k-i{  height: 100rpx;  width: 100rpx;  background-color: #fff;  line-height: 100rpx;  text-align: center;  border-radius: 50%;  margin:20rpx 40rpx;}.key-cancel,.key-delete{  font-size:32rpx;  width:100rpx;  height:100rpx;  line-height: 100rpx;}.key-cancel{  margin-right: 26rpx;  text-align: left;}.key-delete{  margin-left: 26rpx;  text-align: right;}

Page({  data: {    password: [],    password2: [],    hint:'设置解锁密码',    Length:4,    ispassword:false//是否显示星号  },  onLoad: function () {  },  keyword:function(e){    let that = this;    let id = e.currentTarget.dataset.id    let password = that.data.password    let password2 = that.data.password2    password.push(id);    if (password.length == this.data.Length) {      if (password.join("") == password2.join("")){        wx.showToast({          title: '演示密码',          icon: 'none',          duration: 1000,        })        setTimeout(function () {          wx.switchTab({            url: `../wx_shop/wx_shop`          })        }, 1000);      } else if (password.join("") != password2.join("") && password2.join("") != ''){        that.unlike()      }else{        password2 = password        that.again()      }    }    that.setData({      password: password,      password2: password2    })      },  again:function(e){    let that = this    setTimeout(function () {      that.data.password = []      console.log('确认输入密码')      that.setData({        password: that.data.password,        hint:'确认输入密码'      })    }, 500);  },  unlike: function (e) {    let that = this    setTimeout(function () {      that.data.password = []      that.data.password2 = []      console.log('两次输入的密码不正确')      that.setData({        password: that.data.password,        password2: that.data.password2,        hint: '两次输入的密码不正确'      })    }, 500);  },  cancel:function(e){    let that = this;    let password = that.data.password    password = []    that.setData({      password: password    })  },  delete:function(e){    let that = this;    let password = that.data.password    password.pop()    that.setData({      password: password    })  }})

做的肯定不完美，没办法，菜啊！百度的都是画图的。。。

转载请注明出处！