實現查詢功能先在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 . 詳情頁可以分享商品信息給朋友或發到朋友圈；