微信小程序之获取input 输入框内容

最近在研究小程序云开发，想做一个在搜索框输入姓名，然后返回该姓名的相关信息，当然程序不可能一触而就，首先得把大项目分解为小项目，逐一破解。
入正题
首先得有一个搜索框和按钮
wxml文件

/* pages/test/test.wxss */
<view class='page_row' >  
      <view class="search">  
        <view class="df search_arr">  
          <icon class="searchcion" size='20' type='search'></icon>  
          <input  placeholder="请输入姓名" bindinput ='formName'  />  
        </view>  
      </view>  
      <view class='sousuo' >搜索</view>  
      </view>

wxml文件

/* pages/test/test.wxss */
   .search{  
      width: 80%;  
    }  
    .search_arr {  
      border: 1px solid #d0d0d0;  
      border-radius: 10rpx;  
      margin-left: 20rpx;  
    }  
    .search_arr input{  
      margin-left: 60rpx;  
      height: 60rpx;  
      border-radius: 5px;  
    }  
    .bc_text {  
      line-height: 68rpx;  
      height: 68rpx;  
      margin-top: 34rpx;  
    }  
      
    .sousuo {  
      margin-left: 15rpx;  
      width: 15%;  
      line-height: 150%;  
      text-align: center;  
      border: 1px solid #d0d0d0;  
      border-radius: 10rpx;  
    }  
    .page_row{  
      display: flex;  
      flex-direction: row  
    }  
    .searchcion {  
      margin: 10rpx 10rpx 10rpx 10rpx;  
      position: absolute;  
      left:25rpx;  
      z-index: 2;  
      width: 20px;  ![](https://upload-images.jianshu.io/upload_images/13096467-a0192b840a0ba35e.gif?imageMogr2/auto-orient/strip)

      height: 20px;  
      text-align: center;  
    }  

效果如图

input的四种属性，我选择了第二种属性，键盘触发时自动获取输入框内容
js文件

 formName: function (e) {
    this.setData({
      name: e.detail.value
     
    }),
    console.log(e.detail.value)
  },