微信小程式組件構建UI界面小練手 —— 表單登錄註冊微信小程式

来源:https://www.cnblogs.com/MilkoSilver/archive/2020/02/12/12300752.html
-Advertisement-
Play Games

通過微信小程式中豐富的表單組件來完成登錄界面、手機快速註冊界面、企業用戶註冊界面的微信小程式設計。 ...


通過微信小程式中豐富的表單組件來完成登錄界面、手機快速註冊界面、企業用戶註冊界面的微信小程式設計。

將會用到view視圖容器組件、button按鈕組件、image圖片組件、input輸入框組件、checkbox多項選擇器組件、switch開關選擇組件、navigator頁面連接組件等。

 

Ⅰ、登錄設計

登錄表單中，需輸入賬號、密碼進行登錄，在賬號、密碼輸入框中都有友好的提示信息；登錄按鈕預設是灰色不可用狀態，只有輸入內容後，才會變為可用狀態；在登錄按鈕下麵提供手機快速註冊、企業用戶註冊、找回密碼鏈接；界面最下麵是微信、QQ第三方登錄方式。

一、新建一個名為form的項目：

 

 

 二、在app.json文件里添加"pages/login/login" "pages/mobile/mobile" "pages/company/company" 3個文件目錄，並刪除預設的文件目錄以及對應的文件夾：

 

 

 三、在"pages/login/login"文件里，進行賬號密碼輸入框佈局設計，並添加相應的樣式：

（login.wxml）

 1 <!--pages/login/login.wxml-->
 2 <view class="content">
 3   <view class="account">
 4     <view class="title">賬號</view>
 5     <view class="num"><input bindinput="accountInput" placeholder="用戶名/郵箱/手機號" placeholder-style="color:#999999;"/></view>
 6   </view>
 7   <view class="hr"></view>
 8   <view class="account">
 9     <view class="title">密碼</view>
10     <view class="num"><input bindblur="pwdBlur" placeholder="請輸入密碼" password placeholder-style="color:#999999;"/></view>
11     <view class="see">
12       <image src="/images/see.jpg" style="width:42px;height:30px;"></image>
13     </view>
14   </view>
15 <view class="hr"></view>
16 </view>

（login.wxss）

 1 /* pages/login/login.wxss */
 2 .content{
 3   margin-top: 40px;
 4 }
 5 .account{
 6   display: flex;
 7   flex-direction: row;
 8   padding-left: 20px;
 9   padding-top: 20px;
10   padding-bottom: 10px;
11   width: 90%;
12 }
13 .title{
14   margin-right: 30px;
15   font-weight: bold;
16 }
17 .hr{
18   border: 1px solid #cccccc;
19   opacity: 0.2;
20   width: 90%;
21   margin: 0 auto;
22 }
23 .see{
24   position: absolute;
25   right: 20px;
26 }

效果圖如下：

 

 

 

四、在"pages/login/login"文件中進行登錄按鈕、手機快速註冊、企業用戶註冊、找回密碼以及第三方登錄佈局的設計，並添加相應的樣式：

（login.wxml）

 1 <!--pages/login/login.wxml-->
 2 <view class="content">
 3   <view class="account">
 4     <view class="title">賬號</view>
 5     <view class="num"><input bindinput="accountInput" placeholder="用戶名/郵箱/手機號" placeholder-style="color:#999999;"/></view>
 6   </view>
 7   <view class="hr"></view>
 8   <view class="account">
 9     <view class="title">密碼</view>
10     <view class="num"><input bindblur="pwdBlur" placeholder="請輸入密碼" password placeholder-style="color:#999999;"/></view>
11     <view class="see">
12       <image src="/images/see.gif" style="width:35px;height:30px;"></image>
13     </view>
14   </view>
15 <view class="hr"></view>
16 <button class="btn" disabled="{{disabled}}" type="{{btnstate}}"bindtap="login">登錄</button>
17 <view class="operate">
18   <view><navigator url="../mobile/mobile">手機快速註冊</navigator></view>
19   <view><navigator url="../company/company">企業用戶註冊</navigator></view>
20   <view>找回密碼</view>
21 </view>
22 <view class="login">
23   <view><image src="/images/wxlogin.gif" style="width:60px;height:40px;"></image></view>
24   <view><image src="/images/qqlogin.gif" style="width:70px;height:50px;"></image></view>
25 </view>
26 </view>

