实现查询功能先在index.wxml中加入<input>标签并给<input>绑定一个事件，
然后针对事件编码就可以了。我们先在index.wxml文件中加入<input>标签 （见红色字体的代码）：
1 <view class="container">
2
3 <view> 4 <input class="input1" type="text" placeholder="请输入商品名称"
confirm-type="search" bindconfirm="bindSearch" bindblur="searchBlue"></input> 5 </view>
6
7 <view class="list1" wx:for="{{productList}}" wx:key="produceId">
8 <view>
9 <image class="image1" src="{{item.imageUrl}}"></image>
10 </view>
11 <view class="detail1">
12 <text>{{index}} {{item.productName}}</text>
13 <text>{{item.price}}</text>
14 <text>{{item.originalPrice}}</text>
15 </view>
16 </view>
17
18
19 </view>
1 . class="input1" 设置样式 ， input1在index.wxss中定义：
1 .input1 2 { 3 width:600rpx; 4 height: 60rpx; 5 border-radius: 30rpx; 6 background-color: #e0e0e0; 7 padding-left: 30rpx; 8 }
width:600rpx; 输入框的宽度，height: 60rpx; 输入框高度，background-color: #e0e0e0;输入框背景色，
border-radius: 30rpx;输入框以圆角显示，这个值设置成height值的一半就是圆角的效果，
padding-left: 30rpx; 文字离左边框的距离， 和border-radius的值保持一致会比较美观。
2 . placeholder="请输入商品名称" ， 输入框的提示信息，如下图 ：
3 . confirm-type="search" 用来设置当用户在输入框输入文字时，
键盘右下角的按钮显示什么文字， search表示搜索，如下图 ：
其他可选的值如下表 ：
4 . bindconfirm="bindSearch" 表示用户点键盘上的“搜索”按钮时要执行的函数，
稍后我们将在index.js中加入名称为“bindSearch”的函数并编码来完成搜索的执行逻辑。
5 . bindblur="searchBlue" 表示输入框失去焦点时要执行的函数，这个函数的作用是将用户
输入的值赋给data:{ searchWords:"" }属性中定义的searchWords变量，
这样在index.js文件中其他地方就可以直接使用这个变量的值了。
<input>标签的详细信息可以参考官方文档 ：
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
index.js中的代码实现：
1 data: { 2 productList: [], 3 pageIndex:1, 4 searchWords:""
5 }, 6
7 searchBlur:function(e) 8 { 9 this.setData({ 10 searchWords: e.detail.value 11 }) 12 }, 13 bindSearch: function (options) { 14 this.initProductList(); 15 },
1 . 我们在data属性中定义一个存储用户输入的变量 searchWords:""。
2 . searchBlur:function(e){ } 函数在输入框失去焦点时触发，
此函数的作用是将输入框的值通过setData( )函数设置到searchWords变量中供其他地方调用。
3 . bindSearch: function (options) { }函数用来响应用户的查询操作，
当用户输入完成点右下角的搜索按钮后触发该函数，
此函数只是简单的调用了initProductList();函数用来向服务器抓取数据并在页面显示出来，
为了抓取数据时将用户输入的查询条件传过去，我们需要对initProductList();函数做少许修改如下 ：
1 initProductList:function() 2 { 3 var _this=this; 4 wx.request({ 5 url: 'http://www.tm.com/webapi/products', 6 data:{'words':this.data.searchWords}, 7 method:'GET', 8 success:function(res){ 9 //var products=res.data;
10 var products=[ 11 {'productId':111,'productName':'女装T恤简洁11','price':12.9,'originalPrice':22.9,'imageUrl':'../../images/product11.jpg'}, 12 {'productId':122,'productName':'女装T恤简洁22','price':15.9,'originalPrice':25.9,'imageUrl':'../../images/product22.jpg'}, 13 {'productId':133,'productName':'女装T恤简洁33','price':18.9,'originalPrice':38.9,'imageUrl':'../../images/product33.jpg'}, 14 {'productId':144,'productName':'女装T恤简洁44','price':18.9,'originalPrice':38.9,'imageUrl':'../../images/product44.jpg'} 15 ]; 16 _this.setData({productList:products}); 17 } 18 }) 19 },
相比较原来的initProductList();函数，这里仅仅加入了'searchWords':this.data.searchWords 这一行代码，
其作用是将searchBlur:function(e){ }函数体中赋值给searchWords的值抓出来，然后赋值给查询字符串变量words ，
用URL的形式传递到服务器端， 服务器端需要用Request.QueryString["words"]接收这个值，
当然有了这个值还需要传递给SQL语句做where条件，这部分就属于服务器端的编码了。
至此， 我们已将首页的基本功能都实现了， 包括显示首页商品清单，查询商品，下拉刷新，上拉分页加载商品信息等。
接下来我们介绍首页的余下几个功能：
1 . 将商品加入到购物车 ；
2 . 点击商品图片打开详情页；
3 . 详情页可以分享商品信息给朋友或发到朋友圈；