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

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

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


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

將會用到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-->


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

更多相關文章
  • 壓縮和解壓縮 最早的:compress/uncompresse 文件名尾碼:.Z 然後是:gzip/gunzip 文件名尾碼:.gz 很久一段gzip是linux的標準壓縮和解壓縮演算法了 然後是:bzip2/bunizip2 文件名尾碼:.bz2 大文件的壓縮比比gzip大一點,但是小文件的壓縮比還 ...
  • 資料庫中存入的是一條一條的用戶信息,現在想取出一個人的個人信息,並封裝為Bean對象,可以使用queryForObject來獲取數據並通過new BeanPropertyRowMapper(Bean.class)將數據轉化為javaBean對象 ...
  • 上一章聊到行式存儲、列式存儲的基本概念,並介紹了 TsFile 是如何存儲數據以及基本概念。詳情請見: 時序資料庫 Apache-IoTDB 源碼解析之文件格式簡介(三) 打一波廣告,歡迎大家訪問IoTDB 倉庫,求一波 Star 。歡迎關註頭條號:列炮緩開局,歡迎關註OSCHINA博客 這一章主要 ...
  • 環境:CentOS7.4 Oracle11.2.0.4(搭建rac集群) 問題描述:在使用exp命令執行導出的時候,部分表提示“EXP-00003: 未找到段 (0,0) 的存儲定義”警告。 問題原因:該問題是因為導出的數據表為空表導致的。Oracle 11GR2當表無數據時,不分配segment, ...
  • 1.所有的索引欄位,如果沒有設置not null,則需要加一個位元組。2.定長欄位,int占4個位元組、date占3個位元組、char(n)占n個字元。3.變長欄位,varchar(n),則有n個字元+兩個位元組。4.不同的字元集,一個字元占用的位元組數不同。latin1編碼的,一個字元占用1個位元組,gbk編 ...
  • 只需要五分鐘,你就可以瞭解到事務及其ACID特性,並且真正地理解MySQL事務隔離級別:未提交讀、提交讀、可重覆讀、可串列化,還有什麼是臟讀、不可重覆讀、幻讀。 ...
  • 本篇博客是Redis系列的第3篇,主要講解下Redis的2種持久化機制:RDB和AOF。 本系列的前2篇可以點擊以下鏈接查看: "Redis系列(一):Redis簡介及環境安裝" 。 "Redis系列(二):Redis的5種數據結構及其常用命令" 1. 為什麼需要持久化? 因為Redis是記憶體資料庫 ...
  • 1、資料庫語言的分類 2、DDL:資料庫定義語言 data Definition language 3、DQL:數據查詢語言 data Query language 4、DQL:數據查詢語言 data Query language 5、常用函數 6、DCL:數據控制語言 (管理用戶許可權)data C... ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...