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

最新推荐文章于 2023-01-18 07:00:00 发布
最新推荐文章于 2023-01-18 07:00:00 发布
阅读量237 收藏 2
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 商品收藏 本地存储 分享功能 客服接口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ikun__/article/details/116767269
版权

 

前言：

     商品收藏

  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>

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

PicriL@Shmily
关注
专栏目录
微信小程序实现朋友圈分享功能，以及保存图片到手机功能
swx999的博客
07-31 1661
分享到朋友圈 代码展示： 效果图： onShareAppMessage(Object object)参数： 监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。 return的参数： 字段 类型 说明 from String 转发事件来源（button：页面内转发按钮；menu：右上角转发菜单） target Object 如果 from 值是 button，则 target 是触发这次转发事件的 bu
小程序iconfont图标问题和页面加载问题
庹小智的博客
07-23 1034
1.接手一个旧项目时，客户反映，在点击朋友转发的商品详情连接时，进去后出现一片空白 经过查阅代码后，发现是详情页接口请求参数时必须携带用户token，否则不能返回 这个参数大家都知道，用户登陆后每回请求接口都上带上这个参数，而这个接口就要求用户必须登陆后才能请求，所以经过考虑，我加了一个判断：检查用户有没有登陆，没有登陆就登陆后再请求接口，登陆了就直接请求接口： 但是之前封装的doLogin方法，获取用户授权后，直接wx.navigateBack();返回后没有携带最新的token..
Iconfont简介
dong_chl的专栏
12-17 528
一、概述 个人擅长后端开发，一直以为网站或者App的图标都是显示的图片。最近在研究开源项目的时候发现，图标全都写在一个iconfont.css的文件中，没有图标路径，只是一堆看不懂的编码和定义的css样式。后来搜索发现，iconfont是阿里提供的一套免费图标库，你可以选择你喜欢的图标，然后打包下载进行使用。如何使用官网已经给出了详细教程，不懂的伙伴可以点这里。它是建立在css3提供的@font-...
【微信小程序】收藏功能的实现(条件渲染、交互反馈)
m0_55394328的博客
01-18 6060
哈喽大家好，本期是微信小程序专栏第十九期。每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
微信小程序云开发之收藏文章功能的简单实现
sdqmrj的博客
08-27 5213
简单实现收藏文章并展示在收藏界面
小程序点赞收藏功能的实现代码示例
10-18
在本文中，我们将探讨小程序点赞收藏功能的实现。点赞和收藏是小程序中常见的功能，可以帮助用户标记喜欢或想要收藏的内容。以下将详细解释实现此功能涉及的关键点和代码示例。 首先，要实现点赞收藏功能，需要处理...
微信小程序之收藏功能、分享功能、客服功能
七的博客
05-16 1915
微信小程序收藏功能： 首先在wxml页面布局： <view class="top"> <!-- 点击收藏的图片 --> <img src="../image/home.png" catchtap="tocar" wx:for="{{!car}}"> <!-- 取消收藏的图片 --> <img src="../image/home_active.png" catchtap="tocar" wx:for="{{car}}"> </
微信小程序实例--洗衣小程序开发经验分享
03-29
下来看看该小程序“轻客”，本人写了几个自己觉得主要的功能，还有部分功能待编写中，欢迎各位看官批评，同时跪求各位看官收藏点赞，不胜感激，上效果图： (此图片来源于网络，如有侵权，请联系删除! ) 概览.gif  ...
一个随机阅读古诗的小程序，有收藏、分享截图的功能。.zip
最新发布
03-10
同时，其特色功能如实时更新的信息推送、个性化推荐以及社交分享功能，让用户能够及时获取所需信息，并方便地将优质内容分享至朋友圈或好友，实现信息的高效传播与互动。 【小程序名称】注重数据安全与隐私保护，...
小程序_收藏功能_学习记录
tattoo_jie的博客
08-14 805
今天整理了小程序中收藏功能的编写方法，因为未涉及到后端，所以我是通过小程序中的缓存来模拟此功能 wxml中的代码如下： <view> <image catch:tap="handleClickShow" wx:if="{{isShow}}" src="sc1.png" /> <image catch:tap="handleClickShow" wx:else src="sc2.png" /> </view> view中包裹的是两张图片，一张是点赞
小程序—点击收藏功能
记录点滴
02-10 9596
最近整理了小程序中收藏功能的编写方法，因为未涉及到后端，所以我是通过小程序中的缓存来模拟此功能，废话不多说直接开干！ wxml中的代码如下： <view> <image catch:tap="handleClickShow" wx:if="{{isShow}}" src="sc1.png" /> <image catch:tap="handleCli...
微信小程序怎么实现收藏功能
kamianlaidaa的博客
05-17 6495
小程序如何写收藏，分享，客服功能 收藏 页面中注册点击事件 <view class="goods_collect" bindtap="handleCollect"> <text class="iconfont {{isCollect?'icon-shoucang1':'icon-shoucang'}}"></text> <view class="collect_text">收藏</view> </view&gt
小程序的收藏、分享、客服功能
qwerwjs的博客
05-14 340
收藏 需要我们插入一个图表按钮,点击收藏让他有明显的效果视图,让用户有更好的体验 我们可以去https://www.iconfont.cn/这个网站来找到我们需要的图表 简单的使用图表 <text class="iconfont icon-shoucang"></text> 具体实现的代码,来完成我们上面的收藏,和未收藏 <text class="iconfont {{isCollect?'icon-shoucang1':'icon-s...
微信小程序顶部导航栏样式设置（自定义）
热门推荐
dqzd12345的博客
10-23 2万+
效果： 一、要用自定义的导航栏需要在app.json中配置（必须） 取消自带的导航栏："navigationStyle": "custom" 目前微信小程序不支持单个页面设置，一旦在要决定使用自定义导航栏，那么每个页面都需要设置，为了方便我就将其写成了一个组件： 二、目录结构 1、navbar.wxml文件： <view class='nav-wrap' st...
【微信小程序】黑马优购--10商品收藏模块
weixin_58214412的博客
12-28 1193
12.商品收藏模块 12.1商品详情页面加载获取收藏数据 在wxml中加判断改为图标 <view class="goods_collect"> <text class="iconfont {{isCollect?'icon-shoucang':'icon-shoucang1'}}"></text> <view class="collect_text">收藏</view> </view> 在js中 ..
find方法和 findIndex方法的使用
xy520zzz的博客
10-31 8493
find方法和findIndex方法都是用于查找数组中符合条件的元素，但是两者有细微的差别 find方法是通过判断条件返回符合条件的对象 // 定义一个数组，里面包含多个对象，通过find方法来查找满足条件的对象 var arr = [ { id: 1, name:'张三' }, { id: 2, name:'张三' }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值