（login.wxss）

 1 .account{
 2   display: flex;
 3   flex-direction: row;
 4   padding-left: 20px;
 5   padding-top: 20px;
 6   padding-bottom: 10px;
 7   width: 90%;
 8 }
 9 .title{
10   margin-right: 30px;
11   font-weight: bold;
12 }
13 .hr{
14   border: 1px solid #cccccc;
15   opacity: 0.2;
16   width: 90%;
17   margin: 0 auto;
18 }
19 .see{
20   position: absolute;
21   right: 20px;
22 }
23 .btn{
24   width: 90%;
25   margin-top: 40px;
26   color: #999999;
27 }
28 .operate{
29   display: flex;
30   flex-direction: row; 
31 }
32 .operate view{
33   margin: 0 auto;
34   margin-top: 40px;
35   font-size: 14px;
36   color: #333333;
37 }
38 .login{
39   display: flex;
40   flex-direction: row;
41   margin-top: 150px;
42 }
43 .login view{
44   margin: 0 auto;
45 }

效果圖如下：

 

 

 五、在"pages/login/login"文件中的js文件里添加accountInput、pwdBlur事件函數，當賬號里輸入內容後，登錄按鈕變為可用狀態：

 1 // pages/login/login.js
 2 Page({
 3   data: {
 4     disabled: true,
 5     btnstate: "default",
 6     account:"",
 7     password:""
 8   },
 9   accountInput: function (e){
10     var content = e.detail.value;
11     console.log(content);
12     if(content!=""){
13       this.setData({disabled:false,btnstate:"primary",account:content});
14     }
15   },
16   pwdBlur: function (e) {
17     var password = e.detail.value;
18     if(password!=""){
19       this.setData({password:password});
20     }
21   }
22 })

效果如下：

 

 Ⅱ、手機號註冊設計

在手機號註冊中，需要設計輸入框用來輸入手機號，設計同意註冊以及進行下一步按鈕。

六、在"pages/mobile/mobile"文件中，進行手機號輸入框佈局設計，並添加相應樣式：

（mobile.wxml）

1 <!--pages/mobile/mobile.wxml-->
2 <view class="content">
3   <view class="hr"></view>
4   <view class="numbg">
5     <view>+86</view>
6     <view><input placeholder="請輸入手機號" maxlenge="11" bindblur="mobileblur"/></view>
7   </view>
8 </view>

（mobile.wxss）

 1 /* pages/mobile/mobile.wxss */
 2 .content{
 3   width: 100%;
 4   height: 600px;
 5   background-color: #f2f2f2;
 6 }
 7 .hr{
 8   padding-top: 20px;
 9 }
10 .numbg{
11   border: 1px solid #cccccc;
12   width: 90%;
13   margin: 0 auto;
14   background-color: #ffffff;
15   border-radius: 5px;
16   display: flex;
17   flex-direction: row;
18   height: 50px;
19 }
20 .numbg view{
21   margin-left: 20px;
22   margin-top: 14px;
23 }

效果圖如下：

 

 

 七、在"pages/mobile/mobile"文件中，設計註冊協議和下一步按鈕操作，並添加相應的樣式：

（mobile.wxml）

 1 <!--pages/mobile/mobile.wxml-->
 2 <view class="content">
 3   <view class="hr"></view>
 4   <view class="numbg">
 5     <view>+86</view>
 6     <view><input placeholder="請輸入手機號" maxlenge="11" bindblur="mobileblur"/></view>
 7   </view>
 8   <view>
 9     <view class="xieyi">
10       <icon type="success" color="green" size="18"></icon>
11       <text class="agree">同意</text>
12       <text class="opinion">中國用戶註冊協議</text>
13     </view>
14   </view>
15   <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">下一步</button>
16 </view>

（mobile.wxss）

 1 /* pages/mobile/mobile.wxss */
 2 .content{
 3   width: 100%;
 4   height: 600px;
 5   background-color: #f2f2f2;
 6 }
 7 .hr{
 8   padding-top: 20px;
 9 }
