最近在研究小程序云开发，想做一个在搜索框输入姓名，然后返回该姓名的相关信息，当然程序不可能一触而就，首先得把大项目分解为小项目，逐一破解。
入正题
首先得有一个搜索框和按钮
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; 
height: 20px;
text-align: center;
}
效果如图
input的四种属性，我选择了第二种属性，键盘触发时自动获取输入框内容
js文件
formName: function (e) {
this.setData({
name: e.detail.value
}),
console.log(e.detail.value)
},
