先来一波预览图。

预览图片一：

预览图二：

预览图三：

预览图四：

预览图五：

大概的效果就和原来图差不多。

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

大概的逻辑思维，不包含代码获取值什么的或者验证其他的说明，详细看代码片段。

第一，原型的设计思路：先设计好模拟键盘的大概架构，样式。这里的分为三个不同的模拟键盘结构合在一起，分部为汉字，字母，数字，其样式统一；

第二：数据的交互思路：对需要的数据绑定或者修改填充等，如何获取，通过什么方式获取，再怎么反馈出来，需要搭建好数据的来回交互传递的大概模型；

第三，交互的体验思路：触发或者在输入框点击输入的时候，启动模拟键盘，先用汉字选择，其次是字母，最后由字母和数字混合，对三个架构先进行需求排序的理清；

第四，功能的操作思路：模拟键盘的功能性按钮，比如数字与字母之间的的切换，删除最后一位数据，清空全部数据和状态，关闭的结束等操作等体验。

第五：输入判断的思路：判断车牌号码输入的位数，第一位和第二位分部是什么，字母与数字的切换的判断。删除到第几位需要在什么样的状态输入下等。

大概就这这些样子了，能写怎么多字，感觉都超纲了，如果有错的地方，还望留言指正。

最后是源码：

wxml：

{{item}}

关闭

{{item}}

数字

删除

清空

关闭

{{item}}

字母

删除

清空

关闭

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：

Page({

data: {

licensePlateShowHidden:true,

licensePlate_provinces_Box:true,

licensePlate_letter_Box: true,

licensePlate_digital_Box: true,

licensePlate_provinces: [

"京", "沪", "浙", "苏", "粤", "鲁",

"晋", "冀", "豫", "川", "渝", "辽",

"吉", "黑", "皖", "鄂", "津", "贵",

"云", "桂", "琼", "青", "新", "藏",

"蒙", "宁", "甘", "陕", "闽", "赣",

"湘"

],

licensePlate_letter: [

"A", "B", "C", "D", "E", "F",

"G", "H", "L", "J", "K", "L",

"M", "N", "O", "P", "Q", "R",

"S", "T", "U", "V", "W", "X",

"Y", "Z"

],

licensePlate_digital: [

"", "", "",

"", "", "",

"", "", "",

""

],

LicensePlateNumber:'',

},

// 显示模拟键盘

LicensePlateNumber:function(){

var that = this;

var LicensePlateNumber = this.data.LicensePlateNumber;

var LicensePlateNumberLen = LicensePlateNumber.length;

console.log(LicensePlateNumber, LicensePlateNumberLen)

if (LicensePlateNumberLen == ){

this.setData({

licensePlateShowHidden: false,

licensePlate_provinces_Box: false,

})

} else if (LicensePlateNumberLen == ){

this.setData({

licensePlateShowHidden: false,

licensePlate_letter_Box: false,

})

}else{

this.setData({

licensePlateShowHidden: false,

licensePlate_digital_Box: false,

})

}

},

// 切换成字母

licensePlate_switchLetter:function(){

this.setData({

licensePlate_provinces_Box:true,

licensePlate_letter_Box:false,

licensePlate_digital_Box: true,

})

},

// 切换成数字

licensePlate_switchDigital: function () {

var LicensePlateNumber = this.data.LicensePlateNumber;

var LicensePlateNumberLen = LicensePlateNumber.length;

if (LicensePlateNumberLen == ){

wx.showToast({

title: '车牌号码第二位必须是字母',

icon: 'none',

duration: ,

})

}else{

this.setData({

licensePlate_provinces_Box: true,

licensePlate_letter_Box: true,

licensePlate_digital_Box: false,

})

}

},

// 删除

licensePlate_delete: function (e) {

var LicensePlateNumber = this.data.LicensePlateNumber;

var LicensePlateNumberLen = LicensePlateNumber.length;

var LicensePlateNumberDelete = LicensePlateNumber.split('');

var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(,-)

if (LicensePlateNumberDelete.slice(,-).length == ){

this.setData({

licensePlate_provinces_Box: true,

licensePlate_letter_Box: false,

licensePlate_digital_Box: true,

})

} else if (LicensePlateNumberLen == || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(, -).length == ){

this.setData({

licensePlate_provinces_Box: false,

licensePlate_letter_Box: true,

licensePlate_digital_Box: true,

})

}

this.setData({

LicensePlateNumber: NewLicensePlateNumber

})

},

// 清空

licensePlate_empty: function (e) {

this.setData({

LicensePlateNumber:'',

licensePlate_provinces_Box: false,

licensePlate_letter_Box: true,

licensePlate_digital_Box: true,

})

},

// 关闭模拟键盘

licensePlate_close:function(){

this.setData({

licensePlateShowHidden: true

})

},

// 点击获取省份

licensePlate_provinces: function (e) {

this.setData({

LicensePlateNumber: e.target.dataset.licenseplateprovinces,

licensePlate_letter_Box: false,

licensePlate_digital_Box: true,

})

console.log(e.target.dataset.licenseplateprovinces)

},

// 点击获取字母

licensePlate_letter: function (e) {

var LicensePlateNumber = this.data.LicensePlateNumber;

var LicensePlateNumberLen = LicensePlateNumber.length;

if (LicensePlateNumberLen != ) {

this.setData({

LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces

})

console.log(e.target.dataset.licenseplateprovinces)

} else {

wx.showToast({

title: '车牌号码最多不能超过位',

icon: 'none',

duration: ,

})

}

},

// 点击获取数字

licensePlate_digital: function (e) {

var LicensePlateNumber = this.data.LicensePlateNumber;

var LicensePlateNumberLen = LicensePlateNumber.length;

if (LicensePlateNumberLen != ){

this.setData({

LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces

})

console.log(e.target.dataset.licenseplateprovinces)

}else{

wx.showToast({

title: '车牌号码最多不能超过位',

icon:'none',

duration:,

})

}

},

})

