标签：function 历史记录 console log 程序实现 res historyList 搜索 data

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

话不多说，先上代码

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
原创方法，商业转载请联系作者获得授权，非商业转载请注明出处。

标签：function,历史记录,console,log,程序实现,res,historyList,搜索,data
来源： https://www.cnblogs.com/zzppff/p/10362648.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。