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

目录

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

小程序收藏

首先是进入页面

实现思路：首先，我们进入详情页的时候需要获取一下本地存储收藏的数据，然后拿这个数据根当前获取到详情页的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> // 这个属性是我们小程序封装好的