小程序 앱만들기 - 9 - 1 : 즐겨찾기 기능 만들기

유튜브 강좌 : youtu.be/lJel-nuZAoo

github : https://github.com/semotube/korTourInfo

 

 

먼저 아래 이미지와 같이 검색부분에 즐겨찾기를 추가해서 사용하도록 하겠습니다.

 

즐겨찾기 추가/삭제  처리

detail.wxml에서 bindtap부분처리

<!-- 즐겨찾기버튼 -->
  <view class="basis-1 flex align-center justify-center" bindtap="bindFavor">

소스처리

def.Favor : 즐겨찾기 스트링 정의

def.maxFavor : 즐겨찾기 갯수 100개 제한.

app.globalData.detailItem : 리스트에 사용되는 데이터를 사용하기 위해...

 

detail.js

//즐겨찾기 처리
/////////////////////////////////////////////////////////////////////////////////////////////////////////
  bindFavor() {
    let favorArray = wx.getStorageSync(def.Favor);
    if (favorArray == "") favorArray = [];
    const resIndex = favorArray.findIndex(obj => obj.contentid == this.data.contentid); //주의 number == string
    if( resIndex === -1 ) { // -1 찾지못함
      if(favorArray.length > def.maxFavor) {
        util.showModal("경고", "즐겨찾기의 갯수는\n " + def.maxFavor +"개를 넘을수 없습니다.", false)
        return;
      }
      favorArray = favorArray.concat(app.globalData.detailItem);
      wx.setStorageSync('favorArray', favorArray)
      util.showToast("즐겨찾기에 추가");
      this.setData({ isFavor: true, })
    } else {
      favorArray.splice(resIndex, 1);
      wx.setStorageSync('favorArray', favorArray)
      util.showToast("즐겨찾기에 삭제");
      this.setData({ isFavor: false, })
    }
  },

def.js 

// def.js
const AreaCode = "areaCodeArray";
const CategoryCode = "categoryCodeArray";
const Favor = "favorArray";
const maxFavor = 100;
module.exports = {
  AreaCode,
  CategoryCode,
  Favor,
  maxFavor,
}

app.js : 글로벌데이터 detailItem 정의

  globalData: {
    hasLogin: false,
    detailItem: null,
  }

search.js : 글로벌데이터 detailItem 사용

//bind Detail
////////////////////////////////////////////////////////////////////////////
  bindDetail(e) {
    let item = app.globalData.detailItem = e.currentTarget.dataset.item;
    wx.navigateTo({
      url: './detail/detail?contentid='+item.contentid+'&contenttypeid='+item.contenttypeid,
    })
  },

 

실행화면

 

 

즐겨찾기 아이콘 변경

소스처리

