小程式用戶和登錄頁面展示

来源:https://www.cnblogs.com/suncolor/archive/2022/12/21/16995124.html
-Advertisement-
Play Games

用戶頁面wxml <!--pages/home/home.wxml--> <view class="container"> <view class="top-view"> <view class="user"> <view class="row"> <image class="avatar" wx: ...


用戶頁面wxml

<!--pages/home/home.wxml-->
<view class="container">
  <view class="top-view">
    <view class="user">
      <view class="row">
        <image class="avatar" wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>
        <image class="avatar" wx:else="{{userInfo}}" src="/static/2.png"></image>
        <!-- 點擊跳轉到登錄註冊頁面 -->
        <view class="name" wx:if="{{userInfo}}">
          <view bindtap="onClickLogout">
            {{userInfo.nickName}}
          </view>
        </view>
        <view class="name" wx:else="{{userInfo}}">
          <navigator url="/pages/auth/auth">登錄</navigator>
          |
          <navigator url="/pages/auth/auth">註冊 </navigator>
        </view>

      </view>
      <view class="site">查看個人主頁</view>
    </view>

    <view class="numbers">
      <view class="row">
        <text>0</text>
        <text>關註</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>粉絲</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>贊與收藏</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>好友動態</text>
      </view>
    </view>

  </view>

  <view class="middle-view">
    <view class="item">
      <image src="/static/images/icon/transaction_order1_icon_show.png"></image>
      <text>待支付</text>
    </view>
    <view class="item">
      <image src="/static/images/icon/transaction_order2_icon_show.png"></image>
      <text>待支付</text>
    </view>
    <view class="item">
      <image src="/static/images/icon/transaction_order3_icon_show.png"></image>
      <text>待支付</text>
    </view>
    <view class="item">
      <image src="/static/images/icon/transaction_order4_icon_show.png"></image>
      <text>待支付</text>
    </view>
    <view class="item">
      <image src="/static/images/icon/transaction_order5_icon_show.png"></image>
      <text>待支付</text>
    </view>
  </view>
  <view class="function-view">
    <view class="row">
      <view class="left">我的錢包</view>
      <view class="right">
        <text>¥20</text>
        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
      </view>
    </view>
    <view class="row">
      <view class="left">我的優惠券</view>
      <view class="right">
        <text>暫無課用</text>
        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
      </view>
    </view>
    <view class="row">
      <view class="left">領劵中心</view>
      <view class="right">
        <text>你的福利都在這裡</text>
        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
      </view>
    </view>
  </view>
  <view class="contact-view">
    <button open-type="contact">
      <image src="/static/images/icon/wechat_contact_icon_show.png"></image>
    </button>
    <button bindtap="onClickCall">
      <image src="/static/images/icon/phone_contact_icon_show.png"></image>
    </button>
  </view>
</view>

用戶頁面js

// pages/home/home.js

