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


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

    话不多说,先上代码

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

  • 相关阅读:
    minicap编译示例
    uniapp H5项目中使用腾讯地图sdk
    腾讯地图打车乘客端小车平滑移动-安卓篇
    地图定位打卡功能示例
    腾讯位置服务个性化图层创建及发布
    腾讯位置服务GPS轨迹回放
    使用腾讯地图实现汽车沿轨迹行驶功能
    地图GPS轨迹录制
    腾讯地图实现微信小程序地图定位教程
    基于腾讯地图定位组件实现周边POI远近排序分布图
  • 原文地址:https://www.cnblogs.com/zzppff/p/10362648.html
Copyright © 2020-2023  润新知