欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序车牌号码模拟键盘输入

程序员文章站 2022-03-18 16:02:56
微信小程序车牌号码模拟键盘输入练习, 未经允许,禁止转载,抄袭,如需借鉴参考等,请附上该文章连接。 相关资料参考:https://blog.csdn.net/littlerboss/article/details/79877918; 先来一波预览图。 预览图片一: 预览图二: 预览图三: 预览图四: ......

 

 

微信小程序车牌号码模拟键盘输入练习,

未经允许,禁止转载,抄袭,如需借鉴参考等,请附上该文章连接。

相关资料参考:https://blog.csdn.net/littlerboss/article/details/79877918;

 

先来一波预览图。

预览图片一:

微信小程序车牌号码模拟键盘输入

 

 

预览图二:

微信小程序车牌号码模拟键盘输入

 

预览图三:

微信小程序车牌号码模拟键盘输入

 

 预览图四:

微信小程序车牌号码模拟键盘输入

 

 

预览图五:

微信小程序车牌号码模拟键盘输入

 

 大概的效果就和原来图差不多。

 

 

思路解析:车牌号码由31位汉字,26位字母,10位数字组成的,开头第一位由省份简称的汉字,第二位字母根据省份下的城市或地区区分,最后的五位或者六位,是有字母和数字组成的,共有七位的车牌号码和八位的车牌号码,(注:其中的八位数的车牌号码为能源车的车牌号码。)

 

大概的逻辑思维,不包含代码获取值什么的或者验证其他的说明,详细看代码片段。

第一,原型的设计思路:先设计好模拟键盘的大概架构,样式。这里的分为三个不同的模拟键盘结构合在一起,分部为汉字,字母,数字,其样式统一;

第二:数据的交互思路:对需要的数据绑定或者修改填充等,如何获取,通过什么方式获取,再怎么反馈出来,需要搭建好数据的来回交互传递的大概模型;

第三,交互的体验思路:触发或者在输入框点击输入的时候,启动模拟键盘,先用汉字选择,其次是字母,最后由字母和数字混合,对三个架构先进行需求排序的理清;

第四,功能的操作思路:模拟键盘的功能性按钮,比如数字与字母之间的的切换,删除最后一位数据,清空全部数据和状态,关闭的结束等操作等体验。

第五:输入判断的思路:判断车牌号码输入的位数,第一位和第二位分部是什么,字母与数字的切换的判断。删除到第几位需要在什么样的状态输入下等。

 

大概就这这些样子了,能写怎么多字,感觉都超纲了,如果有错的地方,还望留言指正。

 

最后是源码:

 

wxml:

 1 <view class='page wrapper'>
 2   <view class="weui-cell__bd">
 3     <view bindtap='licenseplatenumber' class='licenseplatenumber'>
 4       <input value='{{licenseplatenumber}}' disabled='true' placeholder='请选择'></input>
 5     
 6     </view>
 7   </view>
 8 
 9   <view>
