小程序实现单词查询搜索及搜索的历史记录

内容包含单词短语搜索释义、搜索历史、推荐搜索、音频播放、随机抽取方法

效果如图：

话不多说，先上代码

1. wxml

<input name="text" type='text' class="text" bindinput="getText" value="{{inputValue}}" bindconfirm="toSearch" placeholder='请输入要查询的单词或短语' bindfocus="historyList" />
<!-- 推荐搜索 -->
<view class="history" hidden='{{!hidden}}'>
  <view class="historyTitle">{{historyList == '' ? '推荐搜索' : '历史搜索'}}</view>
  <block wx:if="{{historyList == ''}}" wx:key="{{randomList}}" wx:for="{{randomList}}">
    <view class="historyList" data-key="{{item}}" bindtap="historySearch">{{item}}</view>
  </block>
  <block wx:if="{{historyList !== ''}}" wx:key="{{historyList}}" wx:for="{{historyList}}" wx:if="{{ index < 5 }}">
    <view class="historyList" data-key="{{item}}" bindtap="historySearch">{{item}}</view>
  </block>
</view>

2. js

 onShow: function () {
    const that = this
    wx.getStorage({
      key: 'historyList',
      success: function(res) {
        console.log('缓存获取成功')
        that.setData({
          historyList: res.data
        })
      },
      fail: function () {
        console.log('缓存获取失败')
        that.setData({
          //本地的一组单词数据
          randomList: util.getRandom(that.data.randomWord, 5)
        })
      }
    })
  },
  //获取焦点时展示搜索记录
  historyList: function () {
    this.setData({
      hidden: true,
      inputValue: ''
    })
  },
  //历史列表点击搜索方法
  historySearch: function (e) {
    const that = this
    const text = e.currentTarget.dataset.key
    console.log(text)
    that.setData({
      text: text
    }, ()=> {
      that.toSearch()
    })
  },
  //获取单词释义
  toSearch: function () {
    const word = this.data.text
    const that = this
    //直接入栈即可，使用let返回的是长度值报错
    that.data.historyList.unshift(word)
    console.log("word-->" + word)
    //扇贝API获取单词释义
    wx.request({
      url: 'https://api.shanbay.com/bdc/search/?word=' + word,
      data: {},
      method: 'GET',
      success: function (res) {
        console.log("单词释义-->" + res.data)
        that.setData({
          content: res.data,
          hidden: false,
          historyList: that.data.historyList
        })
      },
      fail: function () {
        wx.showModal({
          title: '',
          content: '网络错误',
          showCancel: false,
          success: function (res) {

          }
        })
      }
    })
  },
  //播放音频
  playAudio: function () {
    const innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.autoplay = true
    innerAudioContext.src = this.data.content.data.audio_addresses.us[0]
    innerAudioContext.onPlay(() => {
      console.log('开始播放')
    })
    //循环播放bug 需播放完后销毁音频
    innerAudioContext.onStop(() => {
      innerAudioContext.destroy()
    })
    //播放错误时输出错误，销毁音频重新播放
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
      innerAudioContext.destroy()
    })
  },
  //获取表单数据
  getText: function (e) {
    this.setData({
      text: e.detail.value,
      hidden: true
    })
  },
  //清空表单数据
  clearInput: function () {
    this.setData({
      typeValue: '',
      text: ''
    })
  },
  //设置搜索缓存
  searchStorage: function () {
    const that = this
    console.log('退出页面')
    wx.setStorage({
      key: 'historyList',
      data: that.data.historyList,
      success: function () {
        console.log('缓存成功')
      }
    })
  },
  onHide: function () {
    this.searchStorage()
  },
  onUnload: function () {
    this.searchStorage()
  }

3、util.js中的随机抽取方法

//随机抽取单词
const getRandom = function (arr, count) {
  let shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
  while (i-- > min) {
    index = Math.floor((i + 1) * Math.random());
    temp = shuffled[index];
    shuffled[index] = shuffled[i];
    shuffled[i] = temp;
  }
  return shuffled.slice(min);
}

原理：通过setStorage和getStorage方法来讲搜索记录保存至本地并读取显示，与推荐搜索交替进行

单词搜索为扇贝API，商用需自行解决API收费问题

作者：zzppff
Github链接：https://github.com/zzppff/zzppff-miniprogram
原创方法，商业转载请联系作者获得授权，非商业转载请注明出处。