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(ユーザー情報)
      })
    }

  },