小程序实现城市搜索功能

wxml:

<view class="location">推荐</view>
 <button  class="getLocation" bindtap="getLocation" size='mini'>定位</button>
 <view class="hotCity">热门城市</view>
<block  wx:for="{{hotCitys}}"  wx:key="index"> 
 <button class="btn" bindtap="selectcity"  data-val="{{item}}" size="mini"  >{{item}}</button>
</block>

wxss:

/* pages/citys/citys.wxss */
.location,.hotCity{
  padding:20rpx;
  font-weight: bold;
  font-size: 36rpx;
}
.getLocation{
  color: green;
  margin-top:20rpx;
  background: #eee;
}
.btn{
  margin: 10rpx;
  font-weight: normal;
  border-radius: 10rpx;
  background: #fff;
  border: 1px  solid  #999;
  font-size: 30rpx !important;
  padding: 4rpx  16rpx  !important;
}

js:

// pages/citys/citys.js
var   app=getApp();
 
Page({

  /**
   * 页面的初始数据
   */
  data: { 
     hotCitys:["北京", "上海",  "深圳",  "广州",  "武汉",  "荆州",  "荆门"]
  },
  //切换热门城市  ......1.点击获取热门城市  2.跳转也买你传递热门城市。。。。。
  selectcity: function(e){
    console.log(e);
      var     citys=e.currentTarget.dataset.val;
      console.log("获取的城市："+citys);
      wx.setStorageSync('cityName', citys);
      wx.switchTab({
        url: '../food/food',
      })

  },
  getLocation:function(){
    console.log(app);

      wx.getLocation({ 
        success:res=>{
          console.log(res);
          wx.request({
            url: 'http://iwenwiki.com:3002/api/lbs/location',
            data:{
              latitude:res.latitude,
              longitude:res.longitude 
           }, 
           success:result=>{
             console.log(result);
             var   cityName=result.data.result.ad_info.city.slice(0,2);
             console.log(cityName);
             //跳转----食疗坊界面 --把数据传递过去。
            //  wx.switchTab({
            //    url: '../food/food',
            //  })
            
            //1.url地址传递参数
            // wx.reLaunch({
            //   url: '../food/food?cityName='+cityName,
            // })

            //2.  把获取的变量存储给全局app.js里面的全局变量  
            // app.globalData.cityName=cityName;
            // wx.switchTab({
            //   url: '../food/food',
            // })

            //3.本地存储

            wx.setStorageSync('cityName', cityName);
            
           console.log("获取存储的值：",wx.getStorageSync('cityName'));
            wx.switchTab({
              url: '../food/food',
            })
           }
          })
        }
      })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
  //  wx.request({
  //    url: 'http://iwenwiki.com:3002/api/hot/city',
  //    success:res=>{
  //      console.log(res.data);
  //      this.setData({
  //        hotCitys:res.data.data
  //      })
  //    }
  //  })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

搜索页：
wxml:

<!--pages/search/search.wxml-->
 <view  class="seach">
   <input  bindinput="searchinput"  focus="true"  placeholder="请输入你想要的内容"></input> 
 </view>
<!-- 
   思路：
    1. 触发搜索的input事件 获取输入的内容，  bindinput -'函数名'
    2.输入内容的时候 触发函数bindinput  事件对象event，
    3.请求搜索的内容
 -->
 <!-- 搜索的内容 -->

 <import src="../productList/productList.wxml"></import>

 <block  wx:for="{{list}}"  wx:key="index">
    <template  is="productList"  data="{{item}}"></template>

 </block>

/* pages/search/search.wxss */
@import  '../productList/productList.wxss';

page{
  background:#f5f5f5;
}

.seach{
  padding:20rpx;
  background:#fff;
  color: #333;
  font-size: 30rpx;
  line-height: 60rpx;
  height: 60rpx;
}

.seach  input{
  width: 100%;
  height: 100%;
  background:#f5f5f5;
  border-radius: 10rpx;
}

js:

// pages/search/search.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  //获取表单input输入的内容
  searchinput:function(e){
      console.log("输入的内容",e.detail);
      if(e.detail.value){
        wx.request({
          url: 'http://iwenwiki.com:3002/api/foods/select',
          data:{
            name:e.detail.value,
            city:""
          },
          success:res=>{
            if(res.data.status==200){
              this.setData({
                list:res.data.data
              })
            }else{
              console.log(res.data.msg);
               this.setData({
                list:[]
              })
            }
            console.log(res.data);
          }
        })
      }else{
        console.log("输入内容不能为空！");
        //进行清空数据
        this.setData({
          list:[]
        })
      }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

效果如图：