企業用戶表單登錄註冊微信小程序設計開發

企業用戶表單登錄註冊設計開發

微信小程序里有豐富的表單組件，可通過這些組件的使用，來完成登錄界面、手機號註冊界面、企業註冊界面的註冊微信小程序的設計。在設計過程中會用到view視圖容器組件、button按鈕組件、image圖片組件、input輸入框組件、checkbox多項選擇器組件、switch開關選擇器、navigator頁面鏈接組件等的使用，將這些組件進行界面的布局設計即可完成表單登錄註冊設計。

在登錄表單里，輸入帳號、密碼進行登錄，在帳號、密碼輸入框里都有友好的提示信息；「登錄」按鈕默認是灰色不可能狀態，只有在輸入內容後，才變為可用狀態；在按鈕的下面提供手機快速註冊、企業用戶註冊、找回密碼鏈接。

1、添加一個from項目，只有填寫AppID，from微信小程序才能在手機上遊覽小姑，如圖所示。

2、在App.json里添加「pages/login/login」 「pages/mobile/mobile」 "pages/company/company" 3個文件目錄，並刪除默認的文件目錄以及相應的文件夾，如圖所示。

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

3、在「pages/company/company」文件里，進行用戶名、密碼、企業全稱、聯繫人姓名、手機號、簡訊驗證碼錶單項和「註冊」按鈕及同意註冊協議的布局設計，具體見文件里的wxml布局代碼如下：

4、在「pages/company/company」文件里，進行用戶名、密碼、企業全稱、聯繫人姓名、手機號、簡訊驗證碼錶單項和「註冊」按鈕及同意註冊協議的布局設計樣式，具體見文件里的wxss樣式代碼如下：

運行上述代碼企業用戶註冊界面效果圖如下：

5、當輸入用戶名後，「註冊」按鈕變為可用狀態，同時將表單內容提交到company.js後台，保存到緩存中，代碼如下：

6、在「company.json」文件里，添加「navigationBarTitleText」：「企業用戶註冊」屬性，設置導航標題為「企業用戶註冊」。

7、單擊「項目」導航，然後點擊「預覽」按鈕，可以在手機上預覽微信小程序，掃描二維碼，也可以上傳微信小程序，如圖所示。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！