微信小程序里有丰富的表单组件，可通过这些组件的使用，来完成登录界面、手机号注册界面、企业注册界面的注册微信小程序的设计。在设计过程中会用到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、单击“项目”导航，然后点击“预览”按钮，可以在手机上预览微信小程序，扫描二维码，也可以上传微信小程序，如图所示。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。