用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序开发-短信注册功能

天下雪 2017-2-7 00:07

作者:百家晓东,来自原文地址微信小程序开发,实现手机号注册的功能模块,去除了网络请求,网络请求的地方可以使用wx提供的网络请求的API完成。[效果展示][目录结构][贴代码]register.wxmlview class="contai ...

作者:百家晓东,来自原文地址 
微信小程序开发,实现手机号注册的功能模块,去除了网络请求,网络请求的地方可以使用wx提供的网络请求的API完成。 
[效果展示]

[目录结构]

[贴代码] 
register.wxml

  1. <view class="container" style="height: {{windowHeight}}px">
  2. <!--第一步-->
  3. <view wx:if="{{step == 1}}" id="firstStep_Pad" class="container" style="height:auto;">
  4. <text class="grayLineHeng" style="margin-top:55rpx" />
  5. <view style="width:{{windowWidth}}px;" class="container-hang">
  6. <text style="color:#c9c9c9;margin:33rpx 0 33rpx 0; width:460rpx;text-align:center;">国家/地区</text>
  7. <text class="grayLineShu" style="height:auto"></text>
  8. <text style="color:#000;width:100%;text-align: center;margin-top:33rpx">{{location}}</text>
  9. </view>
  10. <text class="grayLineHeng" />
  11. <view class="container-hang" style="width:{{windowWidth}}px;">
  12. <image src="{{icon_phone}}" style="width:49rpx; height: 49rpx; margin:28rpx"/>
  13. <input id="input_phoneNum" bindchange="input_phoneNum" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="请输入电话号码" type="number"/>
  14. </view>
  15. <text class="grayLineHeng" />
  16. </view>
  17. <!--第二步-->
  18. <view wx:if="{{step==2}}" id="secondStep_Pad" class="container" style="height:auto;align-items:flex-start;">
  19. <text style="margin:44rpx; font-size:30rpx">验证码已经发送到您的手机\n如长时间没有收到,请点击“重新获取”</text>
  20. <text class="grayLineHeng" />
  21. <view class="container-hang" style="width:{{windowWidth}}px;">
  22. <image src="{{input_icon}}" style="width:49rpx; height: 49rpx; margin:28rpx"/>
  23. <input bindchange="input_identifyCode" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="请输入验证码" type="number"/>
  24. </view>
  25. <text class="grayLineHeng" />
  26. <button bindtap="reSendPhoneNum" size="mini" style="margin-top:23rpx;margin-right:23rpx">重新获取({{time}}s)</button>
  27. </view>
  28. <!--第三步-->
  29. <view wx:if="{{step==3}}" id="thirdStep_Pad" class="container" style="height:auto;margin-top:23rpx">
  30. <text class="grayLineHeng" />
  31. <view class="container-hang" style="width:{{windowWidth}}px;">
  32. <image src="{{icon_password}}" style="width:49rpx; height: 49rpx; margin:28rpx"/>
  33. <input bindchange="input_password" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="请输入密码" password/>
  34. </view>
  35. <text class="grayLineHeng" />
  36. <view class="container-hang" style="width:{{windowWidth}}px;">
  37. <image src="{{icon_password}}" style="width:49rpx; height: 49rpx; margin:28rpx"/>
  38. <input bindchange="input_rePassword" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="请再次输入密码" password
鲜花
鲜花 (4)
鸡蛋
鸡蛋

刚表态过的朋友 (4 人)

分享至 : QQ空间
收藏
来自: 原文地址

相关阅读

  • wx_8480dcf021 2017-7-15 17:18
    请问在通过wx.request 发送短信后,如何等待服务器返回值的?因为request是异步执行,直接返回了?