订水商城实战教程07-搜索

上一篇我们讲解了店铺信息的展示功能，本篇讲解一下搜索功能。通常小程序在首页都配置了搜索的功能，输入关键词进行检索，可以在结果页上进行选购。同时还记录了用户的搜索词，将高频出现的词列为热搜词，为了实现搜索词的记忆功能，需要将用户的搜索记录记录到数据源中。

1 创建数据源

打开控制台，点击数据模型，点击新建

输入名称热搜词

点击编辑添加字段

添加第一个字段热搜词，类型选择文本

添加第二个字段搜索次数，类型选择数字

再添加一个数据源，搜索历史记录

添加第一个字段搜索词，类型选择文本

添加第二个字段openid，类型选择文本

2 首页搜索功能

我们现在首页显示了店铺的名称，我们要在名称的右边显示搜索框，需要搭建一下布局，先添加一个普通容器，里边放置文本组件和单行输入组件，模板选择搜索框（填充）

选中普通容器，设置布局，横向排列，两端对齐，垂直居中

修改一下单行输入的宽度，设置为150

3 创建搜索页面

点击创建页面的图标，创建搜索页面


给首页的单行输入组件设置事件，聚焦的时候打开搜索结果页面

4 搭建搜索结果页面

先放入单行输入组件，模板选择搜索框

然后放入文本组件，内容修改为热门搜索

设置20的外边距

放入标签组件

选项的内容我们需要动态绑定，先创建一个变量，在左侧的代码区点击新建

选择新建微搭数据表查询

数据源选择热搜词，方法选择查询多条

设置排序字段，按照搜索次数降序排列，一共取5条数据

给标签项绑定数据，输入如下表达式

$w.hotsearch.data.records.map((item,index)=>{
  return {
    "label":item.rsc,
    "value":item.rsc
  }
})

设置一定的外边距

再添加一个普通容器，里边放置文本和图标组件

设置普通容器的布局，横向排列，两端对齐，垂直居中

修改文本内容为历史搜索，图标选一个删除的图标

下边添加标签组件

定义一个变量，数据源选择历史搜索记录

设置查询条件，openid等于登录用户的openid

给标签项绑定变量，绑定如下表达式

$w.userserach.data.records.map(item=>({"label":item.ssc,"value":item.ssc}))

总结

本篇我们主要实现了搜索的效果的搭建，后续要等我们主体功能设计完成才可以真正的实现搜索的具体效果。