微信小程序用户电话号码登录设计（欢迎关注大白菜程序猿内容持续更新中）

双向绑定

1.双向绑定实例

<view>您输入了：{{111}}</view>
<input placeholder="请输入内容：" value="{{message}}" bindinput="bindTxt"></input> 

  data: {
    message:"贱人"
  },
  bindTxt:function(e){
    console.log(e);
    this.setData({111:e.detail.value});
  }

input{
  border: 2rpx solid black;
}

2.用户登录（手机号码登录）

<view>手机号码：</view>
<input value="{{phone}}" bindinput="bindPhone" placeholder="请输入手机号码："></input> 

<view>验证码： 
  <text>点击获取验证码</text>
</view>
<input value="{{code}}" bindinput="bindCode" placeholder="请输入验证码："></input> 
<button bindtap="login">登录</button>

  data: {
    phone:"",
    code:""
  },
  bindPhone:function(e){
    //console.log(e);
    this.setData({message:e.detail.value});
  },
  bindCode:function(e){
    //console.log(e);
    this.setData({message:e.detail.value});
  },
  login:function(){
    console.log(this.data.phone,this.data.code);
    //将手机号码和验证码发送到后端，后端进行登录
    wx.request({
      url: 'url',//后端接口
      data: {phone:this.data.phone,code:this.data.code},//需要获取的数据
      method: "POST",//请求
      success:function(res){//请求成功提示
        console.log(res);
      }
    });
  }
  //网络请求
  wx.request({
      url: 'url',//后端接口
      data: {phone:this.data.phone,code:this.data.code},//需要获取的数据
      method: "POST",//请求
      success:function(res){//请求成功提示
        console.log(res);
      }
    })