WeChat アプレットのログインと登録 (データベース接続なし) (2023 年 3 月 31 日)

開発 2023-06-05 11:23:00 訪問数: null

WeChat アプレットのログインと登録 (データベースへの接続なし)

提示：以下是本篇文章正文内容，下面案例可供参考

1. ログイン

ログイン フォームにアカウント番号とパスワードを入力してログインすると、アカウント番号とパスワードの入力ボックスにわかりやすいプロンプトが表示されます。ログイン ボタンはデフォルトでは灰色で使用できず、内容を入力した後にのみ使用可能になります
。ログイン ボタン内 インターフェイスの下部には、
図に示すように、モバイルのクイック登録、企業ユーザーの登録、パスワード取得リンクがあり、インターフェイスの下部には WeChat と QQ のサードパーティのログイン方法があります。
ここに画像の説明を挿入
サンプルコード
(1) 図のようにフォームプロジェクトを作成し、AppIDを入力し、バックエンドサービスに「クラウドサービスを使用しない」を選択し、保存するページと同じディレクトリ下にimagesディレクトリを作成します
。プロジェクトで使用する必要がある画像。


(2)図に示すように、app.json ファイルに「pages/login/login」、「pages/mobile/mobile」、および「pages/company/company」を追加し、デフォルトのファイル ディレクトリと対応するフォルダーを削除します。
。
ここに画像の説明を挿入
(3) 「pages/login/login.wxml」ファイルで、アカウントとパスワードの入力ボックスのレイアウトを設計します。コードは次のとおりです。

<!--pages/login/login.wxml-->
<view class="content">
  <view class="account">
      <view class="title">账号</view>
      <view class="num">
          <input type="text" bindinput="nameInput" placeholder="账号/邮箱/手机号" placeholder-style="color:#999;" />
        </view>
  </view>
  <view class="hr"></view>
  <view class="account">
      <view class="title">密码</view>
      <view class="num">
          <input type="password" bindblur="passwordBlur" placeholder="请输入密
码" placeholder-style="color:#999;" />
        </view>
      <view class="see">
         
      <image src="/images/see.jpg" style="width: 42px; height:32px;" />
       
    </view>
  </view>
  <view class="hr"></view>
</view>

(4) 対応するスタイルを「pages/login/login.wxss」ファイルに追加します。コードは次のとおりです。

/* pages/login/login.wxss */
.content {
    
    
  margin-top: 20px;
}

.account {
    
    
  display: flex;
  flex-direction: row;
}

.title {
    
    
  margin: 10px;
  font-weight: bold;
}

.num {
    
    
  margin: 10px;
}

.hr {
    
    
  height: 1px;
  width: 90%;
  background-color: #ccc;
  opacity: 0.2;
}

.see {
    
    
  position: absolute;
  right: 20px;
}

実行結果を次の図に示します。
ここに画像の説明を挿入
(5) 「pages/login/login.wxml」ファイルで、ログイン ボタン、携帯電話のクイック登録、エンタープライズ ユーザーの登録、
パスワードの取得、およびサードパーティのログイン レイアウトのデザインを設計します。コードは次のとおりです。

<!--pages/login/login.wxml-->
<view class="content">
  <view class="account">
    <view class="title">账号</view>
      <view class="num">
      <input type="text" bindinput="nameInput" placeholder="账号/邮箱/手机号" placeholder-style="color:#999;" />
       
    </view>
  </view>
  <view class="hr"></view>
  <view class="account">
      <view class="title">密码</view>
      <view class="num">
          <input type="password" bindblur="passwordBlur" placeholder="请输入密码" placeholder-style="color:#999;" />
        </view>
      <view class="see">
         
      <image src="/images/see.jpg" style="width: 42px; height:32px;" />
       
    </view>
  </view>
  <view class="hr"></view>
  <button class="btn" disabled="{
     
     {disabled}}" type="{
     
     {btnType}}" bindtap="login">登录</button>
  <view class="operate">
      <view>
          <navigator url="../mobile/mobile">手机快速注册</navigator>
        </view>
      <view>
          <navigator url="../company/company">企业用户注册</navigator>
        </view>
  </view>
  <view class="login">
      <view>
          <image src="/images/wxlogin.jpg" style="width:70px;height:98px;">
      </image>
        </view>
      <view>
          <image src="/images/qqlogin.jpg" style="width:70px;height:98px;">
      </image>
        </view>
  </view>
</view>

(6) 対応するスタイルを「pages/login/login.wxss」ファイルに追加します。コードは次のとおりです。

/* pages/login/login.wxss */
.content {
    
    
  margin-top: 20px;
}

.account {
    
    
  display: flex;
  flex-direction: row;
}

.title {
    
    
  margin: 10px;
  font-weight: bold;
}

.num {
    
    
  margin: 10px;
}

.hr {
    
    
  height: 1px;
  width: 90%;
  background-color: #ccc;
  opacity: 0.2;
}

.see {
    
    
  position: absolute;
  right: 20px;
}

.btn {
    
    
  margin-top: 40px;
  color: #999;
}

.operate {
    
    
  display: flex;
  flex-direction: row;
}

