微信小程序（同城小程序）_總結一（實現城市切換和搜索）

一、前言                                                                           

•      城市切換
•      城市搜索

二、基本內容                                                                    

1、豆瓣接口文檔

　　https://douban-api-docs.zce.me/

2、城市切換用到的接口

獲取城市列表	https://douban.uieee.com/v2/loc/list

 

3、獲取和處理城市

 

         3.1、index頁面：

      （1）一開始加載程序在index頁面中調用全局的getUserInfo() 和getLocation()方法獲取到用戶當前的信息

// pages/location/index/index.js
var app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    userInfo:{},
    motto:'豆瓣同城'

  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    //獲取用戶信息
    app.getUserInfo(function(userInfo){
      console.log(userInfo)
      that.setData({
        userInfo:userInfo
      })
    })
    //獲取位置
    app.getLocation();
  },

//點擊頁面將當前用戶的位置信息傳到另一個location頁面
  bindmottotap:function(event){
    var loc = ""
    if(app.globalData.latitude && app.globalData.longitude){
      loc = "?latitude=" + app.globalData.latitude + "&&longitude=" + app.globalData.longitude
    }
    wx.redirectTo({
      url: '/pages/location/location'+loc, 
    })

  }
})

     

      3.2、location頁面

     （1）初始化的時候獲取到index頁面傳來的參數

onLoad: function (options) {
    console.log(options)
    if (options.laitude && options.longitude){
      console.log("latitude:" + options.laitude+ ", longitude:"+options.longitude)
    }
    //獲取用戶當前的城市轉化為小寫
    if(typeof app.globalData.userInfo.city == 'string'){
      var cityUid = app.globalData.userInfo.city.toLowerCase()
      app.globalData.cityUid = cityUid
    }
    this.getLocationListData()

}

     （2）在onload中調用getLocationListData方法獲取到若干個城市信息

  /*獲取城市列表 */
  getLocationListData:function(){
    var that = this
    wx.showToast({
      title: '加載中',
      icon:'loading',
      duration:10000
    });
    var cityListURL = app.globalData.doubanBase + app.globalData.loc_list_url  //https://douban.uieee.com/v2/loc/list
    wx.request({
      url: cityListURL,
      data:{
        "start": 0,
        "count": 500
      },
      method:'GET',
      header:{
        'content-type':'json'
      },
      success:function(res){
        var citys = res.data.locs//
        that.handleLocationListData(citys) //處理獲取到的城市信息
      },
      complete:function(){
        wx.hideToast()
      }  
    })
   
  },

       獲取到的城市信息如下：

                     

 

      （3）處理上面獲取到的城市信息

 //處理城市信息
  handleLocationListData(citys){
    var locs={};   //設置空對象，存放一個一個城市信息
    for(let cityId in citys){
      var loc = citys[cityId] //遍歷數組，將每個城市對象取出來
      locs[loc.uid]=loc  //以各自對象中的uid為屬性，存下每個城市對象
                                 //比如：locs["beijing"]={"beijin":{parent: "china", habitable: "yes", id: "108288", name: "北京", uid: "beijing"}}
    }
    //默認加載當前城市的活動,用戶登錄的城市
    var cityUid = app.globalData.cityUid
    var currentLoc = null;
    if(!locs[cityUid]){//如果用戶登錄的城市沒有在獲取到的城市列表中
      currentLoc = locs[this.data.defaultUid]//顯示一個默認的城市
    }else{
      currentLoc = locs[cityUid]
    }
  
    app.globalData.locId= currentLoc.categoryId 
    app.globalData.city = currentLoc.name
    app.globalData.locs = locs//得到所有城市，存在全局變量中
    this.setData({
      "city":app.globalData.city,
      "currentLoc":currentLoc//設置當前城市,組合之后有三個屬性
    })
    console.log(currentLoc.id)
    this.getActicityByLocationId(currentLoc.id)
  }

         城市信息處理完成之后得到：

