Implementing license plate input function in WeChat applet

Preface
background
Big guess
Finding patterns
Structure and style
Component Implementation

parameter
Determine the keyboard type
Get input content
Component parameter passing
Component Usage
test
Solve the bug of keyboard type judgment

Conclusion

Component code
Using Page Code

Preface

Hahahaha, a new article. I haven’t updated for a long time. Today, I’m taking a break to summarize the WeChat component that I used before, which uses a custom keyboard to input vehicle license plates. Here is the effect picture, please enjoy:

background

I recently worked on a project related to cars. If there is a car, there must be a license plate. We all know that license plates have certain rules. If we simply give an input box. . . . . . Ten thousand words are omitted here. Since I was a child, my programming teacher told me not to trust anything entered by the user. Uh-huh! Now that I think about it, it is really like this. There are always some unique users who like to do the opposite. I don’t know if they really don’t understand or are just trying to sabotage. Another teacher told me to always treat users as idiots. Although I am also a user and it doesn’t feel good, it makes sense because you never know who will use what you write. . . . . (Not even human). In this context, if you ask users to enter a correct license plate number, that's harder than climbing to the sky. It's too difficult. I can't do it.

Big guess

In this case, let’s be users ourselves and see what might happen. Come on, don’t go away, now is the time to use your imagination.

I a.12345
Ea.ii111
Xa.6666666
za.Hahahahahaha
. . . . . .

Wow, I guess I can't finish writing it in a whole day. I'll see how you guys do it later. There is a premise here that we don't consider license plates that start with English words. If you need to consider it, you can learn from it.

Finding patterns

In fact, there is no pattern to find. Just search on Baidu and you will know the rules for license plates. The first digit is the abbreviation of the province, the second digit is a letter, and the rest is a mixture of letters and numbers. There are a few special ones here, including training cars, cars from Hong Kong and Macao entering the mainland, and consulate cars. In addition, the letters i and o and the numbers 1 and 0 are difficult to distinguish, so the letters i and o are removed, and finally the pattern is formed.

Structure and style

Once you know the rules, you can start to operate. First, take a look at the keyboard layout of the design:

The picture above is the keyboard layout of the province abbreviation

The picture above is the second letter keyboard layout

The picture above is the keyboard layout of the following digits

Let's write the structure based on these layouts:

<view class="keyboard" wx:if="{{isShow}}">
    <view class="item">
        <view wx:for="{{dataArr1}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item">
        <view wx:for="{{dataArr2}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item">
        <view wx:for="{{dataArr3}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item" wx:if="{{dataArr4.length}}">
        <view wx:for="{{dataArr4}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="delbtn" bindtap="delKey" wx:if="{{keyType == 'carlicense'}}"><image src="./icon_del.png"></image></view>
</view>
<view class="mask" bindtap="hideKeyBoard" wx:if="{{isShow}}"></view>

Put the data into four arrays respectively. Since the second digit is missing, we simply delete one line, and there is also a delete button and the final mask layer, which is used to close the keyboard when clicking somewhere else.

Next, add some test data to write the basic colors:

data: {
  dataArr1:["Beijing","Shanghai","Guangdong","Tianjin","Hebei","Shanxi","Liaoning","Mongolia","Heilongjiang","Jilin"],
  dataArr2:["Su","Zhe","Anhui","Fujian","Gan","Shandong","Henan","Hubei","Xiang"],
  dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
  dataArr4:["Gan","Qinghai","Ningxia","Xinjiang","Taiwan"]
}

Here we take the input province as an example

The next step is to add our style and you can see the effect:

.keyboard {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999;
    width: 100%;
    background: #d1d6d9;
    padding: 20rpx 10rpx 0;
    padding-bottom:calc(30px + env(safe-area-inset-bottom)/2);
    box-sizing: border-box;
}

.keyboard .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
}

.keyboard .item view {
    width: 9%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin-right: 10rpx;
    background: #ffffff;
    border-radius: 10rpx;
    font-size: 28rpx;
}

.keyboard .item view:last-child {
    margin-right: 0;
}

.keyboard .delbtn {
    position: fixed;
    right: 10rpx;
    bottom: calc(40px + env(safe-area-inset-bottom)/2);
    height: 70rpx;
    width: 18%;
    z-index: 999999;
    background: #adb3bd;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboard .delbtn image{
    width: 60rpx;
    height: 60rpx;
}

