先来一波预览图。
预览图片一：
预览图二：
预览图三：
预览图四：
预览图五：
大概的效果就和原来图差不多。
思路解析：车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码，（注：其中的八位数的车牌号码为能源车的车牌号码。）
大概的逻辑思维，不包含代码获取值什么的或者验证其他的说明，详细看代码片段。
第一，原型的设计思路：先设计好模拟键盘的大概架构，样式。这里的分为三个不同的模拟键盘结构合在一起，分部为汉字，字母，数字，其样式统一；
第二：数据的交互思路：对需要的数据绑定或者修改填充等，如何获取，通过什么方式获取，再怎么反馈出来，需要搭建好数据的来回交互传递的大概模型；
第三，交互的体验思路：触发或者在输入框点击输入的时候，启动模拟键盘，先用汉字选择，其次是字母，最后由字母和数字混合，对三个架构先进行需求排序的理清；
第四，功能的操作思路：模拟键盘的功能性按钮，比如数字与字母之间的的切换，删除最后一位数据，清空全部数据和状态，关闭的结束等操作等体验。
第五：输入判断的思路：判断车牌号码输入的位数，第一位和第二位分部是什么，字母与数字的切换的判断。删除到第几位需要在什么样的状态输入下等。
大概就这这些样子了，能写怎么多字，感觉都超纲了，如果有错的地方，还望留言指正。
最后是源码：
wxml：
<view> <view> <view bindtap='LicensePlateNumber'> <input value='{{LicensePlateNumber}}' disabled='true' placeholder='请选择'></input> </view> </view> <view> <view hidden='{{licensePlateShowHidden}}'> <!-- 遮罩层 --> <view bindtap='licensePlate_close'> </view> <!-- 省份 --> <view hidden='{{licensePlate_provinces_Box}}'> <view wx:for='{{licensePlate_provinces}}' bindtap='licensePlate_provinces' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view> <view bindtap='licensePlate_close'>关闭</view> </view> <!-- 字母 --> <view hidden='{{licensePlate_letter_Box}}'> <view wx:for='{{licensePlate_letter}}' bindtap='licensePlate_letter' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view> <view> <view bindtap='licensePlate_switchDigital'>数字</view> <view bindtap='licensePlate_delete'>删除</view> <view bindtap='licensePlate_empty'>清空</view> <view bindtap='licensePlate_close'>关闭</view> </view> </view> <!-- 数字 --> <view hidden='{{licensePlate_digital_Box}}'> <view wx:for='{{licensePlate_digital}}' bindtap='licensePlate_digital' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view> <view> <view bindtap='licensePlate_switchLetter'>字母</view> <view bindtap='licensePlate_delete'>删除</view> <view bindtap='licensePlate_empty'>清空</view> <view bindtap='licensePlate_close'>关闭</view> </view> </view> </view> </view> </view>
wxss：
@import "weui.wxss"; page{ min-height:%; } .wrapper{ width: rpx; overflow:hidden; } .licensePlateShow{ width: rpx; min-height: %; position: absolute; bottom: ; } .licensePlate_Bg{ min-height: %; width: rpx; position: absolute; z-index: ; overflow: hidden; } .licensePlate_provinces_Box{ width: rpx; background-color: #ddda; margin: auto; position: absolute; bottom: ; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; /* border-top: px solid #abbbd; */ z-index: ; } .licensePlate_provincesTist{ flex:%; height: rpx; line-height: rpx; margin: auto; text-align: center; background-color:#ffffff; border-top: px solid #abbbd; border-left: px solid #abbbd; } .licensePlate_provincesTist:nth-child(n){ border-right: px solid #abbbd; } .licensePlate_letter_Box{ width: rpx; background-color: #ddda; margin: auto; position: absolute; bottom: ; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; /* border-top: px solid #abbbd; */ z-index: ; } .licensePlate_letterTist{ flex:%; height: rpx; line-height: rpx; margin: auto; text-align: center; background-color:#ffffff; border-top: px solid #abbbd; border-left: px solid #abbbd; } .licensePlate_letterTist:nth-child(n){ border-right: px solid #abbbd; } .licensePlate_letterTist:nth-child(){ border-right: px solid #abbbd; } .licensePlate_letterTist_but{ width: rpx; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; } .licensePlate_digital_Box{ width: rpx; background-color: #ddda; margin: auto; position: absolute; bottom: ; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; /* border-top: px solid #abbbd; */ z-index: ; } .licensePlate_digitalTist{ flex:%; height: rpx; line-height: rpx; margin: auto; text-align: center; background-color:#ffffff; border-top: px solid #abbbd; border-left: px solid #abbbd; } .licensePlate_digital_but{ width: rpx; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; } .licensePlate_but{ flex: ; height: rpx; line-height: rpx; text-align: center; color: #ffffff; background-color:#ff; border-top: px solid #abbbd; border-left: px solid #abbbd; } .licensePlate_but:last-child{ border-right: px solid #abbbd; } .LicensePlateNumber{ width: rpx; height: rpx; border-bottom: rpx solid #abbbd }
js：