微信小程序中实现车牌输入功能

一、成品展示与介绍

在点击输入框的时候会弹出车牌输入键盘

二、相关思路解析

首先车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码。其中的八位数的车牌号码为新能源车的车牌号码。

再次是对于输入键盘的设计。这里设计了两个键盘一个是有31位汉字组成的，第二个是数字加英文字母。

最后是对交互的设计，在本次的设计中是从第一位开始输入。从最后一位进行删除，这样做的好处是可以保证车牌的输入规范和键盘切换的效果。

三、具体实现代码

• 界面显示

<view class="page">
  <!-- 车牌号码输入框 -->
  <view class="carNumber">
    <view class="weui-cells__title">请输入车牌号码后在使用</view>
    <!-- 车牌号头两位 -->
    <view class="carNumber-items">
      <view class="carNumber-items-box" bindtap='openKeyboard'>
        <view class="carNumber-items-province carNumber-items-box-list">{
  {carnum[0] || '豫'}}</view>
        <view class="carNumber-items-En carNumber-items-box-list">{
  {carnum[1] || 'A'}}</view>
      </view>
      <!-- 常规 -->
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[2] || ''}}</view>
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[3] || ''}}</view>
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[4] || ''}}</view>
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[5] || ''}}</view>
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[6] || ''}}</view>
      <!-- 新能源 -->
      <view class="carNumber-item {
    {showNewPower ? '': 'carNumber-item-newpower'}}">
        <view wx:if="{
    {!showNewPower}}" bindtap='showPowerBtn'>
          <view class="carNumber-newpower-add">+</view>
          <view>新能源</view>
        </view>
        <view wx:if="{
    {showNewPower}}" bindtap='openKeyboard'>
          {
  {carnum[7]}}
        </view>
      </view>
    </