微信小程序-通用页面

登录

效果图如下：

登录页面布局wxml代码：

针对此页面中定义了4个动态属性，

主要代码片段：

点击登录时，动态设置data属性值，改变登录按钮文本，背景色，显示loading动画，不可点击

登录成功后，重置登录按钮效果

校验用户输入格式对错；

验证邮箱手机号码的正则表达式

用户输入格式无误，校验用户输入的信息是否正确，这里只是把用户名写死在代码中，做个演示，正式开发需要调取后台登录接口，使用wx.request方式获取接口数据

最后提交数据到下一个页面，这里如果提交到下一个页面的参数比较多，可以发送一个json格式的字符串，但首先一定要将param转义为string类型；

下一个页面获取参数的方式如下：

注册

页面效果：

页面布局代码：

主要代码片段：

点击注册时，动态设置data属性值，改变注册按钮文本，背景色，显示loading动画，设置不可点击

注册成功后，重置注册按钮效果

检验输入的手机号码及密码格式是否正确

倒计时获取手机短信验证码效果，注意在setInterval()中要重新定义this指向，使用var that = this，代替指向当前页面的page对象；

校验手机短信验证码是否正确，这里正式开发同样需要调取后台验证接口，这里只是写死在代码中作为效果演示；

细节：因为小程序不能操作dom元素，所以是无法在点击获取验证码按钮后通过document.getElementById(username).value获取手机号码;所以这里需要对手机号码加一个绑定事件bindchange，当输入框内容发生改变时将用户输入内容存放到全局data–>phoneNum里面;

最后就是将用户的输入内容提交

找回密码

页面效果：

找回密码原型基本和注册页面差不多，所以直接贴上所有代码：

细节：找回密码多了一个处理流程，需要检验当前手机号码是否注册过；

点下在看，小编绩效涨五毛