미니 프로그램에서 검색 기능을 구현하는 방법에 대한 심층 설명

미니 프로그램에서 일반 검색 기능을 구현하는 방법은 무엇입니까? 다음 기사는 미니 프로그램에서 검색 기능을 구현하는 방법을 단계별로 설명합니다. 도움이 되길 바랍니다.

각각의 작은 프로그램을 개발하는 과정에서 기본적으로 검색 기능이 탑재되게 되는데, 그럼 상대적으로 지능적인 검색 기능은 어떻게 구현되는 걸까요? 프레임 기능을 살펴보세요!

개발 준비

• WeChat 애플릿
• 반트 컴포넌트 라이브러리처럼

효과 표시

효과부터 먼저 살펴볼까요

사전 준비

사용된 일부 클라우드 데이터베이스 데이터 가져오기 검색창 기능 테스트

구현

디렉토리 아래에 세 개의 새 페이지를 생성하세요

색인은 검색창의 첫 번째 페이지로 사용됩니다

특정 검색에 사용되는 페이지 검색

hotsearch는 검색 콘텐츠의 상세 페이지입니다

우선 검색창 첫 페이지의 색인 레이아웃을 살펴보겠습니다. 여기서는 주로 검색창의 콘텐츠를 소개합니다. 아래 내용은 여기서 설명하지 않습니다.

index.wxml 코드입니다

      <view class="search_1" bindtap="gotoSearch">
          <van-search 
          placeholder="搜索单品" disabled
          />
        </view>
      <view class="search_2">
        <view class="pic" bindtap="list" >
          <image src=""></image>
        </view>
      </view>
    </view>

검색창의 search.wxml 코드입니다

  <view class="dewu-search">
    <view class="return" >
      <view class="return_pic" bindtap="gotoindex">
        <image src=""></image>
      </view>
      <view class="txt">搜索</view>
    </view>
  </view>
  <van-search 
      value="{{value}}" 
      show-action 
      placeholder="输入商品名称、货号"
      bind:clear="onClear" 
      bind:search="onSearch"   
      bind:cancel="oncancel" 
      bind:change="onchange"
      bindtap="input"
      value="{{value}}"
    />
    <block wx:if="results.length > 0">
      <van-cell wx:for="{{results}}" wx:key="_id" title="{{item.title}}"  size="large"  />
    </block>
    <view class="page1" hidden="{{issuggest==true?&#39;hidden&#39;:&#39;&#39;}}" >
        <view class="bd">
          <view class="content">热门搜索</view>
          <view class="box">
            <view class="items">
              <view class="item" wx:for="{{goods}}"
              wx:key="index"  bindtap="hotsearch" data-id="{{item.id}}"
              >
              {{item.hot}}
              </view>
            </view>
          </view>
        </view>
        <view class="last">
          <view class="content">搜索历史</view>
          <view class="box">
            <view class="items">
              <view class="item" wx:for="{{historyList}}" wx:key="index" data-id="{{item.id}}" bindtap="gotohistoryList"
              wx:key="index">
                {{item.hot}}
              </view>
            </view>
          </view>
        </view>
    </view>
    <view class="page2"   hidden="{{issuggest==false?&#39;hidden&#39;:&#39;&#39;}}">
      <view class="content1">
        <view class="title" wx:for="{{goods1}}" data-id="{{item.id}}"
              wx:key="index"  bindtap="hotsearch" >
              {{item.hot}}
        </view>
      </view>
    </view>
</view>

js 먼저, 클라우드 데이터베이스에 있는 데이터입니다. 소개해야 합니다

    const db = wx.cloud.database();
    const dewuCollection = db.collection('dewu');

