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

小程序中这怎么写收藏、分享、客服功能？

 

一、收藏：①先进入详情页，需要获取本地存储收藏的数据，

           ②之后拿这个数据和当前获取到详情页的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>