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

zzppff 2019-02-11 原文

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

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

 

话不多说,先上代码

 

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

 

发表于 2019-02-11 17:39 zzppff 阅读() 评论() 编辑 收藏

 

版权声明:本文为zzppff原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/zzppff/p/10362648.html

小程序实现单词查询搜索及搜索的历史记录的更多相关文章

  1. 云开发数据库又增新技能!

    开篇彩蛋 由于近期小程序·云开发将上线付费功能(付费功能针对非基础资源配额,基础资源配额仍可免费使用)。为了给 […]...

  2. 倒计时功能

    小程序倒计时的显示有两种方法: 一种是列表式的,另外一种是详情式 (1)列表式 test.wxml <b […]...

  3. 微信小程序 PHP后端form表单提交实例详解

    微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/70927 […]...

  4. 微信小程序-页面下拉

    微信小程序当滑动到最顶部和最底部时,继续下拉,会将整个页面拉下去或者拉上去,本来以为是客户端自有的特性,就没去 […]...

  5. 微信小程序 引用其他js里的方法

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 每天 […]...

  6. 微信小程序–使用云开发完成支付闭环

    微信小程序–使用云开发完成支付闭环 1.流程介绍 2. 代码实现和逻辑思想描述 云函数统一下单 对 […]...

  7. 小程序开发之点击事件

    在小程序的api中发现点击事件有两种bindtap和catchtap两个,发现两个都可以实现点击事件该有的功能 […]...

  8. 揭密微信跳一跳小游戏那些外挂

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:Hahn, 腾讯高级UI工程师 由 WeTest […]...

随机推荐

  1. 产品经理之路(六)

    本文简述产品经理的工作方法及应用之商业需求分析。 一、需求采集 1、需求来源渠道 ①公司内部(老板、其他部门或 […]...

  2. Keil C51学习 5 定时器/计数器

           定时器/计数器 应用场合:定时或延时控制、对外部事件的检测、计数等。 计数器 就是对外部输入脉冲 […]...

  3. eShopOnContainers 看微服务③:Identity Service

    通常,服务所公开的资源和 API 必须仅限受信任的特定用户和客户端访问。那进行 API 级别信任决策的第一步就 […]...

  4. 201771010134-杨其菊 实验三 结对项目—《西北师范大学疫情防控信息系统》项目报告 – 小良子Ya

    201771010134-杨其菊 实验三 结对项目—《西北师范大学疫情防控信息系统》项目报告 实验三 《西北师 […]...

  5. FFmpeg之AVPacket

    FFmpeg之AVPacket 花满楼原创 AVPacket,是压缩数据的结构体(解码前或编码后的结构体)。 […]...

  6. 第十三课:微服务基本知识-微服务调用及运行过程

    微服务调用及运行过程 3. 微服务调用及运行过程 3.1 为什么分析微服务过程调用 在实际的项目中,微服务之间 […]...

  7. Java经典小游戏——贪吃蛇简单实现(附源码)

    一、使用知识 Jframe GUI 双向链表 线程 二、使用工具 IntelliJ IDEA jdk 1.8 […]...

  8. STM32 摄像头实验OV2640

    OV2640的引脚定义与正点原子的定义相同,这里主要说几个注意事项 硬件部分 关于SCCB OV2640或者是 […]...

展开目录

目录导航