10 .numbg{
11   border: 1px solid #cccccc;
12   width: 90%;
13   margin: 0 auto;
14   background-color: #ffffff;
15   border-radius: 5px;
16   display: flex;
17   flex-direction: row;
18   height: 50px;
19 }
20 .numbg view{
21   margin-left: 20px;
22   margin-top: 14px;
23 }
24 .xieyi{
25   margin-top: 15px;
26   margin-left: 15px;
27 }
28 .agree{
29   font-size: 13px;
30   margin-left: 5px;
31   color: #666666;
32 }
33 .opinion{
34   font-size: 13px;
35   color: #000000;
36   font-weight: bold;
37 }
38 .btn{
39   width: 90%;
40   margin-top: 30px;
41 }

效果：

 

 

 八、在"pages/mobile/mobile"文件中，添加mobileblur事件，如果輸入手機號，下一步按鈕變為可用狀態：

 1 // pages/mobile/mobile.js
 2 Page({
 3   data: {
 4     disabled: true,
 5     btnstate: "default",
 6     mobile:""
 7   },
 8   mobileblur: function (e) {
 9     var content = e.detail.value;
10     if(content!=""){
11       this.setData({ disabled: false, btnstate: "primary", account: content });
12     }
13     else{
14       this.setData({disabled:true,btnstate:"default",mobile:""});
15     }
16   }
17 })

效果圖：

 

 Ⅲ、企業用戶註冊設計

 在企業用戶註冊中，有6個表單項：用戶名、密碼、企業全稱、聯繫人姓名、手機號和簡訊驗證碼。還有一個註冊按鈕和同意註冊協議。

九、在"page/company/company"文件中，進行用戶名、密碼、企業全稱、聯繫人姓名、手機號、簡訊驗證碼表單項佈局設計，並添加相應的樣式：

（company.wxml）

 1 <!--pages/company/company.wxml-->
 2 <form bindsubmit="formSubmit" bindreset="formReset">
 3 <view class="content">
 4   <view class="hr"></view>
 5   <view class="item">
 6     <input type="text" name="loginName" placeholder="請設置4-20位用戶名" placeholder-class="holder" bingblur="accountblur"/>
 7   </view>
 8   <view class="item flex">
 9     <input type="text" password name="password" placeholder="請設置5-20位登錄密碼" placeholder-class="holder"/>
10     <switch type="switch" name="switch"/>
11   </view>
12   <view class="item">
13     <input type="text" name="company" placeholder="請填寫工商局註冊名稱" placeholder-class="holder"/>
14   </view>
15   <view class="item">
16     <input type="text" name="userName" placeholder="聯繫人姓名" placeholder-class="holder"/>
17   </view>
18   <view class="mobileInfo">
19     <view class="mobile">
20       <input type="text" name="mobile" placeholder="請輸入手機號" placeholder-class="holder"/>
21     </view>
22     <view class="code">發送驗證碼</view>
23   </view>
24   <view class="item">
25     <input type="text" name="code" placeholder="簡訊驗證碼" placeholder-class="holder"/>
26   </view>
27 </view>
28 </form>

（company.wxss）

 1 /* pages/company/company.wxss */
 2 .content{
 3   width: 100%;
 4   height: 700px;
 5   background-color: #f2f2f2;
 6 }
 7 .hr{
 8   padding-top: 40px;
 9 }
10 .item{
11   margin: 0 auto;
12   border: 1px solid #cccccc;
13   height: 40px;
14   width: 90%;
15   border-radius: 3px;
16   background-color: #ffffff;
17   margin-bottom: 15px; 
18 }
19 .item input{
20   height: 40px;
21   line-height: 40px;
22   margin-left: 10px; 
23 }
24 .holder{
25   font-size: 14px;
26   color: #999999;
27 }
28 .flex{
29   display: flex;
30   flex-direction: row;
31 }
32 .flex input{
33   width: 300px;
34 }
35 item switch{
36   margin-top: 5px;
37   margin-right: 5px;
38 }
39 .mobileInfo{
40   display: flex;
41   flex-direction: row;
42 }
43 .mobile{
44   margin: 0 auto;
45   border: 1px solid #cccccc;
46   height: 40px;
47   width: 50%;
48   border-radius: 3px;
49   background-color: #ffffff;
50   margin-bottom: 15px;
51   display: flex;
52   flex-direction: row;
53   margin-left: 5%; 
54 }
55 .mobile input{
56   margin-top: 8px;
57   margin-left: 10px;
58 }
59 .code{
60   border: 1px solid #cccccc;
61   height: 40px;
62   width: 35%;
63   background-color: #edeeec;
64   border-radius: 3px;
65   text-align: center;
66   margin-left: 10px;
67   line-height: 40px;
68   color: #999999;
69   font-size: 15px;
70   margin-bottom: 15px;
71   margin-right: 5%; 
72 }

