微信小程序实现历史搜索功能的全过程(h5同理)

好的！微信小程序实现历史搜索功能的全过程可以分为以下几个步骤：

1. 提供搜索框和搜索按钮

首先，在小程序页面中提供搜索框和搜索按钮。可以使用<input>元素和<button>元素实现。

<!-- 在 wxml 文件中 -->
<view class="search-box">
  <input class="search-input" placeholder="请输入搜索内容" bindinput="onInput" value="{{ keyword }}" />
  <button class="search-btn" bindtap="onSearch">搜索</button>
</view>

/* 在 css 文件中 */
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.search-input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.search-btn {
  margin-left: 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

2. 将搜索关键词存储到本地

当用户输入搜索关键词并点击搜索按钮时，将关键词存储到本地，以便用户下次使用搜索功能时可以看到历史搜索记录。

可以通过wx.setStorageSync()方法将关键词存储到本地缓存中。

onSearch: function() {
  const keyword = this.data.keyword.trim();

  if (!keyword) {
    wx.showToast({
      title: '请输入搜索内容',
      icon: 'none'
    });
    return;
  }

  wx.setStorageSync('searchHistory', keyword);

  // 执行搜索操作
  this.doSearch();
}

3. 获取历史搜索记录并展示

在搜索框下方展示历史搜索记录，可以通过wx.getStorageSync()方法获取本地缓存中存储的历史搜索记录，并将记录展示在页面上。

onLoad: function() {
  const searchHistory = wx.getStorageSync('searchHistory') || [];

  this.setData({
    searchHistory
  });
}

<!-- 在 wxml 文件中 -->
<view class="history">
  <view class="history-title">历史搜索</view>
  <view class="history-list">
    <block wx:for="{{ searchHistory }}" wx:key="index">
      <text class="history-item">{{ item }}</text>
    </block>
  </view>
</view>

/* 在 css 文件中 */
.history {
  margin-top: 20px;
}

.history-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
}

.history-item {
  padding: 5px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  border-radius: 5px;
  font-size: 14px;
}

示例1：搜索关键字存储

假如用户在搜索框中输入了关键词微信小程序，点击搜索按钮后，将该关键词存储到本地缓存中。

onSearch: function() {
  const keyword = this.data.keyword.trim();

  if (!keyword) {
    wx.showToast({
      title: '请输入搜索内容',
      icon: 'none'
    });
    return;
  }

  wx.setStorageSync('searchHistory', keyword);

  // 执行搜索操作
  this.doSearch();
}

示例2：清空历史搜索记录

假如用户想要清空历史搜索记录，可以添加一个clearHistory方法，将本地缓存中的历史搜索记录清空，并刷新页面展示。

clearHistory: function () {
  wx.removeStorageSync('searchHistory');
  this.setData({
    searchHistory: []
  });
}

<!-- 在 wxml 文件中 -->
<view class="history-operate">
  <text class="clear-btn" bindtap="clearHistory">清空历史记录</text>
</view>

/* 在 css 文件中 */
.history-operate {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.clear-btn {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  color: #666;
  user-select: none;
}

至此，微信小程序实现历史搜索功能的全过程就介绍完了。同样的，以上代码在 H5 端同样适用。