注册与登录（手机注册登录）
预览地址：https://v4pre.h5sys.cn/play/DVp4Gt7P?phone=1
·注册
第一步 搭建UI
第二步 获取图片验证码
首先判断输入的手机号类型是否为手机，如果类型为手机(11位的数)，则包含图片验证码的绝对定位容器可见。接下来再通过用户数据库获取图片验证码，并把图片验证码 ID 和图片验证码图片保存起来，在获取短信验证码时会用到。
第三步 获取短信验证码
在具体应用中，考虑到验证码计算结果可能会出错的情况，可以根据返回的发送结果去执行不同的动作，如果验证码错误，则需要重新获取图片验证码。
第四步 手机注册
通过用户数据库发起手机注册，提交用户已填写的手机号、短信验证码、昵称及密码，为保证所提交信息内容合法且非空，可以在发起手机注册前加上非空判断。
·登录
通过用户数据库发起手机密码登录，这里要考虑登录成功和登录失败两种情况
·保留登录状态
第一步 设置cookie
用户登录成功之后，服务端会返回用户信息，同时也会向客户端设置一个cookie，用来存储当前用户的登录令牌（这个登录凭证是后台生成的一个随机字符串，对应当前用户记录，但不包含任何用户信息）。
第二步 读取cookie
在本案例中，我们设置页面显示的时候去获取用户信息，判断用户是否为匿名用户，如果不是匿名用户，则 cookie中已存在该用户的登录令牌，直接获取用户信息发起登录即可；如果是匿名用户，则需要发起用户注册登录来获取令牌。
·退出登录
退出登录只需要利用用户数据表的退出登录功能即可回到登录页。退出登录后用户下次进入网页需要重新登录。
注册与登录（邮箱注册登录）
预览地址：https://v4pre.h5sys.cn/play/DVp4Gt7P?email=1
邮箱注册的步骤与手机注册的步骤基本相同，即获取图片验证码-->获取邮箱验证码-->注册
·注册
第一步 搭建UI
第二步 获取图片验证码
首先判断输入的邮箱类型是否为邮箱，如果类型为邮箱，则包含图片验证码的绝对定位容器可见。接下来再通过用户数据库获取图片验证码，并把图片验证码 ID 和图片验证码图片存起来，在获取邮箱验证码时会用到。
第三步 获取邮箱验证码
在具体应用中，考虑到验证码计算结果出错的情况，可以根据返回的发送结果去执行不同的动作，如果验证码错误，则需要重新获取图片验证码。
下图是发送至我们邮箱的邮箱验证码。
第四步 邮箱注册
通过用户数据库发起邮箱注册，提交用户已填写的邮箱号、 邮箱验证码、昵称及密码，为保证所需提交信息的内容合法且非空，可以在发起邮箱注册前加上非空判断。
·登录
通过用户数据库发起邮箱登录，这里需要考虑登录成功和登录失败两种情况
注册与登录（手机验证码登录）
预览地址：https://v4pre.h5sys.cn/play/DVp4Gt7P?code=1
手机验证码登录与手机登录、邮箱登录共同点是仍然需要获取图片验证码和短信验证码；不同之处在于获取短信验证码时的类型应选为“登录验证”而不是之前的注册验证，另外最后在登录时，用户数据库应发起手机验证码登录。
第一步 搭建UI
第二步 获取图片验证码
首先判断输入的手机类型是否为手机，如果类型为手机，则包含图片验证码的绝对定位容器可见。接下来再通过用户数据库获取图片验证码，并把图片验证码 ID 和图片验证码图片存起来，在获取短信验证码时会用到。
第三步 获取短信验证码
在具体应用中，考虑到验证码计算结果可能会出错的情况，可以根据返回的发送结果去执行不同的动作，如果验证码错误，则需要重新获取图片验证码。在这里要注意把获取短信验证码的类型选为登录验证。
第四步 手机验证码登录
通过用户数据库发起手机验证码登录，提交用户已填写的手机号、短信验证码即可完成手机验证码登录。
微信登录与登录后绑定手机
预览地址：https://v4pre.h5sys.cn/play/DVp4Gt7P?wechat=1
·微信登录
微信登录只需要通过用户数据库发起微信公众号登录，登录成功后即可获取到用户的openid，如果还需要获取到用户的其他信息，例如头像、昵称等，则要在配置中的授权方式一栏选择获取大权限。
·微信登录后绑定手机
微信登录后绑定手机的步骤与手机注册的步骤基本相同，即获取图片验证码"获取短信验证码"绑定手机，在获取短信验证码时要注意把获取短信验证码的类型选为绑定手机验证。
第一步 搭建UI
第二步 获取图片验证码
首先判断输入的手机号类型是否为手机，如果类型为手机(11位的数)，则包含图片验证码的绝对定位容器可见。接下来再通过用户数据库获取图片验证码，并把图片验证码 ID 和图片验证码图片保存起来，在获取短信验证码时会用到。
第三步 获取短信验证码
在具体应用中，考虑到验证码计算结果可能会出错的情况，可以根据返回的发送结果去执行不同的动作，如果验证码错误，则需要重新获取图片验证码。
第四步 绑定手机
通过用户数据库绑定手机，提交用户已填写的手机号、短信验证码，即可实现微信登录后绑定手机的功能。
在这里要注意：微信绑定手机后，用户的主ID仍然是微信的openid。例如：我们在微信登录绑定手机后，向新建的测试数据库提交一条测试数据，提交成功后该数据库的提交用户字段依然是微信的openid，而非手机号。
注意：微信登录、登录后绑定手机均需要在微信中操作。
【附】案例下载链接：https://latest.ivx.cn/ih5/app/template/download?id=100
来源：oschina
链接：https://my.oschina.net/u/4381645/blog/4658030