效果圖：

 

 十、在"pages/company/company"文件中，設計註冊按鈕和同意註冊協議，並添加相應的樣式：

（company.wxml）

 1 <!--pages/company/company.wxml-->
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux 壓縮和解壓縮
    壓縮和解壓縮 最早的：compress/uncompresse 文件名尾碼：.Z 然後是：gzip/gunzip 文件名尾碼：.gz 很久一段gzip是linux的標準壓縮和解壓縮演算法了 然後是：bzip2/bunizip2 文件名尾碼：.bz2 大文件的壓縮比比gzip大一點，但是小文件的壓縮比還 ...
  • 使用JDBC獲取資料庫中的一條記錄並封裝為Bean
    資料庫中存入的是一條一條的用戶信息，現在想取出一個人的個人信息，並封裝為Bean對象，可以使用queryForObject來獲取數據並通過new BeanPropertyRowMapper(Bean.class)將數據轉化為javaBean對象 ...
  • 時序資料庫 Apache-IoTDB 源碼解析之文件數據塊（四）
    上一章聊到行式存儲、列式存儲的基本概念，並介紹了 TsFile 是如何存儲數據以及基本概念。詳情請見： 時序資料庫 Apache-IoTDB 源碼解析之文件格式簡介（三） 打一波廣告，歡迎大家訪問IoTDB 倉庫，求一波 Star 。歡迎關註頭條號：列炮緩開局，歡迎關註OSCHINA博客 這一章主要 ...
  • Oracle導出警告&ldquo;EXP-00003: 未找到段 (0,0) 的存儲定義&rdquo;解決
    環境：CentOS7.4 Oracle11.2.0.4（搭建rac集群） 問題描述：在使用exp命令執行導出的時候，部分表提示“EXP-00003: 未找到段 (0,0) 的存儲定義”警告。 問題原因：該問題是因為導出的數據表為空表導致的。Oracle 11GR2當表無數據時，不分配segment， ...
  • [MySQL] mysql索引的長度計算和聯合索引
    1.所有的索引欄位，如果沒有設置not null，則需要加一個位元組。2.定長欄位,int占4個位元組、date占3個位元組、char(n)占n個字元。3.變長欄位,varchar(n)，則有n個字元+兩個位元組。4.不同的字元集，一個字元占用的位元組數不同。latin1編碼的，一個字元占用1個位元組，gbk編 ...
  • 五分鐘後，你將真正理解MySQL事務隔離級別！
    只需要五分鐘，你就可以瞭解到事務及其ACID特性，並且真正地理解MySQL事務隔離級別：未提交讀、提交讀、可重覆讀、可串列化，還有什麼是臟讀、不可重覆讀、幻讀。 ...
  • Redis系列(三)：Redis的持久化機制(RDB、AOF)
    本篇博客是Redis系列的第3篇，主要講解下Redis的2種持久化機制：RDB和AOF。 本系列的前2篇可以點擊以下鏈接查看： "Redis系列(一)：Redis簡介及環境安裝" 。 "Redis系列(二)：Redis的5種數據結構及其常用命令" 1. 為什麼需要持久化？ 因為Redis是記憶體資料庫 ...
  • mysql資料庫技術1——基本的增刪查改的sql語句
    1、資料庫語言的分類 2、DDL：資料庫定義語言 data Definition language 3、DQL：數據查詢語言 data Query language 4、DQL：數據查詢語言 data Query language 5、常用函數 6、DCL：數據控制語言 （管理用戶許可權）data C... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類