locs
currentLoc	cityUid:         categoryId:    name:       app.globalData.locId= currentLoc.categoryId     app.globalData.city = currentLoc.name   app.globalData.locs = locs//得到所有城市

      （4）點擊城市切換的時候，將當前城市的id ，name, uid傳過去

 //跳轉到城市選擇頁面
  bindLocation:function(event){
    var parameter = "?id=" + this.data.currentLoc.id + "&&name=" + this.data.currentLoc.name + "&&uid=" + this.data.currentLoc.uid;
    console.log(this.data.currentLoc)
    wx.navigateTo({

      url: '/pages/location/select-city/select-city' + parameter
    });
  },

 

      3.3、城市切換頁面

     

     （1）gps定位城市，頁面一加載的時候獲取到當前用戶的城市信息

 onLoad: function (options) {
    console.log(options)
    var id = options.id;
    var uid = options.uid;
    var name = options.name;
    var gpsCity = {
      "id": id,
      "uid": uid,
      "name": name
    }
    var city = app.globalData.city  //是location中currentLoc.name
    var locs = app.globalData.locs  //全部的城市信息
    console.log(locs)
    console.log(city)
    this.setData({
      locs: locs,  //得到全部的城市信息
      gpsCity:gpsCity //組裝gps定位城市屬性
    })
    
    this.processCityListData(locs)
  },

 

    （2）根據之前獲取到的一大堆城市信息表中，將這些城市信息分類處理

             處理一：自定義熱門城市數組， 根據數組用map函數從所有的loc中篩選出熱門城市對象

             處理二：遍歷所有城市，將首字母獲取出來，並排序

             處理三：根據首字母，將所有的城市分組

