小程序實現單詞查詢搜索及搜索的歷史記錄

內容包含單詞短語搜索釋義、搜索歷史、推薦搜索、音頻播放、隨機抽取方法
效果如圖

 

話不多說，先上代碼

 

1、HTML

<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方法來講搜索記錄保存至本地並讀取顯示，與推薦搜索交替進行<br>

單詞搜索為扇貝API，商用需自行解決API收費問題

<br>
<br>

作者：zzppff
Github鏈接：https://github.com/zzppff/zzppff-miniprogram
原創方法，商業轉載請聯系作者獲得授權，非商業轉載請注明出處。