微信小程式組件構建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
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類