本文章主要写了如何调接口并且写出搜索框。

一、调接口

具体如何调接口，请看这个👉👉👉uniapp接口封装，这个是最详细的讲解如何调出一个接口

1.调搜索框的接口

下面我写的是如何调搜索框的接口

这个是在api/index.js里面写的

这里有参数所以下面这里也要写参数

// 首页 /api/index/search
export const getSearch = (message) => request({url: '/api/index/search',method: 'post',data: {message}})


//地址就是复制的图上面的东西    首页 /api/index/search  然后里面也要改成这个地址
//因为接口里有参数，所以这里也要写上参数message，前后都要写

2. 下面在搜索页面search里面写以下的内容

        import {getSearch} from '@/api' //这个需要放在<script>里面的最上面，也就是这个是                                        <script>里面的第一行代码


			async getSearch(){ //下面这些都是放在方法里面的
			  try {
			    const res = await getSearch(this.keyword)
				this.userInfo = res
			    console.log('getSearch', res)
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('getSearch', err)
			  }
			},

然后就是这样的

示例如下：

里面之所以要写keyword 是因为 keyword就是搜索的内容

因为搜索出的数据的数组是filterList

所以要this.filterList = res并且这个东西要写在 这一行代码const res = await getSearch(this.keyword)的下面

 然后保存运行就可以在微信小程序里面看到这个数据

 然后点开就会看到

 这里需要用到的东西就是图片 名字 时间 地点 多少钱

然后结果就是 

二、写出搜索框

上面在里面写了一个getsearch，是回车的时候触发这个方法，所以在回车事件里面写这个

 然后写，这个是历史记录

 然后因为数据太多，写了一个效果，加载中，就是下面俩行代码

 再删掉搜索出的固定数据

这里的数据要删除掉

然后下面判断，历史搜索记录超过十次，删掉第一次搜索的内容，显示最新搜索出的数据。 

下面的代码的意思就是把搜索出的内容存在缓存里，以防第二次进入的时候会没有数据。

 下面的是删除

confirm确定删除 cancel取消删除

 下面是点击历史搜索内容进入页面

先写一个点击事件

 然后在方法里面写

 最后下面的这个代码是写在onshow里的

这个代码的作用是搜索去掉重复的然后转数组，只让历史搜索显示一个