微信小程序-通用页面

登录

效果图如下:

登录页面布局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里面;

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

找回密码

页面效果:

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

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190830A04EVC00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券