微信小程式車牌號碼模擬鍵盤輸入

来源:https://www.cnblogs.com/iFangHuanrui/archive/2018/11/10/9940272.html
-Advertisement-
Play Games

微信小程式車牌號碼模擬鍵盤輸入練習， 未經允許，禁止轉載，抄襲，如需借鑒參考等，請附上該文章連接。 相關資料參考：https://blog.csdn.net/littlerboss/article/details/79877918； 先來一波預覽圖。 預覽圖片一： 預覽圖二： 預覽圖三： 預覽圖四： ...


 

 

微信小程式車牌號碼模擬鍵盤輸入練習，

未經允許，禁止轉載，抄襲，如需借鑒參考等，請附上該文章連接。

相關資料參考：https://blog.csdn.net/littlerboss/article/details/79877918；

 

先來一波預覽圖。

預覽圖片一：

 

 

預覽圖二：

 

預覽圖三：

 

 預覽圖四：

 

 

預覽圖五：

 

 大概的效果就和原來圖差不多。

 

 

思路解析：車牌號碼由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>
 8 
 9   <view>
10 
11     <view class='licensePlateShow' hidden='{{licensePlateShowHidden}}'>
12       <!-- 遮罩層 -->
13       <view class='licensePlate_Bg' bindtap='licensePlate_close'>
14       </view>
15 
16       <!-- 省份 -->
17       <view class='licensePlate_provinces_Box' hidden='{{licensePlate_provinces_Box}}'>
18         <view class='licensePlate_provincesTist' wx:for='{{licensePlate_provinces}}' bindtap='licensePlate_provinces' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
19         <view class='licensePlate_but' bindtap='licensePlate_close'>關閉</view>
20       </view>
21 
22       <!-- 字母 -->
23       <view class='licensePlate_letter_Box' hidden='{{licensePlate_letter_Box}}'>
24         <view class='licensePlate_letterTist' wx:for='{{licensePlate_letter}}' bindtap='licensePlate_letter' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
25         <view class='licensePlate_letterTist_but'>
26           <view class='licensePlate_but' bindtap='licensePlate_switchDigital'>數字</view>
27           <view class='licensePlate_but' bindtap='licensePlate_delete'>刪除</view>
28           <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
29           <view class='licensePlate_but' bindtap='licensePlate_close'>關閉</view>
30         </view>
31       </view>
32 
33        <!-- 數字 -->
34       <view class='licensePlate_digital_Box' hidden='{{licensePlate_digital_Box}}'>
35         <view class='licensePlate_digitalTist' wx:for='{{licensePlate_digital}}' bindtap='licensePlate_digital' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
36         <view class='licensePlate_digital_but'>
37           <view class='licensePlate_but' bindtap='licensePlate_switchLetter'>字母</view>
38           <view class='licensePlate_but' bindtap='licensePlate_delete'>刪除</view>
39           <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
40           <view class='licensePlate_but' bindtap='licensePlate_close'>關閉</view>
41         </view>
42       </view>
43     </view>
44     
45   </view>
46 </view>

 

