微信小程序网页搜索怎么做?如何实现小程序网页搜索?

时间：2023-07-01 14:05 阅读数：89 人阅读分类：知识百科

　　微信小程序网页搜索怎么做?如何实现小程序网页搜索?目的已经有越来越多的微信小程序了，而且在微信上也有微信小程序入口哦，微信小程序网页搜索怎么做呢?下边为大家进行介绍。

　　微信小程序网页搜索怎么做?

　　微信小程序网页搜索就是指在微信小程序中，也可以搜索网页哦，微信小程序网页搜索的效果如下：

　　如果点击页面中黄色的input就可以跳转到真正的搜索页面去了哦。

　　而且搜索页面中也是有个input搜索框，旁边有个小叉号，可以清除input里的文字。

　　微信小程序网页搜索怎么实现?微信小程序网页搜索所需要的微信小程序代码如下：

　　搜索input绑定bindInput函数，

　　2.bindInput:function(e){

　　3. this.setData({

　　4. inputValue:e.detail.value

　　5. })

　　6. console.log('bindInput'+this.data.inputValue)

　　7. },

　　将输入的值存在inputValue中，搜索button 用bindtap绑定setSearchStorage函数

　　2.setSearchStorage:function(){

　　3. let data;

　　4. let localStorageValue = [];

　　5. if(this.data.inputValue != ''){

　　6. //调用API从本地缓存中获取数据

　　7. var searchData = wx.getStorageSync('searchData') || []

　　8. searchData.push(this.data.inputValue)

　　9. wx.setStorageSync('searchData', searchData)

　　10. wx.navigateTo({

　　11. url: '../result/result'

　　12. })

　　13. }else{

　　14. console.log('空白的你搜个蛋!')

　　15. }

　　16. // this.onLoad();

　　17. },

　　这个小程序函数主要就是先判断输入的值是否不为空，再通过getStorageSync获取到key为searchData的localStorage，

　　如果第一次还没有set过这个key就获取[]，再将用户inputValue存的想要搜索的值放进searchData，之后再跳转到result页面。这里我只放了个案例页面。

　　如果在真正的生产环境中，这个函数可以通过wx.request向服务器发送请求，再把数据放进result页面中，实现真正的搜索功能。

　　删除inputValue的button功能实现也很简单，setData将inputValue设置为空字符串就可以了。

　　放点击result页面左上角的返回时，你就可以发现，你刚才搜索的结果已经放到了search的页面中。

　　当你想要删除缓存小程序数据的时候，可以点击清空浏览记录按钮，会弹出个对话框：

　　点击确认删除之后，会自动刷新页面(重定向到本页面)，将之前的key为searchData的localStorage重置为空数组。

　　2.modalChangeConfirm:function(){

　　3. wx.setStorageSync('searchData',[])

　　4. this.setData({

　　5. modalHidden:true

　　6. })

　　7. wx.redirectTo({

　　8. url: '../search/search'

　　9. })

　　10. },

　　微信小程序网页搜索就制作完成了。

　　微信小程序网页搜索怎么做呢?各位亲们可以参考以上小编的方法去在微信小程序中制作网页搜索，其实方法十分的简答，感谢各位亲们的观看，大家请多多关注微小乔哦。