.mask{
    position: fixed;
    left: 0;
    top: 113rpx;
    bottom: 0;
    right: 0;
    z-index: 99998;
}

I won't go into detail about the styles here, you can just choose according to your own preferences

Now you can see the effect, as shown in the figure:

Component Implementation

The implementation of the component is actually very simple. You just need to know how to use the WeChat component.

parameter

Before implementing it, let's take a look at what parameters are needed. Since the keyboard must be displayed and hidden, a display and hiding parameter is required, which is named isShow here. Let's look at our style again. If we input the second digit or later, do the previously defined array data have to be changed? The question is, when should they be changed? Should it be opened when you click the input place? At this time, you will know whether to enter the province, the second digit or the later one, so there needs to be a parameter here to indicate what type of keyboard needs to be displayed currently, temporarily named keyType. Now that we have the parameters, let's see if we need to set the default value. For isShow, it must be false at the beginning, which means it is not displayed. As for keyType, the default value is fine. Here, the default value is set to province. The parameters here are actually the parameters that need to be passed when the component is called, so these two parameters are set as the properties of the component.

With the above analysis, the general outline of the component comes out, the code is as follows:

Component({
    properties:
        keyType:{
            type:String,
            value:'province'
        },
        isShow:{
            type:Boolean,
            value:false
        }
    },
    data: {
        dataArr1:["Beijing","Shanghai","Guangdong","Tianjin","Hebei","Shanxi","Liaoning","Mongolia","Heilongjiang","Jilin"],
        dataArr2:["Su","Zhe","Anhui","Fujian","Gan","Shandong","Henan","Hubei","Xiang"],
        dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
        dataArr4:["Gan","Qinghai","Ningxia","Xinjiang","Taiwan"]
    }
})

Determine the keyboard type

Ok, the parameters required for the keyboard have been considered above. The next step is to switch the values of different keyboard arrays according to the passed keyType. In fact, just write a method in the component method to switch, and the implementation is as follows:

Component({
    properties:
        keyType:{
            type:String,
            value:'province'
        },
        isShow:{
            type:Boolean,
            value:false
        }
    },
    data: {
        dataArr1:[],
        dataArr2:[],
        dataArr3:[],
        dataArr4:[]
    },
    methods: {
        changeType(){
            if(this.data.keyType == 'letter'){
                this.setData({
                    dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
                    dataArr2:["A","S","D","F","G","H","J","K","L"],
                    dataArr3:["Z","X","C","V","B"],
                    dataArr4:[]
                })
            }else if(this.data.keyType == 'province'){
                this.setData({
                    dataArr1:["Beijing","Shanghai","Guangdong","Tianjin","Hebei","Shanxi","Liaoning","Mongolia","Heilongjiang","Jilin"],
                    dataArr2:["Su","Zhe","Anhui","Fujian","Gan","Shandong","Henan","Hubei","Xiang"],
                    dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
                    dataArr4:["Gan","Qinghai","Ningxia","Xinjiang","Taiwan"]
                })
            }else if(this.data.keyType == 'carlicense'){
                this.setData({
                    dataArr1:["1","2","3","4","5","6","7","8","9","0"],
                    dataArr2:["A","B","C","D","E","F","G","H","J","K"],
                    dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
                    dataArr4:["W","X","Y","Z","Hong Kong","Macau","Study","Lead"]
                })
            }
        }
    }
})

Now that we have the cutting method, we just need to call it during initialization. Modify the code as follows:

Component({
    properties:
        keyType:{
            type:String,
            value:'province'
        },
        isShow:{
            type:Boolean,
            value:false
        }
    },
    data: {
        dataArr1:[],
        dataArr2:[],
        dataArr3:[],
        dataArr4:[]
    },
    attached(){
        this.changeType()
    },
    methods: {
        changeType(){
            if(this.data.keyType == 'letter'){
                this.setData({
                    dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
                    dataArr2:["A","S","D","F","G","H","J","K","L"],
                    dataArr3:["Z","X","C","V","B"],
                    dataArr4:[]
                })
            }else if(this.data.keyType == 'province'){
                this.setData({
                    dataArr1:["Beijing","Shanghai","Guangdong","Tianjin","Hebei","Shanxi","Liaoning","Mongolia","Heilongjiang","Jilin"],
                    dataArr2:["Su","Zhe","Anhui","Fujian","Gan","Shandong","Henan","Hubei","Xiang"],
                    dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
                    dataArr4:["Gan","Qinghai","Ningxia","Xinjiang","Taiwan"]
                })
            }else if(this.data.keyType == 'carlicense'){
                this.setData({
                    dataArr1:["1","2","3","4","5","6","7","8","9","0"],
                    dataArr2:["A","B","C","D","E","F","G","H","J","K"],
                    dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
                    dataArr4:["W","X","Y","Z","Hong Kong","Macau","Study","Lead"]
                })
            }
        }
    }
})

