微信小程序车牌号码模拟键盘输入练习，
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
相关资料参考：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 })
噢了。
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论