var app = getApp();

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    userInfo: null,
  },

  /**
   * 生命周期函數--監聽頁面載入(第一次打開時會執行)
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成（第一次打開時會執行）
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    //本地storage中獲取值
    // var phone = wx.getStorageSync('phone')
    // this.setData({
    //   phone:phone
    // })
    //從全局變數中獲取值
    this.setData({
      // phone:app.globalData.phone
      userInfo: app.globalData.userInfo
    }) 
  },
   /**
   * 用戶註銷
   */
  onClickLogout:function(){
    app.delUserInfo();
    this.setData({
      userInfo: null
    })
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

用戶頁面css

/* pages/home/home.wxss */

.top-view{
  background-color: #01ccb6;

  color: white;
  padding: 40rpx;
}

.top-view .user{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.top-view .user .row{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.top-view .user .avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.top-view .user .name{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 200rpx;
}

.top-view .site{
  background-color: rgba(0, 0, 0, 0.16);
  padding: 20rpx;
  border-top-left-radius: 32rpx;
  border-bottom-left-radius: 32rpx;
}

.top-view .numbers{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 28rpx;
  padding: 40rpx;
  padding-bottom: 0rpx;
}

.top-view .numbers .row{
   display: flex;
  flex-direction: column;
  align-items: center;
}


.middle-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 25rpx;
  border-bottom: 18rpx solid #f5f5f5;
}

.middle-view .item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.middle-view .item image{
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 20rpx;
}

.function-view{
  padding: 40rpx;
  font-size: 28rpx;
}

.function-view .row{
  padding: 30rpx 0;
  border-bottom: 1px solid #efefef;
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.function-view .row .right{
  color: #8c8c8c;
}
.function-view .row .go-icon{
  margin: 0 20rpx;
  width: 16rpx;
  height: 16rpx;
}


.contact-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.contact-view button {
  background-color: transparent;
  border: 0;
  padding: 0;
}
.contact-view button::after{
  border: 0;
}
.contact-view  image{
  width: 204rpx;
  height: 66rpx;
}

登錄註冊頁wxml

<!--pages/auth/auth.wxml-->

<view class="logo">
  <image src='/static/2.png'></image>
  <text>交流交易社區</text>
</view>

<view class="form">
  <view class="row-group">
    <text>手機</text>
    <!-- value屬性是後端對於前端的綁定，bindinput的前端變化時後端數據也會相應變化 -->
    <input placeholder="請填寫手機號碼" placeholder-class='txt' maxlength='11' value="{{phone}}" bindinput="bindPhoneInput" />
  </view>
   <view class="row-group">
    <text>驗證碼</text>
    <input placeholder="請填寫驗證碼" placeholder-class='txt' maxlength='4' value="{{code}}" bindinput="bindCodeInput" />
    <view class="code" bindtap="onClickCheckCode">獲取驗證碼</view>
  </view>

  <view>
    <button class="submit"  open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登錄 | 註冊</button>
  </view>
</view>

登錄註冊頁js

// pages/auth/auth.js
var app = getApp()

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    phone: "15822539779",
    code: "",
  },
  bindPhoneInput: function (e) {
    this.setData({
      phone: e.detail.value
    });
  },
  bindCodeInput: function (e) {
    this.setData({
      code: e.detail.value
    });
  },

  /** 
   * 點擊獲取簡訊驗證碼
   */
  onClickCheckCode: function (e) {
    // 判斷手機號格式是否正確
    if (this.data.phone.length == 0) {
      wx.showToast({
        title: '請填寫手機號碼',
        icon: 'none'
      })
      return
    }
    var reg = /^(1[3|4|5|6|7|8|9])\d{9}$/;
    if (!reg.test(this.data.phone)) {
      wx.showToast({
        title: '手機格式錯誤',
        icon: 'none'
      })
      return
    }
    // 發送簡訊驗證碼，登錄成功之後獲取jwt和微信用戶信息，保存到globalData和本地存儲中。
    wx.request({
      url: "http://127.0.0.1:8000/api/message/",
      data: {
        phone: this.data.phone
      },
      method: 'GET',
      dataType: 'json',
      success: function (res) {
        // 根據後端發送的status判斷是否發送成功
        if (res.data.status) {
          // 提示驗證碼倒計時或者提示發送成功
          wx.showToast({
            title: res.data.message,
            icon: 'none'
          });
        } else {
          // 簡訊發送失敗
          wx.showToast({
            title: res.data.message,
            icon: 'none'
          });
        }
      }
    })
  },
  onClickSubmit(e) {
    console.log(e)
    wx.request({
      url: "http://127.0.0.1:8000/api/login/",
      data: {
        phone: this.data.phone,
        code: this.data.code
      },
      method: 'POST',
      dataType: 'json',
      success: function (res) {
        // 根據status狀態判斷是否成功
        if (res.data.status) {
          // 1.可以將手機號放到公共的位置，比如app.js里，方便別的頁面進行獲取
          // app.globalData.phone = res.data.data.phone
          // 2.上述方法是將值存在變數里的，一重啟就沒有了，我們也可以將值保存在cookie中
          // wx.setStorageSync('phone', res.data.data.phone)
          // 3.將上述兩種存儲優化一下，在全局的app中定義一個initUserInfo方法，將用戶初始化的信息（電話和token）傳入該函數，然後上面1和2兩部就可以放到該函數內執行了
          // 4.優化，我們還可以將wx的用戶信息也初始化到initUserInfo函數內
          app.initUserInfo(res.data.data, e.detail.userInfo)


          // 登錄成功之後，自動跳轉到上一級頁面
          //getCurrentPages方法是記錄程式的頁面，包括上一頁信息，下一頁信息等，pages是一個列表，最後一個是元素是當前頁面，前一個元素是上一頁
          // var pages = getCurrentPages()
          // console.log(pages)
          // 得到上一頁
          // prepage  = pages[pages.length-2]
          // 使用該方法就可以之前跳轉到登錄之前的上一頁
          wx.navigateBack({})
        } else {
          wx.showToast({
            title: "登錄失敗",
            icon: 'none'
          });
        }
      }
    })
  },
  /** 
   * 生命周期函數--監聽頁面載入
   */
  onLoad(options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload() {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh() {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {

  }
})

登錄註冊頁css

/* pages/auth/auth.wxss */


.logo{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo image {
  margin-top: 140rpx;
  width: 216rpx;
  height: 100rpx;
}

.logo text {
  margin-top: 26rpx;
  margin-bottom: 50rpx;
  font-size: 24rpx;
  line-height: 24rpx;
  font-weight: 400;
  color: #8c8c8c;
  text-align: center;
}

.form{
  padding: 40rpx;
}

.form .row-group{
  padding: 20rpx 0;
  border-bottom: 1rpx solid #ddd;
  position: relative;
}

.form .row-group text{
  font-size: 28rpx;
  padding:10rpx 0;
}

.form .row-group input{
  padding: 10rpx 0;
}

.form .row-group .txt{
  color: #ccc;
}

.form .row-group .code{
  position: absolute;
  right: 0;
  bottom: 26rpx;
  z-index: 2;

  width: 206rpx;
  height: 60rpx;
  border: 2rpx solid #00c8b6;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #00c8b6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form .submit{
  margin-top: 80rpx;
  color: #fff;
  border: 2rpx solid #00c8b6;
  background-color: #00c8b6;
  font-size: 32rpx;
  font-weight: bold;
}

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

-Advertisement-
Play Games
更多相關文章
  • GreatSQL MGR 使用 IPv6 連接
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 作者：王權富貴 文章來源：社區原創 1.概述 本文基於 GreatSQL 8.0.25-16 ，以下測試均使用此版本。 MySQL支持IPv6，創建用戶 ...
  • MySQL-執行計劃
    上官網看執行計劃文檔釋義，移步 此部分在MySQL官方文檔中的結構屬於優化(Optimization)-理解查詢執行計劃(Understanding the Query Execution Plan)。 此部分一共包括5個部分內容： 1，使用explain優化查詢 2，explain輸出內容釋義 3 ...
  • this指向終極解決方案（附帶手寫綁定函數）
    this指向 this定義 this用於指定對當前對象的引用。 this的兩種綁定方式 為什麼說是兩種？在《你不知道的JavaScript（上捲）》一書中共提到了四種綁定方式。如下： 預設綁定 隱式綁定 顯式綁定 new綁定 實際上這四種綁定方式有兩種方式重覆了（隱式綁定和new綁定）。我們在學習過 ...
  • 小程式開發與web開發的區別及特殊功能實現
    小程式開發整理 使用uni-app跨端開發框架，代碼寫法與vue2一致。 一、與web開發的區別 1. 運行方式不同 npm run dev:mp-weixin後，用微信開發者工具打開dist中工程。 2. 標簽與web開發不同 標簽的對應關係 | 小程式中使用 | web中使用 | | | | | ...
  • 一顆紅心,三手準備,分別基於圖片(img)/SCSS(樣式)/SVG動畫實現動態拉轟的點贊按鈕特效
    華麗炫酷的動畫特效總能夠讓人心曠神怡，不能自已。艷羡之餘，如果還能夠探究其華麗外表下的實現邏輯，那就是百尺竿頭，更上一步了。本次我們使用圖片、SCSS樣式以及SVG圖片動畫來實現“點贊”按鈕的動畫特效，並比較不同之處。 圖片實現 最簡單，也最容易理解的實現方式就是使用圖片。曾幾何時，幾乎所有前端特效 ...
  • 高併發架構設計經驗總結
    高併發解決的核心問題是在同一時間上有大量的請求過來，然後我們的系統要怎麼抗住這些請求帶來的壓力。本文從基礎設施層、服務端架構層、服務應用層分別做了一個簡單的梳理，在每一層通過什麼的方式去抗併發，給大家提供一個思路。 ...
  • PowerDotNet平臺化軟體架構設計與實現系列（15）：支付平臺
    PowerDotNet個人項目中功能全面而強大的一個系統是支付平臺。我對PowerDotNet的自信很大程度上來自於經過PowerDotNet重寫後的支付、財務、結算、CRM等業務型公共服務系統的穩定運行。 使用PowerDotNet和PowerDotNetCore特別開發的業務邏輯型公共服務既有極 ...
  • day07-功能實現06
    家居網購項目實現06 以下皆為部分代碼，詳見 https://github.com/liyuelian/furniture_mall.git 14.功能13-首頁分頁 14.1需求分析/圖解 顧客進入首頁頁面 分頁顯示家居 正確顯示分頁導航條 14.2思路分析 14.3代碼實現 14.3.1web層 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類