At this point, the basic functions of the component have been completed, but when we click on the content on the keyboard, you will find that there is no response, hmm. . . . . There seems to be something missing here. Since it is a keyboard, it must get the input result.

Get input content

To get the content input by the keyboard, you need to add an event to each key of the keyboard to get the input content. Add an event to the previous structure. For details, please refer to the first paragraph of the article. The specific implementation code is as follows:

methods: {
  inputKey(e){
    console.log(e.currentTarget.dataset.value)
  },
  delKey(e){
    console.log(e.currentTarget.dataset.value)
  },
  hideKeyBoard(){
    this.setData({
        isShow:false
    })
  }
}

The time for deleting and closing the keyboard is also added here. The input value can be obtained through the above two methods. At this time, when we click on a character, we will see the value just selected printed out in the control panel.

But I don't need to print out the value, I need to display the value on the page. Here I need to pass the value obtained by the component to the page that calls the component. How do I pass it to the page that calls the component?

Component parameter passing

Here we can go to the official documentation of WeChat Mini Program. After all, official documentation is a good thing. Find the place shown in the figure below:

What we use here is the second event of component communication, which can pass arbitrary data. According to the introduction of the official document, I believe everyone knows how to use it at a glance. The code is as follows:

methods: {
  inputKey(e){
    this.triggerEvent('inputword', {type:'input',value:e.currentTarget.dataset.value})
  },
  delKey(e){
    this.triggerEvent('inputword', {type:'del'})
  },
  hideKeyBoard(){
    this.setData({
        isShow:false
    })
    this.triggerEvent('inputword', {type:'blur'})
  }
}

Here, all operations are transmitted through an event, and a type is added to distinguish whether it is input, deletion or closing the keyboard.

Component Usage

Well, it’s not easy. It’s finally time to use the component. Here are the steps according to the usage of WeChat components:

Introduce the component address in the page configuration file. Add the component tag in the page. Add the parameters and event-related codes that need to be passed on the added tag as follows:

{
  "navigationBarTitleText": "Add new vehicle",
  "usingComponents": {
    "keyboard":"../../components/keyboard/index"
  }
}

Add the above code to the configuration file of the page where the component needs to be used

<view class="bind-car">
    <view class="car-province {{focusProvince?'active':''}}">
        <view bindtap="chooseProvinceCn">{{provinceCn}}</view>
        <view bindtap="chooseProvinceCode">{{provinceCode}}</view>
    </view>
    <view class="car-number {{focusCode?'active':''}}" bindtap="chooseCarCode">{{carCode}}</view>
</view>
<keyboard bindinputword="inputWord" keyType="{{setKeyType}}" isShow="{{showKeyBoard}}"></keyboard>

Add the last line of code above to the page where it is used, and add the required parameters and events.

The next step is to process the corresponding parameters and events in the js of the page. The specific code is as follows:

Page({
  data: {
    focusProvince:false,
    focusCode:false,
    setKeyType:'province',
    showKeyBoard:false,
    keyIndex:0,
    provinceCn:'',
    provinceCode:'',
    carCode:''
  },
  inputWord(e){
    if(e.detail.type == 'input'){
      if(this.data.keyIndex == 0){
        this.setData({
          provinceCn:e.detail.value
        })
      }else if(this.data.keyIndex == 1){
        this.setData({
          provinceCode:e.detail.value
        })
      }else if(this.data.keyIndex == 2){
        if(this.data.carCode.length < 6){
          this.setData({
            carCode:this.data.carCode + e.detail.value
          })
        }
      }
    }else if(e.detail.type == 'del'){
      if(this.data.carCode){
        this.setData({
          carCode:this.data.carCode.substr(0, this.data.carCode.length - 1)
        })
      }
    }else if(e.detail.type == 'blur'){
      this.setData({
        focusCode:false,
        focusProvince:false
      })
    }
  },
  chooseProvinceCn(){
    this.setData({
      setKeyType:'province',
      showKeyBoard:true,
      keyIndex:0,
      focusProvince:true,
      focusCode:false
    })
  },
  chooseProvinceCode(){
    this.setData({
      setKeyType:'letter',
      showKeyBoard:true,
      keyIndex:1,
      focusProvince:true,
      focusCode:false
    })
  },
  chooseCarCode(){
    this.setData({
      setKeyType:'carlicense',
      showKeyBoard:true,
      keyIndex:2,
      focusCode:true,
      focusProvince:false
    })
  }
})

