<address id="fvpxj"><progress id="fvpxj"><font id="fvpxj"></font></progress></address>
    <address id="fvpxj"></address>

      <address id="fvpxj"><progress id="fvpxj"></progress></address>
      <sub id="fvpxj"></sub>

      <address id="fvpxj"></address>

        <track id="fvpxj"><big id="fvpxj"></big></track>

          <address id="fvpxj"><big id="fvpxj"><font id="fvpxj"></font></big></address>

          <dl id="fvpxj"><em id="fvpxj"><form id="fvpxj"></form></em></dl>

            随笔- 25  评论- 1  文章- 0 

            完整且易读的微信小程序的注册页面(包含倒计时验证码、获取用户信息)

            1、页面展示

            2、wxml代码

            <!--pages/register/register.wxml-->
            <scroll-view>
              <image src='/images/register.png' mode='widthFix' class="topImage"></image>
                <view class='input-top'>
                  <input id="telphone"  maxlength='11' type="text" placeholder="请输入手机号"  bindinput="inputPhoneNum"/>
                  <text wx:if="{{!send}}" bindtap='sendMsg' class="sendMsg">获取验证码</text>
                  <text wx:if="{{send}}" class="sendMsg" bindtap="sendMsg">{{second+"s"}}</text>
                </view>
                <view class="input-buttom">
                  <input id="captcha"  type="number" maxlength="4" placeholder="请输入4位验证码" bindinput="inputCode"/>
                </view>
                <button  class="btn" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo" lang="zh_CN">立即用伞</button>
              <view class='protocol'>
                <text class="protocol-left">点击立即用伞即表示同意</text>
                <text class="protocol-right">《共享雨伞租赁服务协议》</text>
              </view>
            </scroll-view>

            3、wxss代码

            page{
              background: #f0eff4;
            }
            
            .topImage {
              width: 100%;
              height: auto;
            }
            
            .input-top, .input-buttom {
              font-size: 30rpx;
              padding-left: 30rpx;
              margin: 0rpx 20rpx;
              background-color: white;
              height: 70rpx;
            }
            
            .input-top {
              flex-direction: row;
              display: flex;
              justify-content: space-between;
              margin-bottom: 1px;
              margin-top: 20rpx;
            }
            
            #telphone, #captcha {
              height: 70rpx;
            }
            
            .sendMsg {
              line-height: 70rpx;
              margin-right: 30rpx;
              color: #f9b400;
            }
            
            .btn {
              margin: 0rpx 20rpx;
              background-color: #f9b400;
              color: white;
              margin-top: 20rpx;
              font-size: 30rpx;
              opacity:0.8
            }
            
            /* 下方协议开始 */
            .protocol{
              text-align: center;
            }
            .protocol-left {
              color: #333;
              font-size: 25rpx;
            }
            
            .protocol-right {
              font-size: 23rpx;
              color: #f9b400;
            }
            /* 下方协议结束 */
            

            4、js代码

            Page({
            
              //页面的初始数据
              data: {
                send: false, //是否已经发送验证码
                second: 120, //验证码?#34892;?#26102;间
                phoneNum: '', //用户输入的电话号码
                code: '', //用户输入的验证码
              },
            
              //?#31508;?#20837;手机号码后,把数据存到data中
              inputPhoneNum: function(e) {
                let phoneNum = e.detail.value;
                this.setData({
                  phoneNum: phoneNum,
                })
              },
            
              //前台校验手机号
              checkPhoneNum: function(phoneNum) {
                let str = /^(1[3|5|8]{1}\d{9})$/;
                if (str.test(phoneNum)) {
                  return true;
                } else {
                  //提示手机号码格式不正确
                  wx.showToast({
                    title: '手机号格式不正确',
                    image: '/images/warn.png',
                  })
                  return false;
                }
              },
            
              //调用发送验证码接口
              sendMsg: function() {
                var phoneNum = this.data.phoneNum;
                if (this.checkPhoneNum(phoneNum)) {
                  wx.request({
                    url:  '写自己的后台请求发送验证码?#26790;蔝RL',
                    method: 'POST',
                    data: {
                      telphone: phoneNum,
                    },
                    header: {
                      "Content-Type": "application/x-www-form-urlencoded"
                    },
                    success: (res) => {
                      if (获取验证码成功) {
                        //开始倒计时
                        this.setData({
                          send: true,
                        })
                        this.timer();
                      } else {
                        //提示获取验证码失败
                        wx.showToast({
                          title: '获取验证码失败',
                          image: '/images/warn.png',
                        })
                      }
                    },
                  })
                }
              },
            
              //一个计时器
              timer: function() {
                let promise = new Promise((resolve, reject) => {
                  let setTimer = setInterval(
                    () => {
                      this.setData({
                        second: this.data.second - 1
                      })
                      if (this.data.second <= 0) {
                        this.setData({
                          second: 60,
                          send: false,
                        })
                        resolve(setTimer)
                      }
                    }, 1000)
                })
                promise.then((setTimer) => {
                  clearInterval(setTimer)
                })
              },
            
              //?#31508;?#23436;验证码,把数据存到data中
              inputCode: function(e) {
                this.setData({
                  code: e.detail.value
                })
              },
            
              //点击立即用伞按钮后,获取微信用户信息存到后台
              //(问题缺陷:用户更改个人信息后,后台拿到的还是旧数据,不过用户信息最重要的还是openid和用户填写的手机号,其他都不重要)
              onGotUserInfo: function(e) {
               
                // TODO 对数据包进行签名校验
                //前台校验数据
                if (this.data.phoneNum === '' || this.data.code===''){
                  wx.showToast({
                    title: "请填写手机号码和验证码",
                    image: '/images/warn.png',
                  })
                }
                //获取用户数据,(备注:?#20197;?#29992;户一进入小程序就已经自动把openId获取到,然后放到缓存里)
                var userInfo = {
                  nickName: e.detail.userInfo.nickName,
                  avatarUrl: e.detail.userInfo.avatarUrl,
                  gender: e.detail.userInfo.gender,
                  phoneNum: this.data.phoneNum,
                  openId: wx.getStorageSync('openid')  
                }
                //获取验证码
                var code = this.data.code;
            
               
            
                //用户信息存到后台
                wx.request({
                  url:  '写自己的后台请求注册URL',
                  method: 'POST',
                  data: {
                    telphone: userInfo.phoneNum,
                    code: code,
                    nickName: userInfo.nickName,
                    gender: userInfo.gender,
                    openId: userInfo.openId,    
                  },
                  header: {
                    "Content-Type": "application/x-www-form-urlencoded"
                  },
                  success: (res) => {
                    if (如果用户注册成功) {
                      console.log("【用户注册成功】");
                      wx.setStorage({
                        key: "registered",
                        data: true
                      });
                      wx.redirectTo({
                        url: '../user/user?orderState=0'
                      });
                    } else {
                      console.error("【用户注册失败】:" + res.data.resultMsg);
                      wx.showToast({
                        title: res.data.resultMsg,
                        image: '/images/warn.png',
                      })
                    }
                  }
                })
              },
            
            })
            posted on 2019-05-22 08:26 华哒妹妹 阅读(...) 评论(...) 编辑 收藏

            加拿大app

              <address id="fvpxj"><progress id="fvpxj"><font id="fvpxj"></font></progress></address>
              <address id="fvpxj"></address>

                <address id="fvpxj"><progress id="fvpxj"></progress></address>
                <sub id="fvpxj"></sub>

                <address id="fvpxj"></address>

                  <track id="fvpxj"><big id="fvpxj"></big></track>

                    <address id="fvpxj"><big id="fvpxj"><font id="fvpxj"></font></big></address>

                    <dl id="fvpxj"><em id="fvpxj"><form id="fvpxj"></form></em></dl>

                        <address id="fvpxj"><progress id="fvpxj"><font id="fvpxj"></font></progress></address>
                        <address id="fvpxj"></address>

                          <address id="fvpxj"><progress id="fvpxj"></progress></address>
                          <sub id="fvpxj"></sub>

                          <address id="fvpxj"></address>

                            <track id="fvpxj"><big id="fvpxj"></big></track>

                              <address id="fvpxj"><big id="fvpxj"><font id="fvpxj"></font></big></address>

                              <dl id="fvpxj"><em id="fvpxj"><form id="fvpxj"></form></em></dl>

                                重庆时时彩视频开奖直播下载 真钱在线棋牌 体彩p3专家杀码 500元 倍投方案 稳赚 海南环岛赛开奖历史记录 中国体彩网网络服务协议 彩票三d和值和尾 陕西陕西十一选五一定牛走势图 七星彩开奖结果现场 十一选五任三单注投注技巧 山东时时彩开奖结果 足彩胜负彩复式怎么算 北京单场太坑 彩票深圳风采开奖时间 江苏11选5方法