中繼器使用場景(五):真實環境注冊、多身份登錄、找回密碼
在設計登錄注冊模塊時,多用戶登錄和找回密碼的交互一直是設計難點之一;這篇文章給大家講解,如何通過中繼器完成注冊登錄的設計。
原型交互中的注冊、登錄、找回密碼,已經是很成熟的案例了,大部分都是用預設用戶名、密碼,通過條件判斷來實現交互效果;或是通過全局變量以(用戶名:密碼)的形式進行存儲和判斷。
這些做法的問題就在于:
1.客戶無法自主體驗真實環境注冊、登錄、找回密碼功能,要按照原型制作者的要求輸入設定好的用戶名和密碼來體驗。
2.對于例如像微信app,用戶名可以是手機、郵箱、微信號、qq號,這樣的多身份登錄,上述辦法就顯得很吃力了。比如下圖這種方式:
實際利用中繼器,非常方便實現真實的注冊、多身份登錄、找回密碼等功能,不用給客戶設置條件,完全是真實條件下的開發注冊。
演示效果如下:
交互功能:
- 用戶真實注冊、登錄,不用提前預設條件
- 對已經注冊的用戶名、郵箱地址、手機號自主排重,即不能重復注冊
- 登錄和找回密碼功能,實時驗證所填信息是否正確
元件準備:
1、頁面中拖入動態面板dz,并設置3個state,分別為dl、zc、zhmm
dl:登錄界面,元件分布如下:
zc:注冊界面,元件分布如下:
zhmm:找回密碼界面,元件分布如下:
2、在頁面中(不是在動態面板中)拖入一個中繼器data,中繼器中刪除預設的矩形,無需放入任何元件,只做數據集布置,不放任何數據
添加交互:
首先從注冊界面zc開始添加交互:
本文主要講解中繼器的使用,對于注冊信息諸如用戶名不能包含漢字,字符不能超出12位字符、手機號碼不能少于11位,郵件必須包含@和.com、密碼必須包含大小寫字母、符號、數字不少于兩種組合,等等這些設置,我們在今后的《字符串函數應用場景》中具體講解,在此不做講述,暫不做這些交互。
以username文本框添加交互為例:
以同樣的方法,為phonenumber、e-mai文本框添加交互:
password文本框交互非常簡單:
最后我們為注冊按鈕zhuce添加交互:
接下來為登錄界面dl開始添加交互:
先為兩個文本框usernamedl和passworddl添加交互
接下來為登錄按鈕denglu添加交互
case1的講解:
篩選條件:因為我們的文本框有提示:可以用“用戶名”或“郵件地址”或“手機號”進行登錄,所有我們要手寫篩選條件。要勾選“移除其它篩選”
[[(Item.username==LVAR1&&Item.password==LVAR2)||Item.phonenumber==LVAR1&&Item.password==LVAR2)||(Item.email==LVAR1&&Item.password==LVAR2)]]
其中&&為布爾運算符,意思為and,與
||為布爾運算符,意思為or 或
所以篩選條件的意思為:“用戶名==中繼器中的用戶名”并且“密碼==中繼器中對應的密碼”;或“手機號碼==中繼器中的手機號碼”并且“密碼==中繼器中對應的密碼”或“郵件地址==中繼器中的郵件地址”并且“密碼==中繼器中對應的密碼”
這樣就實現了多身份登錄。
最后為“注冊新用戶”和“找回密碼”添加交互:
為“welcome的關閉按鈕”添加交互
——————————登錄頁面的所有交互完畢————————————
最后為找回密碼界面zhmm開始添加交互:
先為兩個文本框添加交互:
為“提交按鈕”tijiao添加交互:
篩選條件:
[[Item.username==LVAR1&&Item.email==LVAR2]]
其中&&為布爾運算符,意思為and,與
所以篩選條件的意思為:“用戶名==中繼器中的用戶名”并且“郵件地址==中繼器中的郵件地址”;
至此,所有交互完畢。
本文由 @bobowang 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自網絡
剛剛的回復有問題,如果是傳值的話,全局是可以勝任的,但是需要用到修改和更新 就需要中繼器 SORRY
能分享下一源文件嗎
2572598179@qq.com
跨頁面傳值 直接使用全局變量的方式會不會 更加方便一些
樓主,麻煩分享一下源文件,935612434@qq.com
跪求文件源 1211519062@qq.com 謝謝!
跪求源文件。。。。87342777@qq.com
求分享
求個RP文件模板,學習下套用下!471924797@qq.com
做得好細,不知道有沒有rp文件,可以學習下。
花這么大時間做個這么精細的登錄注冊感覺不太值
你好,這個做得太棒了,請問能不能給我這個的原型文件啊,376634185@qq.com,謝謝!
超級棒~感謝細致教學,求rp文件443500559@qq.com,謝謝~
能發發原型嗎,謝謝1195045053@qq.com
能發發原型嗎,謝謝249476157@qq.com
這個確實很花時間,做的不錯
注釋直接在原型上標注的嗎?還是截圖標注的?
做得好細
希望您不介意我太啰嗦