입력 상자가 변경될 때 해당 내용이 팝업되도록 하려면 입력 상자에 내용 입력이 있을 때 해당 내용 페이지가 표시되는지 확인하기 위해 두 페이지가 필요합니다. 나타나야 합니다. indexOf를 사용하여 e.detail(입력 상자 내용)이 클라우드 데이터베이스에 존재하는지 확인하고, 존재하는 경우 이 데이터를 배열에 저장하고 이전에 검색한 내용을 연결합니다. 그런 다음 wx.setStorageSync();를 사용하여 입력 상자의 데이터를 저장소에 저장한 다음 wx.getStorageSync()를 사용하여 데이터를 추출합니다. hidden="{{issuggest==false?'hidden':''}}"indexOf判断e.detail（输入框内容）是否是在云数据库里存在的，如果是存在的，那么将这条数据存入一个数组里面，并且连接之前搜索后的数组，再使用 wx.setStorageSync();将输入框的数据存入到storage里面，然后再wx.getStorageSync()提取数据。

这是当输入框有数据的时候就会弹出详情页面，点击可以跳转到商品的详情页

这是搜索框的逻辑

    if(e.detail.length!=0){
        this.setData({
          issuggest:true,
        })
        var arr = [];
        console.log(this.data.goods.length);
            for (var i = 0; i < this.data.goods.length; i++) {
              if (this.data.goods[i].hot.indexOf(e.detail)>=0) {
                arr.push(this.data.goods[i]);
              }
              this.setData({
              goods1:arr,
           })
          }
    }
    else {
      console.log(&#39;succes&#39;);
      this.setData({
         issuggest:false
      })
    }
  },
    async onSearch(e){
    var arr1=new Array();
    var historyList=new Array();
    var storage=new Array();
    for (let i = 0; i < this.data.goods.length; i++){
      if(e.detail==this.data.goods[i].hot){
        arr1.push(this.data.goods[i]);
        console.log(arr1);
        break
      }
      else{
              arr1.push(e.detail);
              console.log(arr1);
        }
    }
    if(arr1.length>1){
      this.setData({
        storage:arr1.slice(arr1.length-1,arr1.length)
      })
    }
    else{
      console.log(arr1,&#39;要存进去的数据&#39;);
      this.setData({
        storage:arr1
      })
    }
    if(this.data.historyList !=[]){
      this.data.historyList = this.data.historyList.concat(this.data.storage);//连接
    }
    else{
      this.data.historyList=this.data.storage
    }
   wx.setStorageSync(&#39;historyList&#39;, this.data.historyList);
   this.setData({
    historyList:this.data.historyList
  })
  },

wx.navigateTo可以用来跳转到详细的页面，加上字符串模板，判断id的值，用数据来驱动页面，跳转到相同的页面不同的数据。

wx.navigateTo({
      url: `../hotsearch/hotsearch?id=`+id
    })

最后还要更新数据

     wx.showLoading({
       title: '数据加载中...',
     })   
     setTimeout(()=>{
      wx.hideLoading()
       this.setData({
          goodsNav: nav,
          goodsList:List,
          recommend:List,
          goods2:this.data.historyList
       })
      },1000)
// console.log(goodsList,'===========');
   },

注意不要忘记要在全局json或者局部页面json里引入需要使用的组件的地址

    "usingComponents": {
        "van-search":"./miniprogram_npm/@vant/weapp/search/index"
  },

扩展

这个自动跳转到导航栏中间的功能也是挺常用的

这是wxml代码 最主要的是 scroll-x="true" 让导航栏在水平方向可以滑动scroll-with-animation="true"是让滑动产生动画，scroll-into-view="{{scrollTop}}"

      <scroll-view  scroll-x="true"
                 scroll-with-animation="true"
                 style="width:100%;" class="scroll-view_H " 
                 scroll-into-view="{{scrollTop}}">
        <view 
        wx:for="{{goodsNav}}"
        wx:key="index"
        id="{{item.id}}"
        data-index="{{index}}"
        data-type="{{item.type}}"
        bindtap="changegoods"
        class="scroll-view-item_H {{activeNavIndex == index?&#39;active&#39;: &#39;&#39;}}  "
        >
          <text>{{item.text}}</text>
        </view>
      </scroll-view>
    </view>

这是绑定在导航栏上面的事件 let {index, type} = e.currentTarget.dataset;提取到 index 和 type ，然后设置一个count作为前几个不动，然后拼接给id，把id的值传给scrollTop，让导航栏跳到scrollTop입력란에 데이터가 있을 때 나타나는 상세페이지입니다. 클릭하시면 상품 상세페이지로 이동합니다

이것이 검색창의 논리입니다

     console.log(e);
    let {index, type} = e.currentTarget.dataset;
    console.log("index=" +index, "type="+type);
    this.setData({
      activeNavIndex:index
    })
    if (type == 'recommend') {
      this.setData({
        goodsList: this.data.recommend
      })
    } 
    else {
        let goods = this.data.recommend.filter((good) => good.camptype == type )
        this.setData({
          goodsList: goods
        })
        //console.log(this.data.goods)
      }
    
      var index1 = e.currentTarget.dataset.index;
      var count = 2;
      var id = "item"+(index1-count);//拼接id
      if(count == 2 && index1 < 3 || count == 3 && index1 < 2 || count == 4 && index1 < 3){
        id = "item0";
      }
      console.log("下标",index1,"---分类id名称",id)
      this.setData({
        scrollTop: id
      })
    },