//공통정보  
  detailCommon(contentId, contentTypeId) {
  .
  .
  .
  
        that.setData({
          isFavor: that.getIsFavor(),
          [`tabArray[0].resArray`]: item,
        })
        
  .
  .
  .
  
  
//즐겨찾기 처리
/////////////////////////////////////////////////////////////////////////////////////////////////////////
  .
  .
  
  getIsFavor() {
    let favorArray = wx.getStorageSync(def.Favor);
    if (favorArray == "") favorArray = [];
    return favorArray.findIndex(obj => obj.contentid == this.data.contentid) === -1?false:true //주의 number == string
  },

레이아웃

detail.wxml :

<text class="cuIcon-{{isFavor?'favorfill':'favor'}} text-red"></text>

 

 

 

리스트 레이아웃 처리

소스처리

initData() : Tab 추가

onShow() : bindSearch() 호출 정의

tabSelect() : 필요시 bindSearch() 호출

bindSearch() : searchFavor() 호출

searchFavor() : wx.getStorageSync()를 이용해 resArray()에 데이터 저장.

 

search.js

  initData(){
    this.setData({
      tabArray: [
        new Tab("통합검색"),
        new Tab("행사검색"),
        new Tab("숙박검색"),
        new Tab("즐겨찾기"),
      ],
    })
    
    .
    .
    .
    
  onShow() {
    .
    .
    // 페이지가 보여질때 서버에 자료를 요구해야 하는 상황을 정의
    if(needSearch || !this.data.tabArray[this.data.TabCur].resArray.length || this.data.TabCur == 3 )
      this.bindSearch();
      
    .
    .
    .
      
  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
    })
    if(this.data.tabArray[this.data.TabCur].resArray.length == 0)
      this.bindSearch();
  },
 
    .
    .
    .
    
  bindSearch(type="reLoad") {
    .
    .
    
    switch (this.data.TabCur) {
      case 0://searchKeyword : 통합검색 
        this.searchKeyword();
        break;
      case 1://searchFestival : [행사] 날짜 검색
        this.searchFestival();
        break;
      case 2://searchStay : [숙박] 숙박 검색
        this.searchStay();
        break;
      case 3://즐겨찾기
        this.searchFavor();
        break;
      default: break;
  
    .
    .
    .
    
  searchFavor() {
    let that = this;
    let item = wx.getStorageSync(def.Favor);
    if (item == "") item = [];
    that.setData({
      [`tabArray[${that.data.TabCur}].pageTot`]: 1,
      [`tabArray[${that.data.TabCur}].resArray`]: item,
      [`tabArray[${that.data.TabCur}].pageNo`]: 1,//현재페이지 초기화.
    })
  },    
  

레이아웃

즐겨찾기 탭을 선택했을때는 조건 버튼을 비활성화 disabled시킨다.

<!-- 조건버튼 -->
  <view class="basis-xs flex align-center justify-center" bindtap="showModal" data-target="keyword">
    <button class="cu-btn round bg-red shadow" disabled="{{TabCur==3}}">조건</button>
  </view>
  
  .
  .
  .
  

<!-- 즐겨찾기 scroll-view -->
<block wx:if="{{TabCur==3}}">
  <scroll-view wx:if="{{tabArray[TabCur].resArray.length}}" scroll-y="{{modalName==null}}" class="page {{modalName!=null?'show':''}}">
    <view class="cu-list menu-avatar">
      <view class="cu-item" wx:for="{{tabArray[TabCur].resArray}}" wx:key="index" bindtap="bindDetail" data-item="{{item}}">
        <view class="cu-avatar radius lg" style="background-image:url({{item.firstimage2}});">
          <text wx:if="{{!item.firstimage2}}" class="cuIcon-picfill lg text-gray"></text>
        </view>
        <view class="content">
          <view>
            <text class="text-cut">{{item.title}}</text>
          </view>
          <view class="text-gray text-sm flex">
            <text class="cuIcon-phone text-grey margin-right-xs"></text> {{item.tel}}
          </view>
        </view>
        <view class="action">
          <view class="text-grey text-xs">{{script.toDate(item.modifiedtime)}}</view>
          <view class="text-grey text-xs"><text class="cuIcon-attention margin-right-xs"></text>{{item.readcount}}</view>
        </view>
      </view>
    </view>
  </scroll-view>
  <view wx:else class="padding-top-xl text-center text-shadow text-grey">
    <text class="text-bold text-xxl">데이터가 없습니다.</text>
  </view>
</block>

실행화면

 

 

 

나 페이지의 즐겨찾기와 연결시키기

나 페이지

user.wxml : bindtap 처리

<!-- 사용될 메뉴처리 -->
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
  <view class="cu-item arrow" bindtap="myFavor">
    <view class="content">
      <text class="cuIcon-favorfill text-grey"></text>
      <text class="text-grey">즐겨찾기</text>
    </view>
  </view>

 

소스처리

user.js : switchTab() queryString지원하지 않아 글로벌데이터 사용.

//즐겨찾기 페이지로 이동
/////////////////////////////////////////////////////////////////////////////
  myFavor() {
    app.globalData.isMyFavor = true;
    wx.switchTab({// tab 페이지는 switchTab를 사용
      // url: "/pages/search/search?type='myFavor'",//switchTab queryString지원하지 않음
      url: "/pages/search/search",
    })
  },

app.js

  globalData: {
    hasLogin: false,
    detailItem: null,
    isMyFavor: false,
  }

 

호출된 페이지 처리 => search.js

search.js

  onShow() {
    if(app.globalData.isMyFavor) {
      this.setData({ TabCur: 3 })
      app.globalData.isMyFavor = false;
    }