一、前言
城市切换
城市搜索
二、基本内容
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.jsvar 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: (options.laitude && + options.laitude+ + ( app.globalData.userInfo.city == cityUid ==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, :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)
},
来源：https://www.cnblogs.com/xxm980617/p/10952885.html