wxss：

  1 @import "weui.wxss";
  2 
  3 page{
  4   min-height:100%; 
  5 }
  6 
  7 .wrapper{
  8   width: 750rpx; 
  9   overflow:hidden;
 10 }
 11 
 12 .licensePlateShow{
 13   width: 750rpx; 
 14   min-height: 100%;
 15   position: absolute;
 16   bottom: 0;
 17 }
 18 
 19 .licensePlate_Bg{
 20   min-height: 100%;
 21   width: 750rpx;
 22   position: absolute;
 23   z-index: 40;
 24   overflow: hidden;
 25 }
 26 
 27 .licensePlate_provinces_Box{
 28   width: 750rpx; 
 29   background-color: #d0d4da;
 30   margin: 0 auto;
 31   position: absolute;
 32   bottom: 0;
 33   display: flex;
 34   display: -webkit-flex;
 35   flex-wrap: wrap;
 36   justify-content: flex-start;
 37   /* border-top: 1px solid #abb2bd; */
 38   z-index: 55;
 39 }
 40 
 41 .licensePlate_provincesTist{
 42   flex:15%;
 43   height: 100rpx;
 44   line-height: 100rpx;
 45   margin: 0 auto;
 46   text-align: center;
 47   background-color:#ffffff; 
 48   border-top: 1px solid #abb2bd;
 49   border-left: 1px solid #abb2bd;
 50 }
 51 
 52 .licensePlate_provincesTist:nth-child(6n){
 53   border-right: 1px solid #abb2bd;
 54 }
 55 
 56 .licensePlate_letter_Box{
 57   width: 750rpx; 
 58   background-color: #d0d4da;
 59   margin: 0 auto;
 60   position: absolute;
 61   bottom: 0;
 62   display: flex;
 63   display: -webkit-flex;
 64   flex-wrap: wrap;
 65   justify-content: flex-start;
 66   /* border-top: 1px solid #abb2bd; */
 67   z-index: 55;
 68 }
 69 
 70 .licensePlate_letterTist{
 71   flex:15%;
 72   height: 100rpx;
 73   line-height: 100rpx;
 74   margin: 0 auto;
 75   text-align: center;
 76   background-color:#ffffff; 
 77   border-top: 1px solid #abb2bd;
 78   border-left: 1px solid #abb2bd;
 79 }
 80 
 81 .licensePlate_letterTist:nth-child(6n){
 82   border-right: 1px solid #abb2bd;
 83 } 
 84 
 85 .licensePlate_letterTist:nth-child(26){
 86   border-right: 1px solid #abb2bd;
 87 }
 88 
 89 .licensePlate_letterTist_but{
 90   width: 750rpx;
 91   display: flex;
 92   display: -webkit-flex;
 93   flex-wrap: wrap;
 94   justify-content: flex-start;
 95 }
 96 
 97 .licensePlate_digital_Box{
 98   width: 750rpx; 
 99   background-color: #d0d4da;
100   margin: 0 auto;
101   position: absolute;
102   bottom: 0;
103   display: flex;
104   display: -webkit-flex;
105   flex-wrap: wrap;
106   justify-content: flex-start;
107   /* border-top: 1px solid #abb2bd; */
108   z-index: 55;
109 }
110 
111 .licensePlate_digitalTist{
112   flex:25%;
113   height: 125rpx;
114   line-height: 125rpx;
115   margin: 0 auto;
116   text-align: center;
117   background-color:#ffffff; 
118   border-top: 1px solid #abb2bd;
119   border-left: 1px solid #abb2bd;
120 }
121 
122 .licensePlate_digital_but{
123   width: 750rpx;
124   display: flex;
125   display: -webkit-flex;
126   flex-wrap: wrap;
127   justify-content: flex-start;
128 }
129 
130 .licensePlate_but{
131   flex: 1;
132   height: 100rpx;
133   line-height: 100rpx;
134   text-align: center;
135   color: #ffffff;
136   background-color:#ff6600; 
137   border-top: 1px solid #abb2bd;
138   border-left: 1px solid #abb2bd;
139 }
140 
141 .licensePlate_but:last-child{
142   border-right: 1px solid #abb2bd;
143 }
144 
145 .LicensePlateNumber{
146   width: 750rpx;
147   height: 200rpx;
148   border-bottom: 1rpx solid #abb2bd
149 }

 

