完整且易讀的微信小程式的註冊頁面(包含倒計時驗證碼、獲取用戶信息)

来源:https://www.cnblogs.com/ranandrun/archive/2019/05/22/wxMiniRegisiter.html
-Advertisement-
Play Games

微信小程式的註冊頁面,純前端,包含倒計時以及獲取用戶個人信息 ...


目錄

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, //驗證碼有效時間
    phoneNum: '', //用戶輸入的電話號碼
    code: '', //用戶輸入的驗證碼
  },

  //當輸入手機號碼後,把數據存到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:  '寫自己的後臺請求發送驗證碼訪問URL',
        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)
    })
  },

  //當輸完驗證碼,把數據存到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',
      })
    }
    //獲取用戶數據,(備註:我在用戶一進入小程式就已經自動把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',
          })
        }
      }
    })
  },

})

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 寫在前面:筆者之前也有一些MySQL方面的筆記,其中部分內容來自極客時間中丁奇老師的課程。後經園友提醒,這個做法確實不太好。之後我仍會繼續更新一下MySQL方面的學習記錄,在自己理解之後用自己的方式記錄下來。學習與記錄,也是我寫博客的初衷。 概述: 分區功能並不是在存儲引擎層完成的,因此很多存儲引擎 ...
  • 本文內容概要: UDF 概念、原理、優缺點、UDF 的分類 詳細講述3種 UDF 的創建、調用方法以及註意事項 基本原理: UDF:user-defined functions,用戶自定義函數的簡稱。 UDF 是一個常式,它接受參數、執行操作並返回該操作的結果。根據定義,結果可以是標量值(單個)或表 ...
  • 先參考這篇《獲取MS SQL TABLE列名列表》https://www.cnblogs.com/insus/p/4835554.html 現在,把它改寫為存儲過程,動態獲取任一數據表列名或者是臨時表的列名。 SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON ...
  • 摘要: 今天接到老闆的需求,需根據一張表中列值,自動重覆表中的數據行,然後顯示給用戶 實驗環境:sqlserver 2008 R2 轉自:http://www.maomao365.com/?p=8413例: 根據數量遍歷迴圈表 maomao365 <span style="color:red;fon ...
  • ORACLE DATAGUARD的主備庫同步,主要是依靠日誌傳輸到備庫,備庫應用日誌或歸檔來實現。當主、備庫間日誌傳輸出現GAP,備庫將不再與主庫同步。因此需對日誌傳輸狀態進行監控,確保主、備庫間日誌沒有GAP,或發現GAP後及時處理。除了在告警日誌中查看日誌同步情況外,還可以通過查看相關視圖來對日 ...
  • package redis.redis; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; /** * 描述:Jedis連接池工具類 * 【時間 2019-05-20 15:13:34 作者 陶攀峰】 */ ...
  • 導出表數據和表結構sql文件 在工作中,經常需要導出某個資料庫中,某些表數據;或者,需要對某個表的結構,數據進行修改的時候,就需要在資料庫中導出表的sql結構,包括該表的建表語句和數據存儲語句!在這個時候,就可以利用本方法來操作! 一.工具 1.1 sql server 2012 二.方法 2.1 ...
  • 《H5+移動應用實戰開發》終於出版了,最近在忙著Vue和Webpack相關的前端書籍寫稿。本書面向的讀者為:從後端轉前端,或零基礎開始學習移動端開發的人。前後端完全分離的開發方式越來越成為一種趨勢,下一本書,將是專業前端書籍,是關於Vue在實際工作中的單頁應用開發,涉及到Vue全家桶以及webpac ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...