小程式收藏、分享、客服功能

目錄

• • 小程式收藏
  • 分享
  • 客服功能

小程式收藏

首先是進入頁面

實作思路：首先，我們進入詳情頁的時候需要擷取一下本地存儲收藏的資料，然後拿這個資料根目前擷取到詳情頁的id進行對比，如果有相同的id，我們可以把一個變量變為true，然後我們的收藏圖檔的類名根據這個變量的true/false來改變。

wxml頁面

<text class="iconfont  {{flag?'icon-Collection cor':'icon-shoucang1'}} "></text> 
// 使用三元運算符，如果這個變量為true，就加第一個，如果為false，就加第二個類名
// 字型圖示來自 案例巴巴矢量圖示庫
           

js代碼

page({
	onLoad: function (options) { // 頁面加載執行
    let arr = wx.getStorageSync('collect') || [];		// 擷取本地存儲種的資料
    app.http.category.getGoodsDetail({ goods_id: options.id }).then(res => {
     // 封裝好的wx.request
    // 請求詳情頁資料
      let data = res.data.message;
      this.setData({
        flag: arr.some(item => { // 判斷一個數組中有沒有符合條件的，如果有傳回true，否則傳回flase
          return item.id == data.goods_id
        }),
        obj: data,
      })
    })

  },
})
           

點選的時候

實作思路：當我們點選的時候，擷取一下本地存儲的資料，然後我們可以使用findIndex方法來判斷，如果每一項的id等于我們目前頁的id就會傳回目前項的下标，我們可以根據這個下标進行判斷，如果下标不等于-1，就是本地存儲種有，我們就删除。否則就是沒有，我們就添加。在判斷下面我們那個變量取一下自身的反。在最後把我們的資料存一下本地存儲。

page({
	 collect() { // 單擊觸發的函數
    let title = '收藏成功' // 用于提示資訊
     let arr = wx.getStorageSync('collect') || []; //擷取一下本地存儲中的資料
    let index = arr.findIndex(item => { // 從資料中找有沒有id相同的
      return item.id == this.data.obj.goods_id
    })
    
    if (index != -1) { // 不等于-1表示有
      title = '取消收藏';  // 提示資訊改為 取消收藏
      arr.splice(index, 1);  // 删除這一項
    } else {  // 否則就是沒有
      arr.push({  // pushi進一個對象
        id: this.data.obj.goods_id,
        image: this.data.obj.goods_small_logo,
        name: this.data.obj.goods_name,
        price: this.data.obj.goods_price,
      });
    }
    wx.showToast({ // 微信封裝的輕提示
      title:title  // 提示資訊
    })
    this.setData({  // 這個變量取自身反
      flag: !this.data.flag,
    })
    wx.setStorageSync('collect', arr); // 在存進本地存儲中
  },
})
           

分享

分享，是我們小程式封裝好的，是以直接使用就可以了。

<button open-type="share"> 分享</button> // 這個屬性是我們小程式封裝好的
           

客服功能

客服功能頁是我們小程式封裝好的。

<button open-type="contact"> 聯系客服</button> // 這個屬性是我們小程式封裝好的