微信小程式車牌號碼模擬鍵盤輸入
摘要：
微信小程式車牌號碼模擬鍵盤輸入練習，
未經允許，禁止轉載，抄襲，如需借鑑參考等，請附上該文章連線。
相關資料參考：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{
4min-height:100%;
5 }
6
7 .wrapper{
8width: 750rpx;
9overflow:hidden;
10 }
11
12 .licensePlateShow{
13width: 750rpx;
14min-height: 100%;
15position: absolute;
16bottom: 0;
17 }
18
19 .licensePlate_Bg{
20min-height: 100%;
21width: 750rpx;
22position: absolute;
23z-index: 40;
24overflow: hidden;
25 }
26
27 .licensePlate_provinces_Box{
28width: 750rpx;
29background-color: #d0d4da;
30margin: 0 auto;
31position: absolute;
32bottom: 0;
33display: flex;
34display: -webkit-flex;
35flex-wrap: wrap;
36justify-content: flex-start;
37/* border-top: 1px solid #abb2bd; */
38z-index: 55;
39 }
40
41 .licensePlate_provincesTist{
42flex:15%;
43height: 100rpx;
44line-height: 100rpx;
45margin: 0 auto;
46text-align: center;
47background-color:#ffffff;
48border-top: 1px solid #abb2bd;
49border-left: 1px solid #abb2bd;
50 }
51
52 .licensePlate_provincesTist:nth-child(6n){
53border-right: 1px solid #abb2bd;
54 }
55
56 .licensePlate_letter_Box{
57width: 750rpx;
58background-color: #d0d4da;
59margin: 0 auto;
60position: absolute;
61bottom: 0;
62display: flex;
63display: -webkit-flex;
64flex-wrap: wrap;
65justify-content: flex-start;
66/* border-top: 1px solid #abb2bd; */
67z-index: 55;
68 }
69
70 .licensePlate_letterTist{
71flex:15%;
72height: 100rpx;
73line-height: 100rpx;
74margin: 0 auto;
75text-align: center;
76background-color:#ffffff;
77border-top: 1px solid #abb2bd;
78border-left: 1px solid #abb2bd;
79 }
80
81 .licensePlate_letterTist:nth-child(6n){
82border-right: 1px solid #abb2bd;
83 }
84
85 .licensePlate_letterTist:nth-child(26){
86border-right: 1px solid #abb2bd;
87 }
88
89 .licensePlate_letterTist_but{
90width: 750rpx;
91display: flex;
92display: -webkit-flex;
93flex-wrap: wrap;
94justify-content: flex-start;
95 }
96
97 .licensePlate_digital_Box{
98width: 750rpx;
99background-color: #d0d4da;
100margin: 0 auto;
101position: absolute;
102bottom: 0;
103display: flex;
104display: -webkit-flex;
105flex-wrap: wrap;
106justify-content: flex-start;
107/* border-top: 1px solid #abb2bd; */
108z-index: 55;
109 }
110
111 .licensePlate_digitalTist{
112flex:25%;
113height: 125rpx;
114line-height: 125rpx;
115margin: 0 auto;
116text-align: center;
117background-color:#ffffff;
118border-top: 1px solid #abb2bd;
119border-left: 1px solid #abb2bd;
120 }
121
122 .licensePlate_digital_but{
123width: 750rpx;
124display: flex;
125display: -webkit-flex;
126flex-wrap: wrap;
127justify-content: flex-start;
128 }
129
130 .licensePlate_but{
131flex: 1;
132height: 100rpx;
133line-height: 100rpx;
134text-align: center;
135color: #ffffff;
136background-color:#ff6600;
137border-top: 1px solid #abb2bd;
138border-left: 1px solid #abb2bd;
139 }
140
141 .licensePlate_but:last-child{
142border-right: 1px solid #abb2bd;
143 }
144
145 .LicensePlateNumber{
146width: 750rpx;
147height: 200rpx;
148border-bottom: 1rpx solid #abb2bd
149 }
js：
1 Page({
2
3data: {
4licensePlateShowHidden:true,
5licensePlate_provinces_Box:true,
6licensePlate_letter_Box: true,
7licensePlate_digital_Box: true,
8licensePlate_provinces: [
9"京", "滬", "浙", "蘇", "粵", "魯",
10"晉", "冀", "豫", "川", "渝", "遼",
11"吉", "黑", "皖", "鄂", "津", "貴",
12"雲", "桂", "瓊", "青", "新", "藏",
13"蒙", "寧", "甘", "陝", "閩", "贛",
14"湘"
15],
16licensePlate_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],
23licensePlate_digital: [
24"1", "2", "3",
25"4", "5", "6",
26"7", "8", "9",
27"0"
28],
29LicensePlateNumber:'',
30},
31
32// 顯示模擬鍵盤
33LicensePlateNumber:function(){
34var that = this;
35var LicensePlateNumber = this.data.LicensePlateNumber;
36var LicensePlateNumberLen = LicensePlateNumber.length;
37console.log(LicensePlateNumber, LicensePlateNumberLen)
38if (LicensePlateNumberLen == 0){
39this.setData({
40licensePlateShowHidden: false,
41licensePlate_provinces_Box: false,
42})
43} else if (LicensePlateNumberLen == 1){
44this.setData({
45licensePlateShowHidden: false,
46licensePlate_letter_Box: false,
47})
48}else{
49this.setData({
50licensePlateShowHidden: false,
51licensePlate_digital_Box: false,
52})
53}
54
55},
56
57// 切換成字母
58licensePlate_switchLetter:function(){
59this.setData({
60licensePlate_provinces_Box:true,
61licensePlate_letter_Box:false,
62licensePlate_digital_Box: true,
63})
64},
65
66// 切換成數字
67licensePlate_switchDigital: function () {
68var LicensePlateNumber = this.data.LicensePlateNumber;
69var LicensePlateNumberLen = LicensePlateNumber.length;
70if (LicensePlateNumberLen == 1){
71wx.showToast({
72title: '車牌號碼第二位必須是字母',
73icon: 'none',
74duration: 1500,
75})
76}else{
77this.setData({
78licensePlate_provinces_Box: true,
79licensePlate_letter_Box: true,
80licensePlate_digital_Box: false,
81})
82}
83},
84
85
86// 刪除
87licensePlate_delete: function (e) {
88var LicensePlateNumber = this.data.LicensePlateNumber;
89var LicensePlateNumberLen = LicensePlateNumber.length;
90var LicensePlateNumberDelete = LicensePlateNumber.split('');
91var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(0,-1)
92if (LicensePlateNumberDelete.slice(0,-1).length == 1){
93this.setData({
94licensePlate_provinces_Box: true,
95licensePlate_letter_Box: false,
96licensePlate_digital_Box: true,
97})
98} else if (LicensePlateNumberLen == 0 || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(0, -1).length == 0){
99this.setData({
100licensePlate_provinces_Box: false,
101licensePlate_letter_Box: true,
102licensePlate_digital_Box: true,
103})
104}
105this.setData({
106LicensePlateNumber: NewLicensePlateNumber
107})
108},
109
110// 清空
111licensePlate_empty: function (e) {
112this.setData({
113LicensePlateNumber:'',
114licensePlate_provinces_Box: false,
115licensePlate_letter_Box: true,
116licensePlate_digital_Box: true,
117})
118},
119
120// 關閉模擬鍵盤
121licensePlate_close:function(){
122this.setData({
123licensePlateShowHidden: true
124})
125},
126
127// 點選獲取省份
128licensePlate_provinces: function (e) {
129this.setData({
130LicensePlateNumber: e.target.dataset.licenseplateprovinces,
131licensePlate_letter_Box: false,
132licensePlate_digital_Box: true,
133})
134console.log(e.target.dataset.licenseplateprovinces)
135},
136
137// 點選獲取字母
138licensePlate_letter: function (e) {
139var LicensePlateNumber = this.data.LicensePlateNumber;
140var LicensePlateNumberLen = LicensePlateNumber.length;
141if (LicensePlateNumberLen != 8) {
142this.setData({
143LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
144})
145console.log(e.target.dataset.licenseplateprovinces)
146} else {
147wx.showToast({
148title: '車牌號碼最多不能超過8位',
149icon: 'none',
150duration: 1500,
151})
152}
153},
154
155// 點選獲取數字
156licensePlate_digital: function (e) {
157var LicensePlateNumber = this.data.LicensePlateNumber;
158var LicensePlateNumberLen = LicensePlateNumber.length;
159if (LicensePlateNumberLen != 8){
160this.setData({
161LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
162})
163console.log(e.target.dataset.licenseplateprovinces)
164}else{
165wx.showToast({
166title: '車牌號碼最多不能超過8位',
167icon:'none',
168duration:1500,
169})
170}
171},
172
173
174 })
噢了。