.operate view {
    
    
  margin: 0 auto;
  margin-top: 40px;
  font-size: 14px;
  color: #333333;
}

.login {
    
    
  display: flex;
  flex-direction: row;
  margin-top: 150px;
}

.login view {
    
    
  margin: 0 auto;
}

動作効果は以下の通りです:
ここに画像の説明を挿入
(7) 「pages/login/login.js」ファイルにnameInputとpasswordBlurイベント関数を追加します
アカウントに内容を入力するとログインボタンが使用可能になります コードは以下の通りです:

/**
   * 页面的初始数据
   */
  data: {
    
    
    disabled: true,
    btnType: "default",
    name: "",
    password: ""
  },


  //输入账户触发的事件
  nameInput(e) {
    
    
    var account = e.detail.value; //获取账号的值
    if (account != "") {
    
    
      this.setData({
    
     disabled: false, btnType: "primary", name: account });
    }
  },

  //输入密码触发的事件
  passwordBlur(e) {
    
    
    var pwd = e.detail.value;
    if (pwd != "") {
    
    
      this.setData({
    
     password: pwd });
    }
  },

操作の結果は次のようになります。
ここに画像の説明を挿入

2. 携帯電話番号登録設計

携帯電話番号の登録では、図に示すように、携帯電話番号を入力する入力ボックス、登録同意書、次へボタンを設計する必要があります
。
ここに画像の説明を挿入
サンプルコード
(1) 「pages/mobile/mobile.wxml」ファイル内で、携帯電話番号入力ボックスのレイアウトを設計する コードは以下のとおりです。

<view class="content">
  <view class="hr"></view>
  <view class="numbg">
      <view>+86</view>
      <view><input placeholder="请输入手机号" maxlength="11" bindblur="mobileblur" /></view>
  </view>
</view>

(2) 「pages/mobile/mobile.wxss」ファイルに対応するスタイルを追加します。コードは次のとおりです。

.content {
    
    
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;
}

.hr {
    
    
  padding-top: 20px;
}

.numbg {
    
    
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 50px;
  border: 1pxsolid#cccccc;
  border-radius: 5px;
  margin: 0 auto;
  background-color: #ffffff;
}

.numbg view {
    
    
  margin-left: 20px;
  margin-top: 14px;
}

実行結果は以下のとおりです。
ここに画像の説明を挿入
(3) 「pages/mobile/mobile.wxml」ファイルに、登録規約と次へボタンの操作を設計します。コードは次のとおりです
。

<!--pages/mobile/mobile.wxml-->
<view class="content">
  <view class="hr"></view>
  <view class="numbg">
      <view>+86</view>
      <view><input placeholder="请输入手机号" maxlength="11" bindblur="mobileblur" /></view>
  </view>
  <view class="xieyi">
        <icon type="success" color="red" size="18"></icon>
        <text class="agree">同意</text>
        <text class="opinion">京东用户注册协议</text>
      </view>
</view>
<view>
  <button class="btn" disabled="{
     
     {disabled}}" type="{
     
     {btnType}}" bindtap="login">下一步</button>
</view>

(4) 「pages/mobile/mobile.wxss」ファイルに対応するスタイルを追加します。コードは次のとおりです。

/* pages/mobile/mobile.wxss */
.content {
    
    
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;
}

.hr {
    
    
  padding-top: 20px;
}

.numbg {
    
    
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 50px;
  border: 1pxsolid#cccccc;
  border-radius: 5px;
  margin: 0 auto;
  background-color: #ffffff;
}

.numbg view {
    
    
  margin-left: 20px;
  margin-top: 14px;
}

.xieyi {
    
    
  margin-top: 15px;
  margin-left: 15px;
}

.agree {
    
    
  font-size: 13px;
  margin-left: 5px;
  color: #666666;
}

.opinion {
    
    
  font-size: 13px;
  color: #000000;
  font-weight: bold;
}

.btn {
    
    
  width: 90%;
  margin-top: 30px;
}


ここに画像の説明を挿入
(5) 「pages/mobile/mobile.js」ファイルに mobileblur イベントを追加します 携帯電話番号を入力すると次へボタンが有効になります コードは以下の通りです
。

/**
   * 页面的初始数据
   */
  data: {
    
    
    disabled: true,
    btnType: "default",
    mobile: ""
  },


  //当输入手机号结束以后，失去焦点时触发的事件。
  mobileblur(e) {
    
    
    var phone = e.detail.value;
    if (phone != "") {
    
     //当完成输入时，“下一步”可用
      this.setData({
    
     disabled: false, btnType: "primary", mobile: phone });
    } else {
    
    
      this.setData({
    
     disabled: true, btnType: "default", mobile: "" });
    }
  },


ここに画像の説明を挿入
(6) mobile.json ファイルに「navigationBarTitleText」属性を追加し、ナビゲーション タイトルを「Mobile Quick Registration」に設定します。
コードは次のとおりです。

{
    
    
"navigationBarTitleText":"手机快速注册"
}

ここに画像の説明を挿入

未完

エンタープライズ ユーザー登録デザインはアップロードされていません。続行します。ご質問等ございましたらお気軽にどうぞ。

おすすめ

転載: blog.csdn.net/qq_52992084/article/details/129885468
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com