WeChat アプレットのシンプルなログイン ページの実装 (ソース コード付き)

<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">
 
 <!-- v2 親コンテナ子ビューは絶対レイアウトを使用します -->
   <ビュークラス="v2">
     <view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">ログイン</view>
  
     <!-- 電話番号-->
     <view class="phoneCs">
       <!-- <image src="/images/zhang.png" class="ph"></image> -->
       <input placeholder="アカウント番号を入力してください" type="number" bindinput="content" />
     </ビュー>
     <!-- パスワード -->
     <view class=passwordCs">
       <!-- <image src="/images/mi.png" class="ps"></image> -->
       <input placeholder="パスワードを入力してください" type="password" bindinput="password" />
     </ビュー>
     <!-- ログイン ボタン -->
     <view class="denglu">
       <button class="btn-dl" type="primary" bindtap="goadmin">ログイン</button>
     </ビュー>
   </ビュー>
 </ビュー>

/* pages/login/login.wxss *//* 最大の親要素*/
.v1{
  表示: ブロック;
  位置:絶対;
  幅: 100%;
  背景色: rgb(250, 248, 248);
}
/* 白い部分 */
.v1 .v2{
  位置: 相対的;
  上マージン: 150rpx;
  左: 100rpx; 
  幅: 545rpx;
  高さ: 600rpx;
  背景色: rgb(250, 248, 248);
  境界線の半径: 50rpx;
}
/* 白い領域にログインテキスト*/
.v1 .v2 .dltext{
  上マージン: 50rpx;
  位置: 絶対;
  左マージン:50rpx;
  幅: 150rpx;
  高さ: 100rpx;
  フォントサイズ: 60rpx;
  フォントファミリー: Helvetica;
  色: #000000;
  行の高さ: 100rpx;
  文字間隔: 2rpx;
}
/* 携帯電話の画像 + 入力ボックス + 下線付き親コンテナビュー */
.v1 .v2 .phoneCs{
  上マージン: 200rpx;
  左マージン: 25rpx;
  位置: 絶対;
  ディスプレイ: フレックス;
  幅:480rpx;
  高さ: 90rpx;
  背景色: 白;
  
}
/* 携帯電話アイコン */
.v1 .v2 .phoneCs .ph{
  上マージン: 5rpx;
  左マージン: 30rpx;
  幅: 55rpx;
  高さ: 55rpx;
}
/* 電話番号入力ボックス*/
.v1 .v2 .phoneCs 入力{
  幅: 400rpx;
  フォントサイズ: 30rpx;
  上マージン: 25rpx;
  左マージン: 30rpx;
}
/* パスワードアイコン + 入力ボックス + 小さな目のアイコン + 下線付き親コンテナビュー */
.v1 .v2 .passwordCs{
  上マージン: 350rpx;
  左マージン: 25rpx;
  位置: 絶対;
  ディスプレイ: フレックス;
  幅:480rpx;
  高さ: 90rpx;
  背景色: 白;

}
/* パスワードアイコン */
.v1 .v2 .passwordCs .ps{
  上マージン: 5rpx;
  左マージン: 30rpx;
  幅: 55rpx;
  高さ: 55rpx;
}
/* 目のアイコン */
.v1 .v2 .passwordCs .eye{
  上マージン: 5rpx;
  左マージン: 65rpx;
  幅: 55rpx;
  高さ: 55rpx;
}
/* パスワード入力ボックス*/
.v1 .v2 .passwordCs 入力{
  幅: 400rpx;
  フォントサイズ: 30rpx;
  上マージン: 25rpx;
  左マージン: 30rpx;
}
/* ログインボタンコンテナビュー */
.v1 .v2 .denglu{
  幅: 480rpx;
  高さ: 80rpx;
  位置: 絶対;
  上マージン:515rpx;
  左マージン:25rpx;
  
}
/* ログインボタン */
.v1 .v2 .denglu ボタン{
  パディング: 0rpx;
  行の高さ: 70rpx;
  フォントサイズ: 30rpx;
  幅: 100%;
  高さ: 100%;
  境界線の半径: 5rpx;
}

//index.js
//アプリケーションインスタンスを取得する const app = getApp()
 ユーザー名=''
 パスワード=''
ページ（{
  データ： {
    ユーザー名: ''、
    パスワード: ''、
    クライアントの高さ:''
  },
  オンロード(){
    var それ=これ
    wx.getSystemInfo({ 
      成功: 関数 (res) { 
        コンソールログ(res.windowHeight)
          that.setData({ 
              クライアントの高さ:res.windowHeight
        }); 
      } 
    }) 
  },
  //プロトコル goxieyi(){
   wx.navigateTo({
     url: '/pages/oppoint/oppoint',
   })
  },
  //入力コンテンツを取得する content(e){
    ユーザー名=e.detail.value
  },
  パスワード(e){
    パスワード=e.detail.value
  },
  //ログインイベント goadmin(){
    let flag = false // アカウントが存在するかどうかを示します。false は初期値です。if (username=='')
    {
      wx.showToast({
        アイコン:'なし',
        タイトル: 「アカウントは空にできません」
      })
    }それ以外の場合(パスワード==''){
      wx.showToast({
        アイコン:'なし',
        タイトル: 「パスワードは空欄にできません」
      })
    }それ以外{
      wx.cloud.database().collection('adminShop')
      。得る（{
        成功:(res)=>{
          コンソールログ(res.data)
          admin = res.data とします
          for (let i = 0; i < admin.length; i++) { //データベースオブジェクトコレクションを走査します if (username === admin[i].username) { //アカウントが既に存在します flag=true;
              if (password !== admin[i].password) { //パスワードが正しいかどうかを判断します wx.showToast({ //パスワードエラー情報を表示します title: 'パスワードが間違っています!!',
                  アイコン: 'エラー'、
                  所要時間: 2500
                });
               壊す;
              } それ以外 {
                wx.showToast({ //ログイン成功情報を表示 title: 'ログイン成功!!',
                  アイコン: '成功'、
                  所要時間: 2500
                })
                フラグ=true;
                wx.setStorageSync('admin', パスワード)
               wx.navigateTo({
                 URL: '/pages/admin/admin',
               })
                壊す;
              }
            }
          };
          if(flag==false)//データを走査した結果、そのようなアカウントは存在しないことが判明しました{
            wx.showToast({
              タイトル: 「このユーザーは存在しません」
              アイコン: 'エラー'、
              所要時間: 2500
            })
          }
        }
      })
    }
  },
})