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

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

效果如图：

话不多说，先上代码

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>

 onShow: function () {const that = thiswx.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 = thisconst text = e.currentTarget.dataset.keyconsole.log(text)that.setData({text: text}, ()=> {that.toSearch()})},//获取单词释义toSearch: function () {const word = this.data.textconst 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 = trueinnerAudioContext.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 = thisconsole.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
原创方法，商业转载请联系作者获得授权，非商业转载请注明出处。

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

好玩的表情包机器人微信小程序源码下载支持直接搜索仿聊天界面
这是一款和表情包有关的一款机器人小程序界面就相当于是聊天界面,然后是你和AI的界面打开小程序后会自动全网推送几个表情包给你然后你可以点击下方的说你还要然后又会随机发给你当然你也可以输入关键词然 ...
好玩的表情包机器人微信小程序源码下载支持直接搜索仿聊天界面获取支持流量主
这是一款和表情包有关的一款机器人小程序界面就相当于是聊天界面,然后是你和AI的界面打开小程序后会自动全网推送几个表情包给你然后你可以点击下方的说你还要然后又会随机发给你当然你也可以输入关键词然 ...
微信小程序自定义组件之胶囊对齐搜索FloatSearch
大家好哇,我是梦辛工作室的灵,最近又写了一个 ui组件,是与微信小程序胶囊所对齐的一个搜索框,还带展开过度动画哦,老样子,先看效果图效果还是不错的,然后来看下如何使用: //先引入组件 &qu ...
微信小程序（第七章）- 搜索框的实现
微信小程序(第七章)- 搜索框的实现搜索框的组成定义布局容器微信小程序1个页面所对应的4个文件具体实现步骤框架实现样式实现搜索框的组成外部容器i 内部容器两者关系:外部容器包裹内部容 ...
壁纸小程序源码，支持图片搜索，下载，分享，可对接流量主
很多小伙伴都喜欢给自己的博客站,搞一个小程序,让用户能方便访问.为什么小程序如此受青睐呢?因为小程序与APP的直接区别就是,我能在微信上直接得到我想要东西,比如看文章,下载壁纸,而不用繁琐的去下载AP ...
（已更新）壁纸小程序源码，支持图片搜索，下载，分享
很多小伙伴都喜欢给自己的博客站,搞一个小程序,让用户能方便访问.为什么小程序如此受青睐呢?因为小程序与APP的直接区别就是,我能在威信上直接得到我想要东西,比如看文章,下载壁纸,而不用繁琐的去下载AP ...
uni-app 小程序使用腾讯地图完成搜索功能
前言使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下. 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用. 由于 ...
微信小程序之快递查询（完整版）
一.简介: 点击按钮查看快递信息.我也在网上找了很多快递查询的例子,但是它们都不是很详细.在代码上他们都没错,但是在配置上却缺少了一些东西,导致我们这些白嫖党并没有什么用,对于程序中出现的一些错误无法 ...
微信小程序 | 小鸡单词2.0
2018-11-02 更新 UI美化没了 2018-10-30 更新项目主页:背单词微信小程序–小鸡单词该项目已上架微信小程序市场,可以通过微信搜索"小鸡单词"进行使用项目 ...
微信小程序使用物流查询插件
微信小程序使用物流查询插件文章目录微信小程序使用物流查询插件添加插件添加成功使用方式声明使用插件引入插件包效果图物流查询插件添加插件登录微信公众平台后台->设置->第 ...

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

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

最新文章

热门文章