微信小程序?qū)崿F(xiàn)登錄注冊(cè)

1. 新建工程

項(xiàng)目名稱自定義命名润歉，目錄自己選擇璧眠，AppID可以使用注冊(cè)號(hào)，或者去微信公眾平臺(tái)申請(qǐng)一個(gè)AppID嫂粟，開發(fā)模式選擇小程序娇未，后端服務(wù)選擇不使用云開發(fā)，模板選擇JavaScript-基礎(chǔ)模板

image-20230505110606751.png

2. 編寫WXML文件

刪除index.wxml文件中的內(nèi)容星虹，將以下代碼復(fù)制到index.wxml中

<view class="container-view">
  <view class="header">
    <text>登錄/注冊(cè)</text>
  </view>
  <view class="tip">
    <text>請(qǐng)輸入賬號(hào)</text>
  </view>
  <view class="input">
    <!-- model:value用于雙向綁定零抬，組件中的值發(fā)生變化，js中的值也會(huì)變化宽涌，js中的值發(fā)生變化平夜，組件中的值也會(huì)變化 -->
    <input type="text" class="account-input" placeholder="請(qǐng)輸入賬號(hào)" model:value="{{account}}" bindinput="accountInput"/>
  </view>
  <view class="input">
    <!-- bindinput鍵盤輸入時(shí)，觸發(fā)的回調(diào) -->
    <input type="password" class="account-input" placeholder="請(qǐng)輸入密碼" model:value="{{password}}" bindinput="passwordInput"/>
  </view>
  <view class="checkbox">
    <checkbox model:checked="{{checked}}"/>
    <text class="normal">登錄/注冊(cè)即表示同意</text>
    <text class="highlight" bindtap="nav1">《隱私協(xié)議》</text>
    <text class="normal">與</text>
    <text class="highlight" bindtap="nav2">《服務(wù)協(xié)議》</text>
  </view>
  <view class="button-view">
    <button type="primary" style="width: 100%;" disabled="{{account.length == 0 || password.length == 0 || !checked}}" bindtap="confirm">確認(rèn)</button>
  </view>
  <view class="footer">
    <text>微信小程序登錄注冊(cè)</text>
  </view>
</view>

3. 編寫WXSS文件

.header {
  font-size: 50rpx;
  margin-top: 30rpx;
  margin-left: 40rpx;
  font-weight: bold;
}

.tip {
  margin-left: 40rpx;
  margin-top: 20rpx;
  font-size: 26rpx;
  color: #515151;
}

.input {
  margin-left: 40rpx;
  width: calc(100% - 80rpx);
  margin-top: 40rpx;
}

.account-input {
  border-bottom: #919191 solid 2rpx;
  height: 80rpx;
}

.checkbox {
  margin-left: 30rpx;
  margin-top: 20rpx;
}

.checkbox checkbox {
  transform: scale(0.7, 0.7);
}

.normal {
  font-size: 24rpx;
}

.highlight {
  font-size: 24rpx;
  color: cornflowerblue;
}

.button-view {
  margin-top: 100rpx;
  margin-left: 40rpx;
  width: calc(100% - 80rpx);
}

.footer {
  position: absolute;
  bottom: 40rpx;
  text-align: center;
  width: 100%;
  font-size: 28rpx;
  color: gray;
}

4. 編寫js文件

// index.js
// 獲取應(yīng)用實(shí)例
const app = getApp()

Page({
  data: {
    account: "",
    password: "",
    checked: false,
  },

  confirm() {
    // 彈出提示框
    wx.showModal({
      title: '進(jìn)行登錄/注冊(cè)',
      content: `account: ${this.data.account} password: ${this.data.password}`,
    });
  },

  nav1() {
    // 彈出確認(rèn)框
    wx.showToast({
      title: '跳轉(zhuǎn)隱私協(xié)議',
    });
  },

  nav2() {
    wx.showToast({
      title: '跳轉(zhuǎn)用戶協(xié)議',
    });
  },

  accountInput() {
    console.log(this.data.account);
  },

  passwordInput() {},

  onLoad() {
    
  },
})

5. 效果圖

image-20230505140758366.png