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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL データ型における DECIMAL の使用法の詳細な説明
>>: VMware Workstation のインストール Linux (Ubuntu) システム
基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...
序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...
私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...
2048ミニゲーム、参考までに具体的な内容は以下のとおりですまず、2048ゲームは16のグリッドか...
Linux に PHP7 をインストールするにはどうすればいいですか? 1. 依存パッケージをインス...
目次1. 基本的な使い方とロジック2. 特徴3. エラーオブジェクト4. キャッチアンドスロー戦略の...
MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...
目次セットは値が重複しない特別なコレクションです。セットコレクション基本API独自の価値判断セットを...
MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...
目次説明する:要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...
1. ビッグデータとHadoopビッグデータについて研究し学ぶには、当然 Hadoop から始める必...
目次原因理由NPM の紹介: CNPM の紹介:より良い方法方法の改善npm と cnpm を一緒に...
NetEase Blog で HTML を使用する場合、テンプレートに直接コードを追加できることは...
ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...
W3C の原則によれば、XML の各開始タグには対応する終了タグが必要です。つまり、<html...