//處理城市的函數
  processCityListData:function(locs){
    if(locs && typeof locs =="object"){
      var hotCity = this.data.hotCityUid.map(function(item, index, input){
        console.log(item, index, input)//beijing 0 ，shanghai 1 ，guangzhou 2 
        return locs[item] //篩選出熱門城市，locs:  { parent: "china", habitable: "yes", id: "108288", name: "北京", uid: "beijing" }
      })
      //按字母排序
      var keys = Object.keys(locs)// 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環遍歷該對象時返回的順序一致 。
      keys.sort()
      console.log(locs) // anshan: { parent: "liaoning", habitable: "yes", id: "118125", name: "鞍山", uid: "anshan" }
      console.log(keys)//anshan
      var cityList = {}
      var letterList = []
      for(let idx in keys){ //遍歷排序好的城市
        var key = keys[idx]
        console.log(key)//jinhua
        var letter = key.substring(0,1)//首字母
      
        var city = locs[key] //獲取到的城市對象
        console.log(city)
        if(!cityList[letter]){
          cityList[letter]=[]
          letterList.push(letter)//將首字母放進一個單獨的數組中

        }
        console.log(letterList)//1", "a", "b", "c", "d", "f", "g", "h", "j", "k", "l", "m", "n", "q", "s", "t", "w", "x", "y", "z"
        cityList[letter].push(city)//按照首字母將城市分組


      }

      console.log("cityList: " + cityList)
      this.setData({
        "hotCity":hotCity,//對象數組 "id": id,"uid": uid, "name": name

        "letterList":letterList,//存首字母的對象的數組[1", "a", "b", "c", "d", "f", "g", "h", "j", "k", "l", "m", "n"] 
 
        "cityList":cityList//對象，每一個對象里面存着一個個條件相同的數組數組  }) } },

 

 

       3.4、處理點擊

     （1）選擇城市進行切換，

       

      html代碼：

 <text class='hot-city-title'>熱門城市</text>
  <view class='hot-city'>
    <view class='hot-city-content'>
    <block wx:for="{{hotCity}}" wx:key="key" wx:for-item="city">
     <!--點擊的時候將自定義屬性傳進去--> 
 <text class='gps-loc city-box' data-id='{{city.id}}' data-name='{{city.name}}' data-uid='{{city.uid}}' bindtap='handleSelected'>{{city.name}}</text>
    </block>
    </view>
  </view>

 

      handleSelected函數：

 //城市選擇
  handleSelected:function(event){
   console.log(event.target.dataset)//自定義參數帶過來，然后更改請求的地址
    var id = event.target.dataset.id;
    var name = event.target.dataset.name
    var uid = event.target.dataset.uid
    var currentLoc = {
      "id": id, "name": name, "uid": uid
    };
    wx.navigateTo({
      url:"/pages/location/location",
      success:function(){
        app.globalData.reflesh = true;
        app.globalData.locId = id;//當前城市的id
        app.globalData.city = name; //城市名稱
        app.globalData.cityUid = uid;//城市uid
        app.globalData.currentLoc = currentLoc;//當前城市對象，包含id uid name
      }
    })
    console.log(app.globalData.currentLoc)

  }

 

   （2）城市查詢

          

  <view class="page-session page-session-spacing">
    <view class="search-session">
      <icon type="search" size="16"></icon>
      <block wx:if="{{!searching}}" wx:key="key">
        <text class="search-holder" bindtap="bindSearch">輸入城市名稱查詢</text>
      </block>
      <block wx:elif="{{searching}}">
        <input class="search-input" placeholder-class="search-placeholder" value="" placeholder="輸入城市名稱查詢" focus="true"  bindconfirm='handleConfirm'  bindblur='handleBlur' bindinput='handleInput'/>
        <text class="cancel" bindtap="handleCancel">取消</text>
      </block>
    </view>
  </view>
  <block wx:if="{{searching}}">
    <view class="select-city-body {{searching ? 'select-city-body-cover':'select-city-body-hidden'}}" catchtap="handleCancel">  </view>   
  
      <view class='city-list-wrapper'>
        <view class='city-list'>
          <block wx:for="{{searchLetterList}}" wx:for-item="letter">
            <text class='list-title'>{{letter}}</text>
            <view class='list-content'>
            <block wx:for="{{searchCityList[letter]}}" wx:for-item="city">
                <text class="city-block" data-id="{{city.id}}" data-name="{{city.name}}" data-uid="{{city.uid}}" bindtap="bindCityTap">{{city.name}}</text>
            </block>
            </view>
            
          </block>
        </view>
      </view>
  
    <block wx:if="{{showSearchNone}}">
    <view class='search-none'>這里是空的</view>
    </block>
  </block>

對輸入框注冊監聽事件

  //處理輸入
  handleInput: function(event){
    console.log(event)
   var value = event.detail.value
    console.log(value) //獲取輸入的內容

    var searchLocs = {}  //定義收索的城市對象
    var searchCityList = {}//定義收索的城市列表
    var searchLetterList=[]//將搜索到的城市分組
    var readyData={
      "searchLocs": searchLocs,
      "searchCityList": searchCityList,
      "searchLetterList": searchLetterList,
      "showSearchNone":false  //控制顯示隱藏
    }
    if(value==""){
      this.setData(readyData)//輸入為空，給data添加一個readyData屬性
      return;
    }
    console.log(this.data.locs)//所有的沒有處理的城市信息
    var locKeys = Object.keys(this.data.locs) 
    console.log(locKeys)//["118181", "beijing", "shanghai", "guangzhou", "shenzhen"]
    for(let idx in locKeys){
      var key = locKeys[idx]
      if(key.indexOf(value)!=-1){//如數字母，如果匹配到了，就將找到的城市加入到搜到的城市中
        searchLocs[key] = this.data.locs[key]
      }else if(this.data.locs[key].name.indexOf(value)!=-1){//如果輸入漢字的時候找到了，就將當前城市對象也加入里面
        (searchLocs[key] = this.data.locs[key])
      }
    }


  var keys = Object.keys(searchLocs) //得到屬性
  var keyLength = keys.length
  if(keyLength==0){ //如果長度為0，說明沒有相同的
    readyData["showSearchNone"]=true
    this.setData(readyData)
    return;
  }

  keys.sort();
  for(let idx in keys){
    var key = keys[idx]
    var letter = key.substring(0,1)
    var city = searchLocs[key]
    if(!searchCityList[letter]){
      searchCityList[letter]=[]
      searchLetterList.push(letter)
    }
    searchCityList[letter].push(city)
  }
   readyData["searchLocs"] = searchLocs
   readyData["searchCityList"] = searchCityList
    readyData["searchLetterList"] = searchLetterList
   this.setData(readyData)
  console.log(readyData)
  },

 

三、總結