js：

  1 Page({
  2 
  3   data: {
  4     licensePlateShowHidden:true,
  5     licensePlate_provinces_Box:true,
  6     licensePlate_letter_Box: true, 
  7     licensePlate_digital_Box: true,
  8     licensePlate_provinces: [
  9     "京", "滬", "浙", "蘇", "粵", "魯", 
 10     "晉", "冀", "豫", "川", "渝", "遼", 
 11     "吉", "黑", "皖", "鄂", "津", "貴", 
 12     "雲", "桂", "瓊", "青", "新", "藏",
 13     "蒙", "寧", "甘", "陝", "閩", "贛", 
 14     "湘"
 15     ],
 16     licensePlate_letter: [
 17       "A", "B", "C", "D", "E", "F",
 18       "G", "H", "L", "J", "K", "L",
 19       "M", "N", "O", "P", "Q", "R",
 20       "S", "T", "U", "V", "W", "X",
 21       "Y", "Z"
 22     ],
 23     licensePlate_digital: [
 24       "1", "2", "3", 
 25       "4", "5", "6",
 26       "7", "8", "9", 
 27       "0"
 28     ],
 29     LicensePlateNumber:'',
 30   },
 31 
 32   // 顯示模擬鍵盤
 33   LicensePlateNumber:function(){
 34     var that = this;
 35     var LicensePlateNumber = this.data.LicensePlateNumber;
 36     var LicensePlateNumberLen = LicensePlateNumber.length;
 37     console.log(LicensePlateNumber, LicensePlateNumberLen)
 38     if (LicensePlateNumberLen == 0){
 39       this.setData({
 40         licensePlateShowHidden: false,
 41         licensePlate_provinces_Box: false,
 42       })
 43     } else if (LicensePlateNumberLen == 1){
 44       this.setData({
 45         licensePlateShowHidden: false,
 46         licensePlate_letter_Box: false,
 47       })
 48     }else{
 49       this.setData({
 50         licensePlateShowHidden: false,
 51         licensePlate_digital_Box: false,
 52       })
 53     }
 54    
 55   },
 56 
 57   // 切換成字母
 58   licensePlate_switchLetter:function(){
 59     this.setData({
 60       licensePlate_provinces_Box:true,
 61       licensePlate_letter_Box:false,
 62       licensePlate_digital_Box: true,
 63     })
 64   },
 65 
 66   // 切換成數字
 67   licensePlate_switchDigital: function () {
 68     var LicensePlateNumber = this.data.LicensePlateNumber;
 69     var LicensePlateNumberLen = LicensePlateNumber.length;
 70     if (LicensePlateNumberLen == 1){
 71       wx.showToast({
 72         title: '車牌號碼第二位必須是字母',
 73         icon: 'none',
 74         duration: 1500,
 75       })
 76     }else{
 77       this.setData({
 78         licensePlate_provinces_Box: true,
 79         licensePlate_letter_Box: true,
 80         licensePlate_digital_Box: false,
 81       })
 82     }
 83   },
 84 
 85 
 86   // 刪除
 87   licensePlate_delete: function (e) {
 88     var LicensePlateNumber = this.data.LicensePlateNumber;
 89     var LicensePlateNumberLen = LicensePlateNumber.length;
 90     var LicensePlateNumberDelete = LicensePlateNumber.split('');
 91     var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(0,-1)
 92     if (LicensePlateNumberDelete.slice(0,-1).length == 1){
 93       this.setData({
 94         licensePlate_provinces_Box: true,
 95         licensePlate_letter_Box: false,
 96         licensePlate_digital_Box: true,
 97       })
 98     } else if (LicensePlateNumberLen == 0 || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(0, -1).length == 0){
 99       this.setData({
100         licensePlate_provinces_Box: false,
101         licensePlate_letter_Box: true,
102         licensePlate_digital_Box: true,
103       })
104     }
105       this.setData({
106         LicensePlateNumber: NewLicensePlateNumber
107       })
108   },
109 
110   // 清空
111   licensePlate_empty: function (e) {
112     this.setData({
113       LicensePlateNumber:'',
114       licensePlate_provinces_Box: false,
115       licensePlate_letter_Box: true,
116       licensePlate_digital_Box: true,
117     })
118   },
119 
120   // 關閉模擬鍵盤
121   licensePlate_close:function(){
122     this.setData({
123       licensePlateShowHidden: true
124     })
125   },
126 
127   // 點擊獲取省份
128   licensePlate_provinces: function (e) {
129     this.setData({
130       LicensePlateNumber: e.target.dataset.licenseplateprovinces,
131       licensePlate_letter_Box: false,
132       licensePlate_digital_Box: true,
133     })
134     console.log(e.target.dataset.licenseplateprovinces)
135   },
136 
137   // 點擊獲取字母
138   licensePlate_letter: function (e) {
139     var LicensePlateNumber = this.data.LicensePlateNumber;
140     var LicensePlateNumberLen = LicensePlateNumber.length;
141     if (LicensePlateNumberLen != 8) {
142       this.setData({
143         LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
144       })
145       console.log(e.target.dataset.licenseplateprovinces)
146     } else {
147       wx.showToast({
148         title: '車牌號碼最多不能超過8位',
149         icon: 'none',
150         duration: 1500,
151       })
152     }
153   },
154 
155   // 點擊獲取數字
156   licensePlate_digital: function (e) {
157     var LicensePlateNumber = this.data.LicensePlateNumber;
158     var LicensePlateNumberLen = LicensePlateNumber.length;
159     if (LicensePlateNumberLen != 8){
160       this.setData({
161         LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
162       })
163       console.log(e.target.dataset.licenseplateprovinces)
164     }else{
165       wx.showToast({
166         title: '車牌號碼最多不能超過8位',
167         icon:'none',
168         duration:1500,
169       })
170     }
171   },
172 
173 
174 })

 

