WeChatアプレットがログインインターフェースを実装

WeChatアプレットがログインインターフェースを実装

WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとおりです。

<ビュークラス="コンテナ">
  <ビュークラス="ラッパー">
    <view class="left-top-sign">ログイン</view>
    <view class="welcome">
      おかえり!
    </ビュー>
    <view class="input-content">
      <view class="input-item">
        <text class="tit">携帯電話番号</text>
        <input type="text" placeholder="電話番号を入力してください" id='phone' data-type='phone' bindinput='handerInput' />
      </ビュー>
      <view class="input-item">
        <text class="tit">パスワード</text>
        <input type="password" placeholder="パスワードを入力してください" id='password' data-type='password' bindinput='handerInput' />
      </ビュー>
    </ビュー>
    <button class="confirm-btn">ログイン</button>
    <view class="forget-section">
      パスワードを忘れましたか?
    </ビュー>
  </ビュー>
  <view class="register-section">
    まだアカウントがありませんか?
    <text>今すぐ登録</text>
  </ビュー>
</ビュー>

最も基本的なフォーム送信。

データ: {
    電話: ''、//電話番号 パスワード: '' //パスワード}、

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {

  },
  ハンドラ入力(イベント) {
    // type = event.currentTarget.dataset.type とします。
    type = event.currentTarget.id; とします。
    console.log(イベント);
    this.setData({
      [タイプ]: イベントの詳細値
   })
  },
  /**

双方向バインディングを実装するには、bindinput イベントを使用し、id または dataset を使用してデータを一意に識別します。

1 つのデータは id に渡すことができ、複数のデータは dataset に渡すことができます。

WeChat アプレットのインタラクション: メッセージ表示ボックス。 (公式リンク)

クリック コールバック関数をログイン ボタンにバインドします。

//html
<button class="confirm-btn" bindtap="login">ログイン</button>

//js
ログイン() {
    let { 電話番号、パスワード } = this.data;
    console.log(パスワード);
    /**
     * 電話番号の確認* 電話番号が空です* 電話番号の形式が間違っています* 電話番号は正しいです*/
    if (!電話) {
      wx.showToast({
        タイトル: 「携帯電話番号は空欄にできません」
        アイコン: 'なし'
      })
      戻る;
    }
    //電話番号の正規表現を定義します。let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/
    if (!phoneReg.test(phone)) {
      wx.showToast({
        タイトル: 「携帯電話番号の形式が間違っています」
        アイコン: 'なし'
      })
      戻る;
    }

    if (!パスワード) {
      wx.showToast({
        タイトル: 「パスワードは空欄にできません」
        アイコン: 'なし'
      })
      戻る;
    }

    wx.showToast({
      タイトル: 「フロントエンド検証に合格しました」

    })

バックエンドの検証、インターフェースの呼び出し、応答ステータス コードを通じてユーザーにログイン情報を返します。

result = await request('/login/cellphone', { phone, password }); を実行します。
    結果コード === 200 の場合
      wx.showToast({
        タイトル: 「ログイン成功」
      })
    }
    そうでない場合(結果コード === 400){
      wx.showToast({
        タイトル: 「電話番号が間違っています」
        アイコン: 'なし'
      })
    }
    そうでない場合(結果コード === 502){
      wx.showToast({
        タイトル: 「パスワードが間違っています」
        アイコン: 'なし'
      })
    }
    それ以外 {
      wx.showToast({
        タイトル: 「ログインに失敗しました。もう一度ログインしてください」
        アイコン: 'なし'
      })
    }
},

パーソナルセンターのアバターをクリックすると、ログインインターフェースにジャンプします。ログインに成功したら、ユーザーの個人情報データをキャッシュし(setStorageSyncメソッドとgetStorageSyncメソッドを使用)、switchTabを使用してタブバーの下のパーソナルセンターページにジャンプし、取得したキャッシュデータをjsデータに保存します。json形式の変換に注意し、最後に

HTML における三項演算に関する特別な判断。

<view class="user-info-box" bindtap='toLogin'>
      <view class="portrait-box">
        <画像クラス="縦"
          src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}'></image>
      </ビュー>
      <view class="info-box">
        <text class="username">{{userInfo.nickname?userInfo.nickname: '訪問者'}}</text>
      </ビュー>
</ビュー>
//ログイン.js
結果コード === 200 の場合
      wx.showToast({
        タイトル: 「ログイン成功」
      })

      wx.setStorageSync('userInfo', JSON.stringify(result.profile));

      wx.switchTab({
        URL: '/pages/personal/personal'
      })
    }
// 個人用.js
onLoad: 関数 (オプション) {

    userInfo = wx.getStorageSync('userInfo'); を設定します。
    if (ユーザー情報) {
      this.setData({
        ユーザー情報: JSON.parse(ユーザー情報)
      })
    }

  }, 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットがログインページを実装
  • JSF は WeChat アプレット用のシンプルなログイン ページを実装します (ソース コード付き)
  • WeChat アプレットのシンプルなログイン ページの実装 (ソース コード付き)
  • WeChatミニプログラム実践:ログインページ制作(5)
  • WeChatアプレットのローカルストレージとログインページの処理例の詳細な説明
  • WeChat アプレット ログイン インターフェースの例

<<:  MySQL データ型における DECIMAL の使用法の詳細な説明

>>:  VMware Workstation のインストール Linux (Ubuntu) システム

推薦する

Docker データ ストレージ ボリュームの詳細な説明

デフォルトでは、コンテナ データの読み取りと書き込みはコンテナのストレージ レイヤーで行われます。コ...

CentOS7 ファイアウォールとオープンポートの簡単な使い方の簡単な紹介

概要(公式にはより詳しい説明があります) Firewalld は、ネットワーク接続またはインターフェ...

nginx を使用して特定のインターフェース (URL) をブロックする方法

1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...

Centos6.5 に zabbix2.4 をインストールするチュートリアル図

centos-DVD1バージョンシステムの固定IPアドレスは192.168.159.128で、cen...

CSS--overflow:hidden のプロジェクト例

以下は、私のプロジェクトでこのプロパティを使用する方法の例です。 (1)激しく透明な浮遊コードをコピ...

Linux で削除できないファイル/フォルダの解決方法

序文最近、弊社のサーバーがハッカーの攻撃を受け、一部のファイルの属性が変更されたため、ウイルスファイ...

Linux で MySQL をインストールする簡単な方法

Linux に MySQL をインストールする方法をオンラインで検索すると、多くの方法が表示されまし...

iconfontアイコンライブラリをvueに導入するエレガントな実践記録

目次序文SVGを生成するSVGスプライトの紹介プロジェクトアイコンを取得するプロジェクトのセットアッ...

Dockerコンテナを停止および削除できない問題の解決策

実行中のコンテナIDを見つける ドッカーps上記のコンテナの物理的な場所を見つける /var/lib...

Vueモバイル端末に最適な適応ソリューションについての簡単な説明

序文: 最近の医療モバイル プロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズに...

Nginx 書き換えジャンプの適用シナリオの詳細な説明

アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...

VMwareワークステーションとデバイス/資格情報の非互換性によって発生する起動エラーについて

VMware Workstationsが仮想マシンエラーを起動する エラー レポートのリンク htt...

MySQL データベースの型変換のための CAST 関数と CONVERT 関数の説明

MySQL のCAST()およびCONVERT()関数を使用すると、ある型の値を取得し、別の型の値を...

Vueでaxiosをカプセル化するいくつかの方法

目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...