wx.navigateTo를 사용하여 점프할 수 있습니다. 세부 페이지에 문자열 템플릿을 추가하고, ID 값을 결정하고, 데이터를 사용하여 페이지를 구동하고, 다른 데이터가 있는 동일한 페이지로 이동합니다.

rrreee

🎜마지막으로 데이터를 업데이트해야 합니다🎜🎜rrreee🎜글로벌 json 또는 로컬 페이지 json에서 사용해야 하는 컴포넌트의 주소를 입력하는 것을 잊지 않도록 주의하세요🎜rrreee

extend🎜🎜this 네비게이션 바 중앙으로 자동 점프하는 기능도 아주 흔해요🎜🎜🎜🎜wxml 코드입니다. 가장 중요한 것은 scroll-x="true"이므로 탐색 모음이 가로 방향으로 슬라이드될 수 있습니다. scroll-with-animation ="true"는 슬라이드에 애니메이션을 적용하는 것입니다. scroll-into-view="{{scrollTop}}"🎜rrreee🎜이것은 탐색 모음에 바인딩된 이벤트입니다 let {index, type} = e.currentTarget.dataset;인덱스와 유형을 추출한 다음 개수를 처음 몇 개로 설정한 다음 연결합니다. id에 넣고 id 값을 scrollTop에 전달하고 탐색 모음이 scrollTop 값으로 점프하도록 합니다. code>. 이 값은 중간🎜rrreee🎜이런 식으로 wxss를 추가하면 효과를 얻을 수 있습니다. 그러나 이렇게 쓰면 문제가 있는데, 즉 표시된 내용이 6과 같이 짝수인 경우에는 가운데로 정확하게 점프하지 못하고 3의 위치로 점프하게 되어 약간의 편차가 발생하게 됩니다. . 아직 이 문제를 해결하지 못했습니다. 해결 방법을 아시는 분 계시나요? 🎜🎜소스 코드🎜🎜여기에 프로젝트의 전체 소스 코드가 있습니다. 관심이 있으시면 전체 소스 코드를 확인하실 수 있습니다🎜🎜🎜https://gitee.com/xinccc/ fullstack_huoshan/tree/master/wxapp/dewu🎜

요약

처음으로 조금 완성도 높은 프로젝트를 작성하게 되었습니다. 여기서는 개발 과정에서 겪은 주요 어려움을 주로 소개합니다. 비록 일반적인 어려움은 없지만 그래도 나에게는 큰 의미가 있습니다. 그러한 경험을 통해 저는 아직 배울 것이 많다는 것을 깨달았습니다. 또한 제가 어려움을 겪을 때 저를 지도해 준 선생님들과 반 친구들에게도 감사드립니다. 좋아요를 눌러주시면 저에게 큰 힘이 될 것입니다. 조언이 있으시면 댓글란에서 함께 토론하고 배울 수 있기를 바랍니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 미니 프로그램에서 검색 기능을 구현하는 방법에 대한 심층 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!