微信小程序车牌号码模拟键盘输入练习,
未经允许,禁止转载,抄袭,如需借鉴参考等,请附上该文章连接。
相关资料参考:upload/201811121648454488.png" alt="" style="margin: 0px; padding: 0px; border: none; max-width: 800px; height: auto;" />
预览图二:

预览图三:

预览图四:

预览图五:

大概的效果就和原来图差不多。
思路解析:车牌号码由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

