很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
本文主要内容为微信验证码登录，包括微信验证中的拼图页面等，在线演示：
一、流程图
将整个流程分为三个页面：第一个验证码页面，第二个拼图页面，第三个验证码页面二。
以下将三个页面分开演示：
第一个的作用是获取验证码之前确认手机号的，点击获取验证码时，出现确认手机号弹窗。页面需要有输键盘输入功能，点击文本框，键盘会显示，点击页面别的地方，键盘就隐藏。
第一个页面需要操作的交互点击文本框，键盘上滑显示；点击键盘按钮，输入框显示字符，登录按钮样式改变，出现关闭图标；点击关闭图标，文本框文字改变；点击页面键盘下滑隐藏。
第一步描述：点击输入框，键盘显示；点击页面，隐藏键盘；
第一步操作：选中输入框，新建交互，单击时显示键盘面板，向上滑动效果。
选中页面，新建交互，单击时隐藏键盘面板，向下滑动效果：
第二步描述：文本框中有字的时候，登录按钮样式需要改变，显示关闭图标；文本框没有字的时候，按钮样式恢复，隐藏关闭图标。点击关闭图标，输入框文字改变为初始的“请输入验证码”；
第二步操作：选中登录按钮，设置交互样式，设置填充颜色为绿色，字色为白色。
选中输入框，在文本改变交互下添加动作（文本改变交互看上一篇文章：键盘输入）；在输入文本框的文字长度不为0的情形下添加设置选中登录按钮值为真的动作，添加新动作，显示关闭图标。
在输入文本框的文字长度=0的情形下添加设置选中登录按钮值为假的动作，添加隐藏关闭图标的动作。
描述：关闭图标显示时，点击关闭图标，输入框文本变为默认文本，同时关闭图标隐藏，登录按钮样式改变为未选中状态；
操作：选中关闭图标，新建交互单击时，设置输入框文本的值为“请输入验证码”；隐藏关闭图标，设置登录按钮选中值为假。
第三步描述：点击获取验证码按钮，出现确认手机号弹窗，点击弹窗取消隐藏弹窗，点击好，跳转到拼图页面；
第三步操作：选中确认手机号弹窗的取消，新建交互，单击时隐藏确认手机号弹窗。
选中确认手机号弹窗的好，新建交互，单击时打开链接到拼图页面。
在此页面进行拼图操作，拖动按钮时进行横向移动操作。
拖动蓝色按钮，按钮和小拼图一起横向移动，移动到阴影处成功，可以有十个坐标的误差。
第一步描述：将按钮和小拼图都转换成动态面板，因为动态面板有拖动和拖动结束的交互；
第一步操作：选中小拼图，右键单击，下方有转换为动态面板；选中按钮，右键单击，下方有转换为动态面板。
第二步描述：拖动按钮时，设置按钮和拼图两个面板随着拖动而横向移动，移动必须在一定的区域范围内，区域范围是按钮整体在大图的横向坐标以内。
区域范围的计算：从图中看出区域范围的开始位置是默认位置，是按钮左边的x坐标值，区域范围的结尾位置是按钮右边和大图右边的x坐标一样的位置。
已知按钮左边x坐标值是X，大图左边坐标值是Y，大图宽度是S，那么区域范围开始位置是X，区域范围结尾是大图左边x坐标值加图片的宽度，是Y+S，区域范围是X~Y+S。
原型中按钮左边坐标X=89,大图坐标Y=67，大图宽度S=276。
第二步操作：选中按钮，设置移动当前原件（按钮），跟随水平移动，设置边界范围是89~343。
描述：拼图的边界范围和按钮的有一些小差别，因为这两个动态面板大小不一样，他们排列方式是中部对齐，也就是拼图的起始位置就比按钮的位置往右偏十个坐标，所以拼图的起始坐标需要+10，结束坐标需要-10；
操作：选中按钮，设置移动拼图，跟随水平移动，设置边界范围是99~333。
描述：当按钮拖动结束时，需要判断拼图的坐标是不是和阴影部分的坐标重合。拖一条辅助线与阴影坐标重合，发现阴影坐标x是258，当拼图移动到坐标x=258时，拼图成功。
但是我们允许有十个坐标的误差，也就是可以在阴影前十个坐标和阴影后十个坐标之间就判断是成功的。那么拼图的坐标在248~268之间，就认为拼图是成功的。
因为我们拖动的是按钮，当拖动结束时针对的也是按钮，所以我们要判断按钮x坐标和阴影的x坐标。
按钮x坐标比拼图x坐标往左十个坐标，按钮x坐标=拼图x坐标-10，判断按钮x坐标的正确范围将拼图坐标范围都-10就可以了，所以按钮的坐标在238~258之间，就认为拼图是成功的。
当按钮拖动结束时，判断按钮坐标范围，如果坐标范围在238~258之间，说明拼图成功，显示成功弹窗。若是不在238~258之间，拼图失败，显示失败提醒。
当拼图成功后，显示成功提示，等待几秒会跳转到第三个页面，获取验证码页面；当拼图失败后，显示失败提示，当再次拖动按钮，失败提示会隐藏。
操作：选中按钮，新建交互，拖动结束时，显示成功显示，添加情形，按钮的x坐标值（this.x）的值在238~258之间。
显示成功提示：
等待2s，跳转到验证码登录页面：
在拖动结束交互上添加新的情形2，当按钮x坐标小于238或者大于258时，显示失败显示。
失败后，会再次移动拼图，在移动拼图的时候，需要隐藏失败提示。选中按钮，在拖动时交互下添加新的动作，隐藏失败显示。
这是拼图成功后跳转的页面，主要功能就是获取验证码，登录到聊天界面。
点击输入框，键盘显示，点击获取按钮，60s倒计时。填写验证码，验证填写是否正确，正确显示正确提示，跳转聊天界面，错误显示错误提示。
键盘显示隐藏详情参照第一个页面，这个页面忽略。
第一步描述：点击获取验证码按钮，出现确认手机号弹窗，点击弹窗取消隐藏弹窗，点击好，隐藏确认手机号弹窗，显示发送成功弹窗，等待1s，隐藏发送成功弹窗，开始60s倒计时；
第一步操作：选中获取按钮，新建交互，单击时显示确认手机号弹窗。
选中确认手机号弹窗的取消，新建交互，单击时隐藏确认手机号弹窗。
选中确认手机号弹窗的好，新建交互单击时隐藏确认手机号弹窗。显示发送成功弹窗；等待1s；隐藏发送成功弹窗。60s倒计时查看上篇文章，此处忽略。
第二步描述：输入验证码，点击登录时对验证码进行判断，如果验证码正确，跳转到聊天界面；如果验证码错误，显示错误提示弹窗；
第二步操作：假设验证是123456，选中登录按钮，新建交互单击时，打开新的页面链接。添加情形，输入文本框的文件文字==123456。
添加情形2，输入文本框的文件文字！=123456。添加动作显示验证码错误弹窗：
第三步描述：验证码错误出现错误弹窗后，点击取消隐藏错误弹窗，输入框文本变为默认“请输入验证码”；
第三步操作：选中错误弹窗的取消，新建交互，单击时隐藏错误弹窗；设置输入框文本值为“请输入验证码”。
这样操作完，微信验证码登录的所有步骤就完成了。
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
Powered by QINGMOB PTE. LTD. © 2010-2022 上海青墨信息科技有限公司 沪ICP备2021034055号-6
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)