微信小程序搜索框样式怎么开发？

　　使用微信小程序的时候就会同步需要使用到小程序搜索功能，对于搜索功能的实现，大家需要开发一个小程序搜索页面。那么微信小程序搜索框样式是什么样的?怎样开发小程序的搜索框?以下是相关资料。

　　因为只是写个搜索页面，所以主页面就没有好好切，见谅。。。主页面就是下面这样：

　　点击页面中 黄色的input就可以跳转到真正的搜索页面

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

　　接下来还要讲下搜索页面的逻辑:其实也非常简单。

　　搜索input绑定bindInput函数，

　　[javascript] view plain copybindInput:function(e){

　　this.setData({

　　inputValue:e.detail.value

　　})

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

　　},

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

　　[javascript] view plain copysetSearchStorage:function(){

　　let data;

　　let localStorageValue = [];

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

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

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

　　searchData.push(this.data.inputValue)

　　wx.setStorageSync('searchData', searchData)

　　wx.navigateTo({

　　url: '../result/result'

　　})

　　}else{

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

　　}

　　// this.onLoad();

　　},

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

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

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

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

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

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

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

　　[javascript] view plain copymodalChangeConfirm:function(){

　　wx.setStorageSync('searchData',[])

　　this.setData({

　　modalHidden:true

　　})

　　wx.redirectTo({

　　url: '../search/search'

　　})

　　},

　　这里的清除不是应用wx.clearStorage()删除的，以为clearStorage会将所有的localStorage都删掉，慎用!

　　这样，小程序搜索框就做好了!

　　看完以上资料，大家对于微信小程序搜索框样式以及开发方法是不是都了解了呢?参照上面的实例，大家可以进行小程序搜索框的开发了，是不是很简单呢?更多相关资料请关注微信小程序商店。

　　微信小程序关键词怎么做，关于关键词搜索的三个重点

　　如何解决微信小程序搜索不能用的问题?

　　微信小程序怎么搜索?搜索小程序的方式