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

 

前言:

     商品收藏

  1.    发送请求获取数据 
  2.     页面onShow的时候  加载缓存中的商品收藏的数据
  3.     判断当前商品是不是被收藏 
  4.     是 改变页面的图标
  5.     不是 则不改变   

    点击商品收藏按钮

  • 判断该商品是否存在于缓存数组中

  • 已经存在 把该商品删除
  •  没有存在 把商品添加到收藏数组中 存入到本地存储中即可

代码如下:

结构以及样式布局

<view class="detail_swiper">
  <swiper autoplay circular indicator-dots>
    <swiper-item wx:for="{{goodsObj.pics}}" wx:key="pics_id" bindtap="handlePrevewImage" data-url="{{item.pics_mid}}">
      <image mode="widthFix" src="{{item.pics_mid}}"></image>
    </swiper-item>
  </swiper>
</view>

<view class="goods_price">¥{{goodsObj.goods_price}}</view>
<view class="goods_name_row">
  <view class="goods_name">{{goodsObj.goods_name}}{{goodsObj.goods_name}}</view>
  <view class="goods_collect" bindtap="handleCollect">
    <text class="iconfont   {{isCollect?'icon-shoucang':'icon-shou_cang'}} "></text>
    <navigator url="/pages/collect/collect">
      <view class="collect_text">收藏</view>
    </navigator>
   
  </view>
</view>

<view class="goods_info">
  <view class="goods_info_title">图文详情</view>
  <view class="goods_info_content">
    <!-- 富文本 -->
    <!-- {{goodsObj.goods_introduce}} -->
    <rich-text nodes="{{goodsObj.goods_introduce}}"></rich-text>
  </view>
</view>

<view class="btm_tool">
  <view class="tool_item">
    <view class="iconfont icon-kefu"></view>
    <view>客服</view>
    <button open-type="contact"></button>
  </view>
  <view class="tool_item">
    <view class="iconfont icon-Share"></view>
    <view>分享</view>
    <button open-type="share"></button>
  </view>
  <navigator open-type="switchTab" url="/pages/cart/cart" class="tool_item">
    <view class="iconfont icon-shop"></view>
    <view>购物车</view>
  </navigator>
  <view class="tool_item btn_cart " bindtap="handleCartAdd">
    加入购物车
  </view>
  <view class="tool_item btn_buy">
    立即购买
  </view>
</view>
/* pages/goods_detail/detail.wxss */
page {
  padding-bottom: 90rpx;
}
.detail_swiper swiper {
  height: 65vw;
  text-align: center;
}
.detail_swiper swiper image {
  width: 60%;
}
.goods_price {
  padding: 15rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: var(--themeColor);
}
.goods_name_row {
  border-top: 5rpx solid #dedede;
  border-bottom: 5rpx solid #dedede;
  padding: 10rpx 0;
  display: flex;
}
.goods_name_row .goods_name {
  flex: 5;
  color: #000;
  font-size: 30rpx;
  padding: 0 10rpx;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods_name_row .goods_collect {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1rpx solid #000;
}
.goods_name_row .goods_collect .icon-shou_cang {
  color: orangered;
}
.icon-shoucang{
  color: red;
}
.goods_info .goods_info_title {
  font-size: 32rpx;
  color: var(--themeColor);
  font-weight: 600;
  padding: 20rpx;
}
.btm_tool {
  border-top: 1rpx solid #ccc;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  display: flex;
}
.btm_tool .tool_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  position: relative;
}
.btm_tool .tool_item button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.btm_tool .btn_cart {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffa500;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}
.btm_tool .btn_buy {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #eb4450;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}

收藏功能的实现

在data中定义商品数据   商品是否被收藏过 利用页面监听加载onShow()函数

data: {
    goodsObj: {},
    // 商品是否被收藏
    isCollect:false
  },
  // 商品对象
  GoodsInfo: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onShow: function () {
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1];
    let options = currentPage.options;
    const { goods_id } = options;
    this.getGoodsDetail(goods_id);


  },

获取商品详情数据

