个人技术总结——微信小程序的搜索功能

技术概述

微信小程序搜索功能的实现（前端）

这个技术是做什么的

用于搜索商品。在我们团队开发的小程序中，用于输入关键字搜索商品。

什么情况下会使用到这个技术

开发需要搜索功能的小程序的时候会用到。

学习该技术的原因

团队项目设计时有设计。

技术的难点在哪里。

组件传参。不过后来解决了。

技术详述

由于我在团队中负责小程序的前端部分，所以我就只展示前端的实现过程啦。一开始我为了实现搜索商品的功能，先是用的组件，在没有和后端接轨时并没有考虑到那么多的问题，所以搜索组件也搞得花里胡哨的，看上去很牛。

但是后来和后端接轨了之后发现不是那么一回事啊，组件确实可以使用wx：request与后端连接，也确实能接受后端返回的数据，但是在显示到页面上时，我发现了一个问题，就是组件获取的数据该如何传给主组件（调用组件的页面）呢？在整个alpha阶段完成前，我们都没有解决这个传参问题。后来，在beta阶段，我灵机一动，直接把搜索组件换成搜索框不大功告成了吗？
是的。直接在主页面上方把原先调用组件的地方改成一个搜索框，就可以直接返回数据，不用传参！！！

代码

附上代码
这是搜索框，放在wxml里

  <view class="input_s" style="width: 662rpx; height: 81rpx; display: block; box-sizing: border-box">
<input style="width: 625rpx; height: 75rpx; display: block; box-sizing: border-box" type="text" bindinput="search"/>
</view>

这是js部分代码，调用后端的

search(e){
  console.log("搜索框当前输入"+e.detail.value);
  let content=e.detail.value 
  let that=this
       wx.request({
        url: 'http://118.89.54.160:8081/secpg', // 仅为示例，并非真实的接口地址
        method: 'post',
         data: {

           content:content
    //       //that.inputValue
    //       //content:e.currentTarget.dataset['content']
         },
    // //请求头  注：在get请求中可有可无，但post需要
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        
          success(res){
                  console.log("成功",res)
          
                 that.setData({
            dataList:res.data
          })
         
                  },
                  fail(res) {
                   console.log("获取数据失败", res)
                  }
      })
    
},

至于css，自行设计就可以。

总结

组件有时候是很好用，比如实现分类的时候，但有时候也是真复杂，比如传参的时候。比如这个搜索功能，直接一个输入框就可以搞定的，换成组件，由于我比较菜，反倒不懂怎么实现最基本的功能了。当然，大佬还是用组件比较合适。毕竟组件可以完成更多功能。