本文共 4533 字，大约阅读时间需要 15 分钟。

wxml:

   
    推荐
    定位 
   
    热门城市
   
     
    {  {item}}
   

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.jsvar   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 () {     }})

搜索页：

/* 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.jsPage({     /**   * 页面的初始数据   */  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 () {     }})

效果如图：