夜光带你走进 微信小程序开发（八）擅长的领域

夜光序言：

 

 

 

 

 

 

离别时无力的拥抱有谁还想要
转身时牵强的微笑扯疼了嘴角

 

 

 

 

 

 

 

 
正文：
 
                                              以道御术 / 以术识道

 

 

/* 在这里
   夜光：我们写一些样式 */
/* 这是容器的样式 */
.container1{
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30rpx;
}

/* 这是文本的样式 */
text{
  font-size: 40rpx;
  display: flex;
  justify-content: center;
  margin-bottom: 16rpx;
  align-content: center;
}


input{
  /* margin: 16rpx 0; */
  border: 2rpx solid #336699;
  height: 90rpx;
  border-radius: 12rpx;
  padding-left: 16rpx
}

.phone_number{
  margin: 16rpx 0;

}

.code{
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 16rpx;
}
.code_number{
  flex: 1; 
  /* 把空的位置都占完 */
}

.btn_code{
   margin-left: 16rpx;
    background-color: #576b95;
    color: white;
    font-size: 36rpx
}

.btn_login{

}

 

<!--pages/login/login.wxml
我们在这里写页面
登陆的页面-->
<view class="container1">
  <text>欢迎登陆夜光商城</text>
  <input type="number" class="phone_number"  bindblur="getPhone" placeholder="请输入手机号"></input> 
  <view class="code">
    <input class="code_number" bindblur="getCode" placeholder="请输入验证码"></input>
    <button class="btn_code">点击获取验证码</button>
  </view>
       
  <view> 
    <button class="btn_login" bindtap="login">商城登陆</button>
  </view>
</view>

 

 

 

// pages/login/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone_number:"",
    code:"",
  },
  //夜光：获取手机号码
  getPhone:function(e){
    this.setData({
      phone_number: e.detail.value
    })
    console.log(this.data.phone_number)
  },
  //夜光：获取验证码
  getCode:function(e){
    this.setData({
      code: e.detail.value
    })
    console.log(this.data.code)
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})