10 
11     <view class='licenseplateshow' hidden='{{licenseplateshowhidden}}'>
12       <!-- 遮罩层 -->
13       <view class='licenseplate_bg' bindtap='licenseplate_close'>
14       </view>
15 
16       <!-- 省份 -->
17       <view class='licenseplate_provinces_box' hidden='{{licenseplate_provinces_box}}'>
18         <view class='licenseplate_provincestist' wx:for='{{licenseplate_provinces}}' bindtap='licenseplate_provinces' data-licenseplateprovinces='{{item}}' wx:key='index'>{{item}}</view>
19         <view class='licenseplate_but' bindtap='licenseplate_close'>关闭</view>
20       </view>
21 
22       <!-- 字母 -->
23       <view class='licenseplate_letter_box' hidden='{{licenseplate_letter_box}}'>
24         <view class='licenseplate_lettertist' wx:for='{{licenseplate_letter}}' bindtap='licenseplate_letter' data-licenseplateprovinces='{{item}}' wx:key='index'>{{item}}</view>
25         <view class='licenseplate_lettertist_but'>
26           <view class='licenseplate_but' bindtap='licenseplate_switchdigital'>数字</view>
27           <view class='licenseplate_but' bindtap='licenseplate_delete'>删除</view>
28           <view class='licenseplate_but' bindtap='licenseplate_empty'>清空</view>
29           <view class='licenseplate_but' bindtap='licenseplate_close'>关闭</view>
30         </view>
31       </view>
32 
33        <!-- 数字 -->
34       <view class='licenseplate_digital_box' hidden='{{licenseplate_digital_box}}'>
35         <view class='licenseplate_digitaltist' wx:for='{{licenseplate_digital}}' bindtap='licenseplate_digital' data-licenseplateprovinces='{{item}}' wx:key='index'>{{item}}</view>
36         <view class='licenseplate_digital_but'>
37           <view class='licenseplate_but' bindtap='licenseplate_switchletter'>字母</view>
38           <view class='licenseplate_but' bindtap='licenseplate_delete'>删除</view>
39           <view class='licenseplate_but' bindtap='licenseplate_empty'>清空</view>
40           <view class='licenseplate_but' bindtap='licenseplate_close'>关闭</view>
41         </view>
42       </view>
43     </view>
44     
45   </view>
46 </view>

 

wxss:

  1 @import "weui.wxss";
  2 
  3 page{
  4   min-height:100%; 
  5 }
  6 
  7 .wrapper{
  8   width: 750rpx; 
  9   overflow:hidden;
 10 }
 11 
 12 .licenseplateshow{
 13   width: 750rpx; 
 14   min-height: 100%;
 15   position: absolute;
 16   bottom: 0;
 17 }
 18 
 19 .licenseplate_bg{
 20   min-height: 100%;
 21   width: 750rpx;
 22   position: absolute;
 23   z-index: 40;
 24   overflow: hidden;
 25 }
 26 
 27 .licenseplate_provinces_box{
 28   width: 750rpx; 
 29   background-color: #d0d4da;
 30   margin: 0 auto;
 31   position: absolute;
 32   bottom: 0;
 33   display: flex;
 34   display: -webkit-flex;
 35   flex-wrap: wrap;
 36   justify-content: flex-start;
 37   /* border-top: 1px solid #abb2bd; */
 38   z-index: 55;
 39 }
 40 
 41 .licenseplate_provincestist{
 42   flex:15%;
 43   height: 100rpx;
 44   line-height: 100rpx;
 45   margin: 0 auto;
 46   text-align: center;
 47   background-color:#ffffff; 
 48   border-top: 1px solid #abb2bd;
 49   border-left: 1px solid #abb2bd;
 50 }
 51 
 52 .licenseplate_provincestist:nth-child(6n){
 53   border-right: 1px solid #abb2bd;
 54 }
 55 
 56 .licenseplate_letter_box{
 57   width: 750rpx; 
 58   background-color: #d0d4da;
 59   margin: 0 auto;
 60   position: absolute;
 61   bottom: 0;
 62   display: flex;
 63   display: -webkit-flex;
 64   flex-wrap: wrap;
 65   justify-content: flex-start;
 66   /* border-top: 1px solid #abb2bd; */
 67   z-index: 55;
 68 }
 69 
 70 .licenseplate_lettertist{
 71   flex:15%;
 72   height: 100rpx;
 73   line-height: 100rpx;
 74   margin: 0 auto;
 75   text-align: center;
 76   background-color:#ffffff; 
 77   border-top: 1px solid #abb2bd;
 78   border-left: 1px solid #abb2bd;
 79 }
 80 
 81 .licenseplate_lettertist:nth-child(6n){
 82   border-right: 1px solid #abb2bd;
 83 } 
 84 
 85 .licenseplate_lettertist:nth-child(26){
 86   border-right: 1px solid #abb2bd;
 87 }
 88 
 89 .licenseplate_lettertist_but{
 90   width: 750rpx;
 91   display: flex;
 92   display: -webkit-flex;
 93   flex-wrap: wrap;
 94   justify-content: flex-start;
 95 }
 96 
 97 .licenseplate_digital_box{
 98   width: 750rpx; 
 99   background-color: #d0d4da;
100   margin: 0 auto;
101   position: absolute;
102   bottom: 0;
103   display: flex;
104   display: -webkit-flex;
105   flex-wrap: wrap;
106   justify-content: flex-start;
107   /* border-top: 1px solid #abb2bd; */
108   z-index: 55;
109 }
110 
111 .licenseplate_digitaltist{
112   flex:25%;
113   height: 125rpx;
114   line-height: 125rpx;
115   margin: 0 auto;
116   text-align: center;
117   background-color:#ffffff; 
118   border-top: 1px solid #abb2bd;
119   border-left: 1px solid #abb2bd;
120 }
121 
122 .licenseplate_digital_but{
123   width: 750rpx;
124   display: flex;
125   display: -webkit-flex;
126   flex-wrap: wrap;
127   justify-content: flex-start;
128 }
129 
130 .licenseplate_but{
131   flex: 1;
132   height: 100rpx;
133   line-height: 100rpx;
134   text-align: center;
135   color: #ffffff;
136   background-color:#ff6600; 
137   border-top: 1px solid #abb2bd;
138   border-left: 1px solid #abb2bd;
139 }
140 
141 .licenseplate_but:last-child{
142   border-right: 1px solid #abb2bd;
143 }
144 
145 .licenseplatenumber{
146   width: 750rpx;
147   height: 200rpx;
148   border-bottom: 1rpx solid #abb2bd
149 }

 