The inputWord in the page is the event we need to handle in the end. The other ones are switches that control the focus and display the corresponding red box after input.

test

This is the step that the programmers are most afraid of. The testers will just mess around with the code they wrote, hahaha, and finally find fault with it. Here, when we select different input types, we will find that the content of the keyboard has not changed. Hmm, it turns out that I wrote a bug for myself.

Solve the bug of keyboard type judgment

After the simple test above, I found that there is a bug that needs to be fixed. In fact, the problem lies in the fact that the keyType passed to the component is cached every time the keyboard is displayed, so it is necessary to monitor the changes in the property declaration in the component. I did it right away and got off work immediately after the fix. The code is as follows:

Component({
  properties:
    keyType:{
      type:String,
      value:'letter',
      observer:function(newVal,oldVal){
          this.changeType()
      }
    },
    isShow:{
      type:Boolean,
      value:false
    }
  }
})

Add an observer listening function to the properties, and when there is a change, call the function to determine the type. This way you can use it happily. Finally, I checked in and left with my backpack. . . . Wait, there's more later.

Conclusion

At present, this component is only written to meet the requirements. There may still be many problems in the actual use process. Everyone is welcome to raise questions. Finally, put the complete code of each file

Component code

WXML

<view class="keyboard" wx:if="{{isShow}}">
    <view class="item">
        <view wx:for="{{dataArr1}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item">
        <view wx:for="{{dataArr2}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item">
        <view wx:for="{{dataArr3}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item" wx:if="{{dataArr4.length}}">
        <view wx:for="{{dataArr4}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="delbtn" bindtap="delKey" wx:if="{{keyType == 'carlicense'}}"><image src="./icon_del.png"></image></view>
</view>
<view class="mask" bindtap="hideKeyBoard" wx:if="{{isShow}}"></view>

WXSS

.keyboard {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999;
    width: 100%;
    background: #d1d6d9;
    padding: 20rpx 10rpx 0;
    padding-bottom:calc(30px + env(safe-area-inset-bottom)/2);
    box-sizing: border-box;
}

.keyboard .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
}

.keyboard .item view {
    width: 9%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin-right: 10rpx;
    background: #ffffff;
    border-radius: 10rpx;
    font-size: 28rpx;
}

.keyboard .item view:last-child {
    margin-right: 0;
}

.keyboard .delbtn {
    position: fixed;
    right: 10rpx;
    bottom: calc(40px + env(safe-area-inset-bottom)/2);
    height: 70rpx;
    width: 18%;
    z-index: 999999;
    background: #adb3bd;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboard .delbtn image{
    width: 60rpx;
    height: 60rpx;
}
.mask{
    position: fixed;
    left: 0;
    top: 113rpx;
    bottom: 0;
    right: 0;
    z-index: 99998;
}

Component({
    properties:
        keyType:{
            type:String,
            value:'letter',
            observer:function(newVal,oldVal){
                this.changeType()
            }
        },
        isShow:{
            type:Boolean,
            value:false
        }
    },
    data: {
        dataArr1:[],
        dataArr2:[],
        dataArr3:[],
        dataArr4:[]
    },
    attached(){
        this.changeType()
    },
    methods: {
        changeType(){
            if(this.data.keyType == 'letter'){
                this.setData({
                    dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
                    dataArr2:["A","S","D","F","G","H","J","K","L"],
                    dataArr3:["Z","X","C","V","B"],
                    dataArr4:[]
                })
            }else if(this.data.keyType == 'province'){
                this.setData({
                    dataArr1:["Beijing","Shanghai","Guangdong","Tianjin","Hebei","Shanxi","Liaoning","Mongolia","Heilongjiang","Jilin"],
                    dataArr2:["Su","Zhe","Anhui","Fujian","Gan","Shandong","Henan","Hubei","Xiang"],
                    dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
                    dataArr4:["Gan","Qinghai","Ningxia","Xinjiang","Taiwan"]
                })
            }else if(this.data.keyType == 'carlicense'){
                this.setData({
                    dataArr1:["1","2","3","4","5","6","7","8","9","0"],
                    dataArr2:["A","B","C","D","E","F","G","H","J","K"],
                    dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
                    dataArr4:["W","X","Y","Z","Hong Kong","Macau","Study","Lead"]
                })
            }
        },
        inputKey(e){
            this.triggerEvent('inputword', {type:'input',value:e.currentTarget.dataset.value})
        },
        delKey(e){
            this.triggerEvent('inputword', {type:'del'})
        },
        hideKeyBoard(){
            this.setData({
                isShow:false
            })
            this.triggerEvent('inputword', {type:'blur'})
        }
    }
})

