回顾/：我们已经实现了显示附近的人的功能了，可以多个人看到附近的人页面了
但是还是要进行优化有几个问题：1、我们用户选择了其他的自定义头像之后，在首页可以看到头像的变化，但是在附近的人中头像会变成报错的样式：如：
也就是500了，也就是找不到这个图片了，解决方法：看开发文档-》云开发
其中有一个“换取临时链接”的功能（通过这个方法可以临时的拿到一个图片的路径了），然后这个路径就可以对应到我们的iconpath中了，有直接看demo
wx.cloud.getTempFileURL({fileList:['cloud://xxx.png'],success:res=>{//fileList是一个有如下结构的对象数组//[{//fileID:'cloud://xxx.png',//文件ID//tempFileURL:'',//临时文件网络链接//maxAge:120*60*1000,//有效期//}]console.log(res.fileList)},fail:console.error})我们刚刚换了头像的测试号，可以看到在数据库中
所以我们就可以直接在near.js里面用for来判断每个字段符不符合条件即可了，一旦找到了这个cloud开头的路径的话，也就是if里面进行的东西
我们就要换取临时的路径即可了，如果else的话，我们还是和之前一样的，直接push进去即可了
if里面的话直接copy文档里面的demo即可了
我们通过
里面的那个tempFileURL就是一个临时的路径了
如何在全部for结束之后也再次的进行setdata操作即可了，完整代码就是
得到的效果就是，可以看到另外一个用户刚刚它换的头像了
（后面的优化就是可以点击这个用户的头像之后我们就可以跳转到它的详情页面了
这个功能在实现起来其实页不复杂的，有一个和markers对应的事件，也就是点击了这个markers就会触发这个事件了
通过这个事件其实我们是可以拿到id值得
markertap(ev){console.log(ev);}通过在near.js里面得这个函数，然后我们点击一下地图里面的marker图片之后，我们得到的值就是：
这个markerID其实对应的就是用户的id值了
markertap(ev){//console.log(ev);wx.navigateTo({url:'/pages/detail/detailuserId='+ev.markerId})}通过这个代码其实就可以实现，点击地图里面的图标的话我们就可以跳转到这个用户的详情页面去了
3、后面要测试的就是假如测试账号关闭了共享位置的话
通过测试我们发现，测试号关闭了共享位置的话，在地图里面即使是刷新了还是会看到这个用户的头像的
（其实代码是没有错的，把项目关了再重启之后会看到这个关闭了共享位置的用户头像就消失了
（其实还有其他可以优化的，就是可以在地图的头像上面加一段语音介绍自己等等的，因为小程序其实也是支持的，或者是可以计算我和你的距离
或者是我去你那边的话我过去的导航和路线是怎么样的
二、search组件的布局和样式
（就是在主页的上面添加一个查找的框）
1、实现新建一个叫search的组件
创立好了之后，就可以在首页进行引用了
2、先在index.JSON文件里面引入这个组件
{"usingComponents":{"search":"/components/search/search"}}3、在主页里面和用标签一样引用就可以了
可以直接在index.wxml中通过
该search组件就被引入了
通过基本的结构wxml
会发现我们放大镜图标没有显示出来，所以我们要配置一下，让这个图标可以穿透出来即可了
也就是之前copyText.js写过的
options:{styleIsolation:'apply-shared'},就是为了让这个图标可以生效的
这样的话，我们的放大镜就进来了
之后就可以对search.wxss的样式进行设计了
但是发现，图片和这个组件融合在一起了
这是因为因为是组件的引入的话，就不像在主页面一样，可以占位置的，所以就要到index.wxss设置一下让index腾出一个空间来放这个搜索框的
通过在
就是直接通过margin来腾出位置即可了
上面其实是在index.wxss中给上面的腾出来100rpx的空间
/*components/search/search.wxss*/.container{position:fixed;left:0;top:0;width:100%;height:70rpx;z-index:999;}.search{display:flex;align-items:center;margin:20rpx;}.search-text{display:flex;align-items:center;flex:1;border:1px#cdcdcdsolid;border-radius:10rpx;height:65rpx}.search-text.iconsousuo{margin:010rpx;}.search-cancel{margin:010rpx;}得到的效果就是：
但是有一个问题就是：我们在还没点击搜索的时候，其实不用显示后面的“取消”按钮的，这个的话就要通过js逻辑来实现了
定义了一个isfocus来表示光标有没有显示的（这个取消的按钮其实是在我们获取了光标之后才会有的）
通过在取消按钮加上了一个wx：if判断之后，得到的效果就是：
并且当我们获取到了光标之后，这个搜索框会适应整个页面的高度了
给contaner加上了overflow:hidden;之后得到的效果就是这个搜索框的下边框“不见了”
这个是因为，我们得container这个大得块要比我们输入框得高度要小了，这个时候就可以在wxss里面通过调节container得height
即可了
因为如果我们点击了那个输入框得胡，也就是聚焦了得话，我们得上面得搜索框的大容器显示的样式是和没聚焦的时候显示的不同的，所以我们就可以用三目运算符来通过这个isfocus来决定使用哪个容器，也就是说我们可以定义两个样式不同的容器了
之后我们就要通过逻辑里控制他们的聚焦切换不同的container了，如果是已经点击聚焦的了话，还有一个就是可以看到我们搜索的历史记录，还有列表等等
通过：
然后就是要搞一个搜索池了：
上面就吧搜索的关键词的布局搞好了，下面就是要对搜索的列表进行定义了（其实这个搜索的列表和我们好友的列表是很像的，可以直接直接copy在friendList.wxml里面的这个结构了
（未选中搜索框时
三、实现搜索历史记录及本地缓存
1、我们先在searc.wxml的输入框标签加一个处理点击这个输入框的一个点击事件
还有我们在取消的标签中，也要加一个点击事件，点击了的话就吧isFocus变成是false即可了
还有一个小bug就是，因为输入框的话，会默认只有在一个范围以内，才可以输入的，所以我们就可以让这个输入框适应整个范围，可以在
给search.wxss中添加一个代码：
.search-textinput{flex:1;}就让这个输入框可以自动的填满整个的搜索框了
3、之后就是对输入的东西进行处理了，可以是边输入边搜索，也可以是输入之后回车了才进行搜索，如果是边输入就边搜索的话，我们可以通过bindinput来进行监听的，那如果要是按回车的时候搜索怎么办呢---这个其实小程序帮我们搞好了
就可以通过在input中加上bindconfirm这个属性来完成的，我们就定义了一个handleConfirm这个方法是只有我们回车了才会进行触发的
默认的是我们的done也就是完成
所以就在input标签中，吧confirm-type属性变成是search即可了，（这样的话在手机的软键盘就会显示搜索两个字了）
（下面我们要做的就是吧这个搜索的放在历史里面管理起来了）
demo：
wx.setStorage({key:"key",data:"value"})设置的话，就是我们用户点击回车之后，就可以吧这个搜索里面的ev.detail.value放到本地存储里面即可了
因为这个setStorage的话，我们要让这个data是一个数组才行的，然后我们先通过
data:[111]看看能不能吧这个111存放到这个数组里面
可以在下面的调试板中找到Storage让我们查看一下
可以看到，我们随便输入一点东西，然后按回车之后可以看到
先在search.js的data里面定义一个数组
然后我们就可以在wxml中，吧我们的历史消息text，用一个数组来for出来了
然后我们在一开始聚焦了之后，就立马从storage里面吧数组拿出来，用getStorage方法：
使用上面的demo之后，会报错，这个报错一般都是因为success的回调的时候要用箭头函数才行的
wx.getStorage({key:'searchHistory',success:(res)=>{this.setData({historyList:res.data});}})修改了之后，我们点击聚焦之后
这个111就是我们刚刚写入到searchStorage数组里面的
（这个有一个小bug，就是，假如我们输入了两次相同的搜索，然后存入到历史记录再打印出来的话，会有两个的，我们不应该有两个相同的历史记录的
但是我们搜索重复词的话，我们也是显示一次，然后把这个搜索的提升到最前面去），表示最近搜索，并且历史记录也要有一个数量的，不能把在一年之间的全部搜索记录都显示出来的
这个去重的功能：1、实现克隆一份数组
(unshift的话就是往数组的头添加东西的，ES6本身就带有一个set来完成去重功能的）
handleConfirm(ev){//console.log(ev.detail.value);letcloneHistoryList=[...this.data.historyList];cloneHistoryList.unshift(ev.detail.value);wx.setStorage({key:"searchHistory",data:[...newSet(cloneHistoryList)]})}我们的效果就达到了，重复输入的话，会被提前，=
然后下面我们就要实现历史记录的删除功能了
就可以直接在这个删除图标的wxml中添加一个bindtap点击事件handleDelete即可了（这个删除的话，是删除掉全部的历史记录的）
wx.clearStorage()直接这样写即可了
====**但是这样可能如果我们后面在storage里面也定义了其他的东西，这个语句的话会把其他缓存也会清理掉的，所以我们这里还是使用remove好点的
wx.removeStorage({key:'key',success(res){console.log(res)}})因为我们也是要在这个成功的回到中，把这个历史数据数组设置为空数组，所以我们就要使用成功返回的箭头函数才行的