js:

  1 page({
  2 
  3   data: {
  4     licenseplateshowhidden:true,
  5     licenseplate_provinces_box:true,
  6     licenseplate_letter_box: true, 
  7     licenseplate_digital_box: true,
  8     licenseplate_provinces: [
  9     "京", "沪", "浙", "苏", "粤", "鲁", 
 10     "晋", "冀", "豫", "川", "渝", "辽", 
 11     "吉", "黑", "皖", "鄂", "津", "贵", 
 12     "云", "桂", "琼", "青", "新", "藏",
 13     "蒙", "宁", "甘", "陕", "闽", "赣", 
 14     "湘"
 15     ],
 16     licenseplate_letter: [
 17       "a", "b", "c", "d", "e", "f",
 18       "g", "h", "l", "j", "k", "l",
 19       "m", "n", "o", "p", "q", "r",
 20       "s", "t", "u", "v", "w", "x",
 21       "y", "z"
 22     ],
 23     licenseplate_digital: [
 24       "1", "2", "3", 
 25       "4", "5", "6",
 26       "7", "8", "9", 
 27       "0"
 28     ],
 29     licenseplatenumber:'',
 30   },
 31 
 32   // 显示模拟键盘
 33   licenseplatenumber:function(){
 34     var that = this;
 35     var licenseplatenumber = this.data.licenseplatenumber;
 36     var licenseplatenumberlen = licenseplatenumber.length;
 37     console.log(licenseplatenumber, licenseplatenumberlen)
 38     if (licenseplatenumberlen == 0){
 39       this.setdata({
 40         licenseplateshowhidden: false,
 41         licenseplate_provinces_box: false,
 42       })
 43     } else if (licenseplatenumberlen == 1){
 44       this.setdata({
 45         licenseplateshowhidden: false,
 46         licenseplate_letter_box: false,
 47       })
 48     }else{
 49       this.setdata({
 50         licenseplateshowhidden: false,
 51         licenseplate_digital_box: false,
 52       })
 53     }
 54    
 55   },
 56 
 57   // 切换成字母
 58   licenseplate_switchletter:function(){
 59     this.setdata({
 60       licenseplate_provinces_box:true,
 61       licenseplate_letter_box:false,
 62       licenseplate_digital_box: true,
 63     })
 64   },
 65 
 66   // 切换成数字
 67   licenseplate_switchdigital: function () {
 68     var licenseplatenumber = this.data.licenseplatenumber;
 69     var licenseplatenumberlen = licenseplatenumber.length;
 70     if (licenseplatenumberlen == 1){
 71       wx.showtoast({
 72         title: '车牌号码第二位必须是字母',
 73         icon: 'none',
 74         duration: 1500,
 75       })
 76     }else{
 77       this.setdata({
 78         licenseplate_provinces_box: true,
 79         licenseplate_letter_box: true,
 80         licenseplate_digital_box: false,
 81       })
 82     }
 83   },
 84 
 85 
 86   // 删除
 87   licenseplate_delete: function (e) {
 88     var licenseplatenumber = this.data.licenseplatenumber;
 89     var licenseplatenumberlen = licenseplatenumber.length;
 90     var licenseplatenumberdelete = licenseplatenumber.split('');
 91     var newlicenseplatenumber = licenseplatenumberdelete.join('').slice(0,-1)
 92     if (licenseplatenumberdelete.slice(0,-1).length == 1){
 93       this.setdata({
 94         licenseplate_provinces_box: true,
 95         licenseplate_letter_box: false,
 96         licenseplate_digital_box: true,
 97       })
 98     } else if (licenseplatenumberlen == 0 || licenseplatenumber == '' || licenseplatenumberdelete.slice(0, -1).length == 0){
 99       this.setdata({
100         licenseplate_provinces_box: false,
101         licenseplate_letter_box: true,
102         licenseplate_digital_box: true,
103       })
104     }
105       this.setdata({
106         licenseplatenumber: newlicenseplatenumber
107       })
108   },
109 
110   // 清空
111   licenseplate_empty: function (e) {
112     this.setdata({
113       licenseplatenumber:'',
114       licenseplate_provinces_box: false,
115       licenseplate_letter_box: true,
116       licenseplate_digital_box: true,
117     })
118   },
119 
120   // 关闭模拟键盘
121   licenseplate_close:function(){
122     this.setdata({
123       licenseplateshowhidden: true
124     })
125   },
126 
127   // 点击获取省份
128   licenseplate_provinces: function (e) {
129     this.setdata({
130       licenseplatenumber: e.target.dataset.licenseplateprovinces,
131       licenseplate_letter_box: false,
132       licenseplate_digital_box: true,
133     })
134     console.log(e.target.dataset.licenseplateprovinces)
135   },
136 
137   // 点击获取字母
138   licenseplate_letter: function (e) {
139     var licenseplatenumber = this.data.licenseplatenumber;
140     var licenseplatenumberlen = licenseplatenumber.length;
141     if (licenseplatenumberlen != 8) {
142       this.setdata({
143         licenseplatenumber: licenseplatenumber + e.target.dataset.licenseplateprovinces
144       })
145       console.log(e.target.dataset.licenseplateprovinces)
146     } else {
147       wx.showtoast({
148         title: '车牌号码最多不能超过8位',
149         icon: 'none',
150         duration: 1500,
151       })
152     }
153   },
154 
155   // 点击获取数字
156   licenseplate_digital: function (e) {
157     var licenseplatenumber = this.data.licenseplatenumber;
158     var licenseplatenumberlen = licenseplatenumber.length;
159     if (licenseplatenumberlen != 8){
160       this.setdata({
161         licenseplatenumber: licenseplatenumber + e.target.dataset.licenseplateprovinces
162       })
163       console.log(e.target.dataset.licenseplateprovinces)
164     }else{
165       wx.showtoast({
166         title: '车牌号码最多不能超过8位',
167         icon:'none',
168         duration:1500,
169       })
170     }
171   },
172 
173 
174 })

 

噢了。