Using Page Code

JSON

{
  "navigationBarTitleText": "Add new vehicle",
  "usingComponents": {
    "keyboard":"../../components/keyboard/index"
  }
}

WXML

<view class="bind-car">
    <view class="car-province {{focusProvince?'active':''}}">
        <view bindtap="chooseProvinceCn">{{provinceCn}}</view>
        <view bindtap="chooseProvinceCode">{{provinceCode}}</view>
    </view>
    <view class="car-number {{focusCode?'active':''}}" bindtap="chooseCarCode">{{carCode}}</view>
</view>
<keyboard bindinputword="inputWord" keyType="{{setKeyType}}" isShow="{{showKeyBoard}}"></keyboard>

WXSS

.bind-car {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    padding: 25rpx 30rpx;
}

.bind-car .car-province {
    margin-right: 30rpx;
    width: 170rpx;
    height: 88rpx;
    border: 1rpx solid #999999;
    border-radius: 4rpx;
    display: flex;
}

.bind-car .car-province view {
    width: 86rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
}

.bind-car .car-province view:first-child {
    position: relative;
}

.bind-car .car-province view:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 1rpx;
    height: 40rpx;
    background: #999999;
    margin-top: -20rpx;
}

.bind-car .car-province.active {
    border-color: #FF5152;
}

.bind-car .car-province.active view:first-child::after {
    background: #E83333;
}

.car-number {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border: 1rpx solid #999999;
    border-radius: 4rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
}

.car-number.active {
    border-color: #E83333;
}

Page({
    data: {
        focusProvince:false,
        focusCode:false,
        setKeyType:'province',
        showKeyBoard:false,
        keyIndex:0,
        provinceCn:'',
        provinceCode:'',
        carCode:''
    },
    inputWord(e){
        if(e.detail.type == 'input'){
            if(this.data.keyIndex == 0){
                this.setData({
                    provinceCn:e.detail.value
                })
            }else if(this.data.keyIndex == 1){
                this.setData({
                    provinceCode:e.detail.value
                })
            }else if(this.data.keyIndex == 2){
                if(this.data.carCode.length < 6){
                    this.setData({
                        carCode:this.data.carCode + e.detail.value
                    })
                }
            }
        }else if(e.detail.type == 'del'){
            if(this.data.carCode){
                this.setData({
                    carCode:this.data.carCode.substr(0, this.data.carCode.length - 1)
                })
            }
        }else if(e.detail.type == 'blur'){
            this.setData({
                focusCode:false,
                focusProvince:false
            })
        }
    },
    chooseProvinceCn(){
        this.setData({
            setKeyType:'province',
            showKeyBoard:true,
            keyIndex:0,
            focusProvince:true,
            focusCode:false
        })
    },
    chooseProvinceCode(){
        this.setData({
            setKeyType:'letter',
            showKeyBoard:true,
            keyIndex:1,
            focusProvince:true,
            focusCode:false
        })
    },
    chooseCarCode(){
        this.setData({
            setKeyType:'carlicense',
            showKeyBoard:true,
            keyIndex:2,
            focusCode:true,
            focusProvince:false
        })
    }
})

This is the end of this article about implementing the license plate input function in the WeChat applet. For more relevant WeChat license plate input content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Sample code for WeChat applet using license plate number input method
WeChat applet license plate number simulation keyboard input function implementation code

<<: How to install ZSH terminal in CentOS 7.x

>>: Practical Optimization of MySQL Paging Limit