// 获取商品详情数据
  async getGoodsDetail(goods_id) {
    const goodsObj = await request({ url: "/goods/detail", data: { goods_id } });
    this.GoodsInfo = goodsObj;
    // 1 获取缓存中的商品收藏的数组
    let collect = wx.getStorageSync("collect") || [];
    // 2 判断当前商品是否被收藏
    let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);
    this.setData({
      goodsObj: {
        goods_name: goodsObj.goods_name,
        goods_price: goodsObj.goods_price,
        // iphone部分手机 不识别 webp图片格式 
        // 最好找到后台 让他进行修改 
        // 临时自己改 确保后台存在 1.webp => 1.jpg 
        goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
        pics: goodsObj.pics
      },
      isCollect
    })
  },

给收藏绑定一个点击事件   获取本地存储中商品收藏数组 判断商品是否收藏过 进行判断 当index=-1时 表示该商品已收藏  否则没有收藏

// 点击 商品收藏图标
  handleCollect(){
    let isCollect=false;
    // 1 获取缓存中的商品收藏数组
    let collect=wx.getStorageSync("collect")||[];
    // 2 判断该商品是否被收藏过
    let index=collect.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);
    // 3 -1表示 已经收藏过 
    if(index!==-1){
      // 能找到 已经收藏过了  在数组中删除该商品
      collect.splice(index,1);
      isCollect=false;
      wx.showToast({
        title: '取消成功',
        icon: 'success',
        mask: true
      });
        
    }else{
      // 没有收藏过
      collect.push(this.GoodsInfo);
      isCollect=true;
      wx.showToast({
        title: '收藏成功',
        icon: 'success',
        mask: true
      });
    }
    // 4 把数组存入到缓存中
    wx.setStorageSync("collect", collect);
    // 5 修改data中的属性  isCollect
    this.setData({
      isCollect
    })
  }// 点击 商品收藏图标
  handleCollect(){
    let isCollect=false;
    // 1 获取缓存中的商品收藏数组
    let collect=wx.getStorageSync("collect")||[];
    // 2 判断该商品是否被收藏过
    let index=collect.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);
    // 3 -1表示 已经收藏过 
    if(index!==-1){
      // 能找到 已经收藏过了  在数组中删除该商品
      collect.splice(index,1);
      isCollect=false;
      wx.showToast({
        title: '取消成功',
        icon: 'success',
        mask: true
      });
        
    }else{
      // 没有收藏过
      collect.push(this.GoodsInfo);
      isCollect=true;
      wx.showToast({
        title: '收藏成功',
        icon: 'success',
        mask: true
      });
    }
    // 4 把数组存入到缓存中
    wx.setStorageSync("collect", collect);
    // 5 修改data中的属性  isCollect
    this.setData({
      isCollect
    })
  }

分享功能的实现

如果想在页面上实现点击按钮分享,那么这个点击的按钮必须使用button标签,并且open-type置为share

<view class="tool_item">
    <view class="iconfont icon-Share"></view>
    <view>分享</view>
    <button open-type="share"></button>
  </view>

说明:这时已经实现了分享功能  为了更好的展示  此时可以自己给button添加功能  比如以下代码

onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			return {
				// 自定义分享内容,通过右上角三个点
				title: '转发给朋友测试', // 自定义的title
				path: '/pages/myself/myself', // 自定义的页面path
				imageUrl: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1245218877,2749263190&fm=26&gp=0.jpg' // 自定义的图片
			}
		},

客服功能的实现

在微信小程序中,是有一个自带的客服功能的,没有激活的事件,想要打开客服的功能只需要一个按钮

  1. 首先需要有小程序测试号

  2. 在微信公众平台登陆小程序,

  3. 在小程序管理界面找到客服,添加客服人员

  4. 其次就是代码,在当前页面添加button按钮,触发打开客服聊天界面

  5. <button open-type="contact">客服</button>

  6. 完成以上之后重要的就是需要扫码添加小程序提供的客服小程序,只有添加该小程序之后才能实现客服聊天

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

总结:详细解释见代码注释

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值