噢了。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql中的prepare介紹和應用
    簡單的用set或者declare語句定義變數，然後直接作為sql的表名是不行的，mysql會把變數名當作表名。在其他的sql資料庫中也是如此，mssql的解決方法是將整條sql語句作為變數，其中穿插變數作為表名，然後用sp_executesql調用該語句。 這在mysql5.0之前是不行的，5.0之 ...
  • 大數據學習路線是什麼？學大數據需要什麼基礎？
    因為大數據前景好，薪資高，很多人想通過參加學習大數據，然後進入大數據行業發展。但是因為大數據的門檻較高，對於學習人員有一定的要求，那麼學習大數據需要什麼基礎知識呢？ 一起來瞭解下對於大數據學習者本身的學歷水平的要求。 目前大多數的機構，對於大數據學習者要求必須是大專學歷以上，而且大專學歷還要求是理工 ...
  • android中的相對路徑
    轉載請標明出處：https://www.cnblogs.com/tangZH/p/9939655.html 1、同個文件夾訪問 D:\Java\main\A.java D:\Java\main\B.java A訪問B的相對路徑為B.java 2、目標文件在其子目錄 D:\Java\A.java D: ...
  • Kotlin入門(33)運用擴展屬性
    進行App開發的時候，使用震動器要在AndroidManifest.xml中加上如下許可權： 讓手機震動的功能用到了震動器Vibrator類，而震動器對象從系統服務VIBRATOR_SERVICE獲得，實現該功能的代碼很簡單，即便用Java書寫也只有以下兩行代碼： 兩行代碼看起來真沒什麼好簡化的了，因 ...
  • android引用arr包
    轉載請標明出處，維權必究：https://www.cnblogs.com/tangZH/p/9939494.html android中引用的包一般分為兩種： 1、jar包 2、arr包 arr包其實帶有res的jar包，而普通的jar包是不帶資源文件的。那麼如何在項目中引用呢？ 1、將arr包複製到 ...
  • web前端篇（2）—— 前端技術介紹
    前文瞭解了什麼是前端，那麼前端技術到底有哪些呢？最核心的就這三個： html/html5 css/css3 javascript 什麼是HTML HyperText Markup Language，超文本標記語言 ...
  • 一個簡單的動態頁面（我的第一個博客）
    2018-11-10 今天是我第一次寫博客，因為沒經驗嘛，我就隨便寫寫，我也希望自己以後能堅持寫下去，不為別的，就為了自己能夠更好地學習編程，能夠追隨行業大牛的腳步，從此贏取白富美，走上人生巔峰（額，理想遠大呵！） 好吧，步入正題，因為目前在學java,加了一些培訓機構的群，跟著做了一個小項目，就是 ...
  • sass和stylus1px解決方案
    1.sass 1 @charset "utf-8"; 2 /** 3 * @module 背景與邊框 4 * @description 為元素添加邊框（包括1px邊框） 5 * @method border 6 * @version 2.0.0 7 * @param {String} $border ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類