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

小程序中如何实现收藏

 1）首先把收藏按钮注册个点击事件，在这里我注册的是collect，
 我们可以用数据的id或者index，来检测是否被储存，具体做看下面代码

在Wxml中的代码

<text  bindtap="collect">
<text class="iconfont {{isCollect?'icon-shoucang1':'icon-shoucang'}}"> 收藏</text>
</text>

在js中的代码
具体的思路先写一个数组，用来储存需要收藏的数据， 再循环数组判断判断数组里每一个对象的id ，看是否为收藏过的。
如果id不相同就点击collect的事件就进行收藏，就在要储存的数组中push进去要储存的数据，
如果id相同就说明存储过了，再次点击说明就是取消收藏，就对储存的数据进行splice的操作进行删除
最后把调整过得数据进行存储 我这里用的是wx.setStorageSync( );
最后我们需要在点击事件的开始在调用下我们储存的数据，用来循环

Page({

  /**
   * 页面的初始数据
   */
  data: {
  Snum:0,
    isCollect:false,
  },
  obj:{
    collect:[]
  },

collect() {
  let collect = wx.getStorageSync('collect') || []
  console.log(collect);
let names=this.data.message.goods_name;
let price=this.data.message.goods_price;
let imgs=this.data.message.goods_big_logo;
let  id=this.data.message.goods_id;
let k=false;
let num=1;
let flag=false;
collect.forEach((item,index)=>{
if(item.id==id){
  k=true
  console.log();
  collect.splice(index,1)
  wx.showToast({
    title: '收藏取消',
  }) 
  this.setData({
    isCollect:false
  })
}
});
if(!k){
  collect.push({
imgs,
num ,
id,
names,
flag,
price  
})

wx.showToast({
  title: '收藏成功',
})
this.setData({
  isCollect:true
})

}
console.log(collect);
wx.setStorageSync('collect', collect);
this.getTotalPrice()
},

//在数据请求完成后，再次调用下收藏数据，让一进页面就行判断看是否储存过，判断图标的显示状态
onLoad: function (options) {
      let  id=this.data.message.goods_id;
      let arrs=wx.getStorageSync('collect') ||[]
      console.log(arrs);
      arrs.forEach(item=>{
         if(item.id=id){
           this.setData({
            isCollect:true
           })
         }
      })
    })
  },
}

我在点击事件collect中调用了个函数，那是判断一共收藏的条数。

  getTotalPrice() {
    let arr = wx.getStorageSync("collect");
console.log(arr);
    let Snum = 0
    for (let i = 0; i < arr.length; i++) {
        Snum += arr[i].num
    }
    console.log(Snum)
wx.setStorageSync('Snum', Snum)
  },
})

最后收藏功能就实现完成。

小程序中如何实现分享

只要在你写的button中设置open-type属性等于share，就可完成分享功能
代码如下，
在Wxml中

<button  open-type="share" class="nav_left">
  <text class="iconfont icon-yixianshi-"></text>
  <view>分享</view>
</button>

小程序中如何实现客服功能

这个功能的实现和分享功能一样，在button中设置open-type属性等于contact
代码如下，
在Wxml中

<button class="nav_left" open-type="contact">
  <text class="iconfont icon-kefu"> </text>
  <view>客服</view>
</button >

如果在参考的过程中有问题，还请各位码友指出