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 Compose ネットワーク設定の説明

基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...

Ubuntu 18.0.4 は mysql をインストールし、エラー 1698 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されましたを解決します

序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...

DockerコンテナのIPアドレスを表示する方法

私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...

2048 ゲームを実装するためのネイティブ js

2048ミニゲーム、参考までに具体的な内容は以下のとおりですまず、2048ゲームは16のグリッドか...

LinuxにPHP7をインストールする方法の詳細な説明

Linux に PHP7 をインストールするにはどうすればいいですか? 1. 依存パッケージをインス...

JavaScriptエラーキャプチャの詳細な説明

目次1. 基本的な使い方とロジック2. 特徴3. エラーオブジェクト4. キャッチアンドスロー戦略の...

MySql データベースのサブクエリと高度なアプリケーションの簡単な分析

MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...

ES6 の Set および WeakSet コレクションの詳細な説明

目次セットは値が重複しない特別なコレクションです。セットコレクション基本API独自の価値判断セットを...

MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...

Vue の双方向イベントバインディング v-model の原理についての簡単な説明

目次説明する:要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...

VirtualBox を使用して Mac 上にローカル仮想マシン環境を構築する方法

1. ビッグデータとHadoopビッグデータについて研究し学ぶには、当然 Hadoop から始める必...

npmとcnpmを混在させる際の落とし穴の詳細な説明

目次原因理由NPM の紹介: CNPM の紹介:より良い方法方法の改善npm と cnpm を一緒に...

HTML テーブルの使い方 (Web ページの視覚効果を表示する)

NetEase Blog で HTML を使用する場合、テンプレートに直接コードを追加できることは...

Linux/CentOS システムでネットワーク時間を同期する 2 つの方法の詳細な説明

ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...

HTML 終了タグの問題と W3C 標準

W3C の原則によれば、XML の各開始タグには対応する終了タグが必要です。つまり、<html...