总结

以上所述是小编给大家介绍的微信小程序车牌号码模拟键盘输入功能的实现代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

php车牌输入,微信小程序车牌号码模拟键盘输入功能的实现代码相关推荐

  1. 小程序识别车牌php,微信小程序——车牌键盘输入js+css

    请输入车牌号码: {{carNo}} {{item}} 清空 关闭 {{item}} OK Del /* pages/jp_cp/jp_cp.wxss */ .lf{ float: left; } . ...

  2. 微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式

    微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...

  3. 【微信小程序/实现】实现留言墙功能页面

    [微信小程序/实现]实现留言墙功能 一.需求分析 二.功能设计 三.页面设计 四.代码 (一)核心代码:向服务器发出请求 (二)完整代码 message.wxml message.wxss messa ...

  4. 微信小程序利用云开发实现评论功能

    微信小程序利用云开发实现评论功能 如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论, <!-- 商品详情 --> <vie ...

  5. 微信小程序客服端实现拨号功能

    微信小程序客服端实现拨号功能 微信小程序拨号功能是需要经常用到的功能之一,微信拨号功能,当用户需要联系平台客服,点击拨号界面,会跳转到手机拨号页面进行电话拨打. WXML:本页面号码为虚拟号码,请填写 ...

  6. 分享下自己写的一个微信小程序请求远程数据加载到页面的代码

    分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1  思路整理 就是页面加载完毕的时候  请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码  我是改的 onload ...

  7. 微信小程序图标不支持html,微信小程序实现自定义加载图标功能

    效果图 实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...

  8. 微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现

    接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...

  9. 微信授权绑定手机号 java_微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...

  10. 微信小程序开发（2） - 微信小程序实现拍照和录像拍摄功能方法

    微信小程序开发2 - 本文实例讲述了微信小程序实现拍照和录像拍摄功能方法.分享给大家供大家参考,具体如下: 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组 ...

最新文章

  1. 这几年遇到的奇葩程序员（1）
  2. it工程师和码农的区别_毕业生 | IT行业岗位详解
  3. javascript中==与===的区别
  4. HDU 1559 最大子矩阵
  5. C语言文件操作（一）产生0~M范围内的N个随机数
  6. while和do-while循环结构
  7. semantic ui要装什么才能使用
  8. OpenJudge NOI 1.8 25:螺旋加密
  9. x·dy＋y²·sinx·dx＝0
  10. 3乘3魔方第四步_【三阶魔方 - 初学】LBL第四步：顶层朝向
  11. 汽车维修企业管理【14】
  12. a8处理器相当于骁龙几_曾受人追捧的A8处理器，放在现在是什么水平了？
  13. NAACL 2022 | 具有元重加权的鲁棒自增强命名实体识别技术
  14. QT4.6.3在TQ2440上的移植
  15. mac mini u盘安装系统_用u盘安装win7系统详细步骤
  16. How to GROUD?
  17. 许嵩音乐智能问答系统微信小程序之音乐播放器
  18. ROS报错Error：cannot launch node of type [map_server/map_server]
  19. 核磁共振测试谱图解析(一)
  20. 重新创建“ Design Samsung”网格加载效果

热门文章

  1. IPTV 行业机顶盒EPG关键点
  2. duilib菜单动态添加
  3. 微信数据解密-dat查看-免费dat转图片
  4. Spring实战（第5版）核心知识点总结
  5. Java Keytool工具简介
  6. 一键查询快递物流单号，分析提前签收
  7. 阿里云Linux安装软件镜像源
  8. zoom下载官网android最新,Zoom手机版app下载安装包-Zoom手机版安卓软件下载v5.0-后壳下载...
  9. CUGBACM130715 组队赛 BNU Curvy Little Bottles - from lanshui_Yang
  10. 阿里矢量图库icomoon的icon引用方法