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) システム
デフォルトでは、コンテナ データの読み取りと書き込みはコンテナのストレージ レイヤーで行われます。コ...
概要(公式にはより詳しい説明があります) Firewalld は、ネットワーク接続またはインターフェ...
1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...
centos-DVD1バージョンシステムの固定IPアドレスは192.168.159.128で、cen...
以下は、私のプロジェクトでこのプロパティを使用する方法の例です。 (1)激しく透明な浮遊コードをコピ...
序文最近、弊社のサーバーがハッカーの攻撃を受け、一部のファイルの属性が変更されたため、ウイルスファイ...
序文MySQL と Navicat をインストールした後、接続時に、ERROR 2059 (HY00...
Linux に MySQL をインストールする方法をオンラインで検索すると、多くの方法が表示されまし...
目次序文SVGを生成するSVGスプライトの紹介プロジェクトアイコンを取得するプロジェクトのセットアッ...
実行中のコンテナIDを見つける ドッカーps上記のコンテナの物理的な場所を見つける /var/lib...
序文: 最近の医療モバイル プロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズに...
アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...
VMware Workstationsが仮想マシンエラーを起動する エラー レポートのリンク htt...
MySQL のCAST()およびCONVERT()関数を使用すると、ある型の値を取得し、別の型の値を...
目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...